Button checked on client side but not checked on code behind when posted

[Rafael]

I have a radButton in my page dinamially built on page load with checked set to true.
When page loads I see the button checked, but when I post I check if button is checked and its not!!!
But in this same scenario: page loads and button is checked. If I uncheck the button then check again, when I post the button is checked as expected!

What Im doing wrong?

[Shinu]

Hi Rafael,

Please have a look into the following code I tried which worked fine at my end.

ASPX:

<telerik:RadButton ID="RadButton2" runat="server" Text="Check Status" OnClick="RadButton2_Click">
</telerik:RadButton>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    RadButton radbutton1 = new RadButton();
    radbutton1.ID = "RadButton1";
    radbutton1.Text = "Text";
    radbutton1.ToggleType = ButtonToggleType.CheckBox;
    radbutton1.Checked = true;
    this.form1.Controls.Add(radbutton1);
}
protected void RadButton2_Click(object sender, EventArgs e)
{
    RadButton radbutton = (RadButton)form1.FindControl("RadButton1");
    if (radbutton.Checked)
    {
        Response.Write("<script>alert('Checked')</script>");
    }
    else
    {
        Response.Write("<script>alert('UnChecked')</script>");
    }
}

Thanks,
Shinu.

[Rafael]

Thanks for the help.

I was using 2 radbuttontogglestate with the button.
I commented the togglestate creation and now it´s working.

[Mark Kucera]

Telerik Version: 2013.3.1324.40

I'd like to shed some more light on this issue, because i am also experiencing this same problem.  I think my setup is similar to Rafael's but unfortunately my resolution is different.   My setup is very similar.  I have a Radbutton that is being used as a checkbox.

<telerik:RadButton ID="cbActive" runat="server" ButtonType="LinkButton" EnableEmbeddedSkins="false" Skin="Web20" ToggleType="CheckBox" Text="Active (Must be Checked in order for user to have login access.)" AutoPostBack="false">
<ToggleStates>
    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />
    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
</ToggleStates>
</telerik:RadButton>

The checkbox is using togglestates so that i can define styles to customize the actual checkbox display.  The Radbutton is placed in an .ascx file, so it's not quite being added dynamically, but what makes this similar to the original poster is that the .ascx file is added to the page programatically.

wucEditUser panelEditUser = (wucEditUser)this.Page.LoadControl(USEREDIT_CONTROL);
...
//set some properties on the control
panelEditUser.Active = account.Active.Value;
...
//add the control to the page dynamically
userPanel.Controls.Add(panelEditUser);
...

//The Active Property looks like this, where cbActive is the RadButton that i defined above in the .ascx:
public bool Active
{
    get { return cbActive.Checked; }
    set { cbActive.Checked = value; }
}

When the control loads and i set cbActive.Checked = true,  the page looks correct. i.e. the checkbox appears to be checked. But when i submit the form (without changing the checkbox) The getter on my Active property is returning false. 

As indicated by the original poster, once the page loads, if i uncheck the box and re-check it before submitting it works fine. 

I was able to do some investigation into this issue and i noticed that when the checkbox initially appeared on the page it rendered like this:

<span id="ctl00_mainContentArea_wucAccountUserManager1_EditUser_cbActive" class="RadButton RadButton_Web20 rbLinkButton rbLinkButtonChecked" tabindex="0">
    <span class="rbPrimaryIcon rbToggleCheckboxChecked"></span>
    <span class="rbText rbPrimary"></span>
    <input id="ctl00_mainContentArea_wucAccountUserManager1_EditUser_cbActive_ClientState" type="hidden" name="ctl00_mainContentArea_wucAccountUserManager1_EditUser_cbActive_ClientState" autocomplete="off"></input>
</span>

If you look in that last hidden element, you'll see that it's missing it's value attribute.  Without clicking the checkbox, if i submit the form then the the client state for the button is blank (because the the hidden client state field has no value)  and therefore my server-side code see the RadButton as now being unchecked. 

On the page, if it check the box manually then the markup immediately changes to:

<span id="ctl00_mainContentArea_wucAccountUserManager1_EditUser_cbActive" class="RadButton RadButton_Web20 rbLinkButton" tabindex="0">
    <span class="rbPrimaryIcon rbToggleCheckbox"></span>
    <span class="rbText rbPrimary"></span>
    <input id="ctl00_mainContentArea_wucAccountUserManager1_EditUser_cbActive_ClientState" type="hidden" name="ctl00_mainContentArea_wucAccountUserManager1_EditUser_cbActive_ClientState" autocomplete="off" value="{"text":"Active (Must be Checked in order for user to have l…ToggleStateIndex":1,"validationGroup":null,"readOnly":false}"></input>
</span>

and that hidden field now has it's value attribute specified.    So this make sense to me.  it explains why if it uncheck and recheck the box before submitting the form it works.    But this is an unrealistic expectation for our users to perform.  As a workaround what i've done is add a client-side OnLoad event to the checkbox definition OnClientLoad="ActiveLoad"  and in the ActiveLoad method i'm clicking the RadButton twice.

<script language="javascript" type="text/javascript">
function ActiveLoad(sender, args) {
    //attempting to correct for issue when checkbox is initially checked on the server side.
    var button = $find("<%= cbActive.ClientID %>");
    var checked = button.get_checked();
    button.set_checked(!checked);
    button.set_checked(checked);
}
</script>

This fixes the problem and causes the hidden variable to populate with the data it needs for the postback..  But it only works on this one page.  I'm not sure how many other places i might be doing this same thing that might also be not working. 

Hopefully this gives you all the information that you need to try to figure out a proper fix for this issue.  If there is anything else i can provide, please let me know.

[Shinu]

Hi Mark Kucera,

Please have a look into the sample code snippet which works fine at m end.

ToggleButton.ASCX :

<telerik:RadButton ID="cbActive" runat="server" ButtonType="LinkButton" Skin="Web20"
    ToggleType="CheckBox" Text="Active (Must be Checked in order for user to have login access.)">
    <ToggleStates>
        <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />
        <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
    </ToggleStates>
</telerik:RadButton>

ToggleButton.ASCX.CS :

public bool Active
{
    get
    {
        return cbActive.Checked;
    }
    set
    {
        cbActive.Checked = value;
    }
}

ASPX:

<telerik:RadButton ID="RadButton1" runat="server" Text="Value" OnClick="RadButton1_Click">
</telerik:RadButton>

ASPX.CS :

public ToggleButton ToggleButton1;
protected void Page_Init(object sender, EventArgs e)
{
    ToggleButton1 = (ToggleButton)LoadControl("ToggleButton.ascx");
    ToggleButton1.Active = true;
    this.Controls.Add(ToggleButton1);
}
protected void RadButton1_Click(object sender, EventArgs e)
{
    bool value = ToggleButton1.Active;
}

Thanks,
Shinu.

[Mark Kucera]

Well of course this works!!  You are hard coding the value of the Active property to True!  This solution doesn't make any sense at all.  First of all, i realize this is just a demonstration, but the has many properties and markup not just a single RadButton.  Secondly, the .aspx.cs file isn't going to know in Page_Init if the .ascx control is going to be shown.  That's the whole reason why the control is being loaded dynamically in the first place, it's only shown under certain conditions. i.e. a specific button click. 

-Mark

[Danail Vasilev]

Hi Mark,

I have tried to reproduce the mentioned issue with the persistence of the RadButton's toggle states when they are changed on the client as well as on the server through the Active property of the user control but to no avail. Could you please watch the short video in the attached archive and then tell me what I am missing?

Note that if you are loading the user control too late in the ASP.NET life cycle , its view state will not be persisted across postbacks. Therefore if you want to track the user control's ViewState you must load it earlier.

Regards,
Danail Vasilev
Telerik