Disabling RadPanelItem in codebehind disables all controls in RadPanelItem?

[gunther]

I have a RadPanelBar with an RadPanelItem collection declared in the markup (it's not built dynamically).  On the page load in the codebehind, I disable all but the first panel item.  I disable panel items like this:

RadPanelBar1.FindItemByValue("Quantity").Enabled = false;

Then, when a RadGrid row is double-clicked in first, enabled RadPanelItem, I use the RadGrid's client-side API to enable the next panel item via Javascript.  The Javascript performs as expected and enables the panel item, but all of the controls within the newly enabled panel are disabled.

I just discovered this after making a modification to a page.  Previously, we set these panels to disabled via Javascript using the following code:

panel.findItemByValue("PriceStructure").disable();

This disabled only the panel item itself and not the controls within the panel item.  However, now we need to disable these in the codebehind, but all the controls within the item become disabled.

How do I keep this from happening when disabling panel items in the codebehind?

[gunther]

Any help on this?

[Kate]

Hello Gunther,

Can you provide the javascript function that you use to enable the RadPanelBarItems as well the markup of the page so we can test it locally?

Thanks

Regards,
Kate
the Telerik team

[gunther]

I reproduced it in a test app.  Here's the markup and code:

Markup

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="575px">
    <Items>
        <telerik:RadPanelItem runat="server" Text="Test" Value="TestPanel1" Expanded="true" Selected="true">
            <Items>
                <telerik:RadPanelItem runat="server">
                    <ItemTemplate>
                        <asp:TextBox ID="txTest" runat="server" />
                        <asp:DropDownList ID="ddTest" runat="server">
                            <asp:ListItem Text="Test1" />
                            <asp:ListItem Text="Test2" />
                        </asp:DropDownList>
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Test" Value="TestPanel2" Expanded="true">
            <Items>
                <telerik:RadPanelItem runat="server">
                    <ItemTemplate>
                        <asp:TextBox ID="txTest2" runat="server" />
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

<asp:HiddenField ID="hfUseScript" Value="1" runat="server" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script language="javascript" type="text/javascript">

        Sys.Application.add_load(Load);

        function Load() {
            if (document.getElementById("<%=hfUseScript.ClientID %>").value == "1") {
                var panel = $find("<%=RadPanelBar1.ClientID %>");
                panel.findItemByValue("TestPanel1").disable();
            }
        }

    </script>
</telerik:RadCodeBlock>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (hfUseScript.Value != "1")
        RadPanelBar1.FindItemByValue("TestPanel1").Enabled = false;
}

Change the value of the hidden field to a "1" to use the client script and use any other value to execute the codebehind code.  When the Javascript runs, it disables only the panel and does not affect the enabled state of the controls within it.  When the codebehind code is run, though, it not only disables the tab, but also all controls within it.

What I want is for the controls in the tab to not be disabled when the tab is disabled in the codebehind (ie, I want it to behave identically to the clientside version).

[gunther]

Any idea on this?  I am hoping to get this resolved today since we're doing a production deployment tonight.  If no one can look at it then I will just hack it for now by setting a hidden field value in the codebehind's page load to tell the client to disable the tabs using Javascript.

[gunther]

Bump

[gunther]

Attn Kate or any other Telerik staff member -

I have provided my source code as requested.  The above code can be pasted into a web form or a content form using a master page. I have even made it easy to toggle between client-side and server-side methods.  Is anyone able to reproduce my issue?

[Kate]

Hi Gunther,

We looked at the code that you have provided but besides the solutions that you have mentioned in the previous posts we can not come up with any other ideas that would fit your scenario better.

Kind regards,
Kate
the Telerik team

[gunther]

The reason I have come back to this is because my hack solution doesn't work and causes other client-side issues.  All I would like to know for now is whether or not the server-side issue I have mentioned is by design.  In other words, is disabling a tab using server-side code supposed to disable all controls in the tab, whereas doing it with client-side code is not?

[Kate]

Hello Gunther,

It is very possible that some of the controls that you put in the template do not have client API and consequently they can not be disabled on the client side. Therefore the current implementation of the client-side and server-side disable methods differ since we can not predict what controls may be placed in the template. So, the behaviour of the control that you encounter is not a bug but rather a limitation caused by controls that do not possess client-side API. 

All the best,
Kate
the Telerik team

[Suresh]

Any solution to this?

[Attila Antal]

Hello,

As Kate has mentioned earlier, the behavior of the Controls on the Client and Server differ. Before a Control is rendered on the page, the server-side implementation checks for the Disabled state of their parents and reflects that accordingly. 

Disabling the Panel on the server side will render all of its Children in a Disabled state.

Unlike the server-side implementation, the client-side implementation does not check for the parent's Disabled state, therefore, disabling an element using JavaScript will not automatically disable its children.

However, you can use JavaScript and the Components' Client-Side APIs to iterate through all Child controls of the Panel item and disable them accordingly. The same approach applies when enabling the controls on Client Side.

Most Telerik Controls provide client-side APIs to change their state, for the API documentation you can refer to the Telerik UI for ASP.NET AJAX Documentation.

Controls that do not provide client-side APIs can still be disabled using native JavaScript code. Please refer to HTMLSelectElement: disabled property

Regards,
Attila Antal
Progress Telerik