mercredi 8 juin 2022

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?




Aucun commentaire:

Enregistrer un commentaire