CODEWITHSUNDEEP
javascriptasp.netcheckboxtelerikradgrid
Chevelho51
Chevelho51

Reputation: 25

Not managing to change ASP checkbox border color either in code behind as well in JS

I have an ASP checkbox nested into a Telerik RadGrid in an ASPX page.

When this checkbox is checked/unchecked it suppose to perform an action in code behind. It's working fine. However my client required that it changes the color twice. First to red when it is clicked and then to green when the action is concluded.

I kind of figured how to do this but in my test code it's not working as supposed. I changed its color to red, then popped an alert and then changed the color to green. The problem is that the color is not being changed BEFORE the alert.

I guess it's a control refresh issue. If it was a Windows form I could force it by using the methods Refresh or Update, but in a Web form I don't know if it is even possible.

This is the relevant part of my ASP:

<telerik:RadAjaxManagerProxy ID="radajaxmanager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="chkSave">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="chkSave" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowAutomaticDeletes="true" AllowMultiRowSelection="True" >

        <MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Caption="List" DataKeyNames="Id">
            <Columns>
                <telerik:GridBoundColumn DataField="Id" HeaderText="Id" UniqueName="Id"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Description" HeaderText="Description" UniqueName="Description"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Price" HeaderText="Price" UniqueName="Price"></telerik:GridBoundColumn>

                <telerik:GridTemplateColumn HeaderText="Save this"> 
                    <ItemTemplate> 
                        <asp:CheckBox ID="chkSave" runat="server" autoPostBack="true" OnCheckedChanged="chkSave_CheckedChanged" />
                    </ItemTemplate> 
                </telerik:GridTemplateColumn> 
               
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

And this is my code behind:

Protected Sub chkSave_CheckedChanged(sender As Object, e As EventArgs)

    Dim chk As CheckBox = CType(sender, CheckBox)
    Dim status As Boolean = chk.Checked
    Dim item As GridDataItem = CType(chk.NamingContainer, GridDataItem)
    Dim keyvalue As String = item.GetDataKeyValue("Id").ToString()

    chk.BorderStyle = BorderStyle.Solid
    chk.BorderColor = System.Drawing.ColorTranslator.FromHtml("#FF0000")
    ScriptManager.RegisterClientScriptBlock(Page, Me.GetType(), "MyScript", "alert('Changed');", True)
    chk.BorderColor = System.Drawing.ColorTranslator.FromHtml("#00FF00")    

End Sub

I tried doing it in Javascript too but again it didn't work:

ASP:

<asp:CheckBox ID="chkSave" runat="server" autoPostBack="true" OnCheckedChanged="chkSave_CheckedChanged" onChanged="colorMe(this);" />  

<javascript>
function colorMe (me) {
me.style.borderColor = "red";
}
</javascript>

Ideas?

Upvotes: 0

Views: 279

Answers (1)

Paulo Fernando
Paulo Fernando

Reputation: 3660

As far as i know the javascript tag doesn't exist... you have to use:

<script type="text/javascript">
   function colorMe (me) {
   me.style.borderColor = "red";
   }
</script>

Other thing i believe is worth mentioning, all of the code below executes in the server, it creates the page that is going to be sent to the browser, when you use registerclientscript, the server creates a script tag in the page, but it's not executed right away, because the page is still in the server, then the page is sent to the browser, the browser will receive and render the page and execute the script that the server put. When you set the border color the first time, you set red, and when you set other color in the other line, you just replaced the value red with green, so the server sent the checkbox with green border, the red border never was sent to the browser.

chk.BorderColor = System.Drawing.ColorTranslator.FromHtml("#FF0000")
ScriptManager.RegisterClientScriptBlock(Page, Me.GetType(), "MyScript", "alert('Changed');", True)
chk.BorderColor = System.Drawing.ColorTranslator.FromHtml("#00FF00")

Upvotes: 0

Related Questions