This is a migrated thread and some comments may be shown as answers.

Disabling RadPanelItem in codebehind disables all controls in RadPanelItem?

2 Answers 242 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
gunther
Top achievements
Rank 1
gunther asked on 28 Jul 2011, 02:36 PM
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
Top achievements
Rank 1
commented on 02 Aug 2011, 03:54 PM

Any help on this?
Kate
Telerik team
commented on 02 Aug 2011, 05:07 PM

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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

gunther
Top achievements
Rank 1
commented on 02 Aug 2011, 07:08 PM

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
Top achievements
Rank 1
commented on 04 Aug 2011, 02:30 PM

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
Top achievements
Rank 1
commented on 05 Aug 2011, 06:26 PM

Bump
gunther
Top achievements
Rank 1
commented on 08 Aug 2011, 02:04 PM

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
Telerik team
commented on 08 Aug 2011, 04:09 PM

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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

gunther
Top achievements
Rank 1
commented on 08 Aug 2011, 04:52 PM

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?

2 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 11 Aug 2011, 03:46 PM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Suresh
Top achievements
Rank 2
commented on 11 Apr 2023, 08:57 PM

Any solution to this?
0
Attila Antal
Telerik team
answered on 13 Apr 2023, 12:07 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
PanelBar
Asked by
gunther
Top achievements
Rank 1
Answers by
Kate
Telerik team
Attila Antal
Telerik team
Share this question
or