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

hide/show table in panelitem on expand/collapse via javascript

3 Answers 291 Views

PanelBar

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

Chet Watkins asked on 22 Jan 2009, 10:37 PM

We have a situation where a lot of RadComboBox's are being rendered in panels that are closed during the loading of the page. I am not sure why this is happening, but making those tables hidden initially drastically reduces the page load time.

Now we want to be able to make the table in a panel that is clicked on visible again when it is expanded and hidden when it is collapsed. We are doing this client side since server side makes the whole page refresh which then kills the load times again as you open all the panels.

I have tried many different ways to get this work using examples on the site and through other post and can't seem to get the right combination. Any help would be appreciated on how to do this or how to make the panels not try to render the combobox's when they are visible to begin with. Thanks!

    
                function OnExpand(sender, eventArgs) {  
        
                    var panelbar = $find("<%= RadPanelBar1.ClientID %>");  
        
                    var item = panelbar.findControl("opt1item");  
        
                    //item.style.display = 'block';  
        
                    item.style.visibility = 'visible';  
        
                }  
        
                function OnCollapse(sender, eventArgs) {  
        
                    var panelbar = $find("<%= RadPanelBar1.ClientID %>");  
        
                    var item = panelbar.findControl("opt1item");  
        
                    //item.style.display = 'none';  
        
                    item.style.visibility = 'hidden';  
        
                }

    
            <telerik:RadPanelBar ID="RadPanelBar1" Runat="server" Width="100%" onclientitemcollapse="OnCollapse" onclientitemexpand="OnExpand" > 
        
                <CollapseAnimation Duration="100" Type="None" /> 
        
                <Items> 
        
                      <telerik:RadPanelItem ID="rpiOpt1" runat="server" Text="(+) Optional Fields">  
        
                        <Items> 
        
                            <telerik:RadPanelItem Value="valuestring">  
        
                                <ItemTemplate> 
        
                                    <table id="opt1item" visible="false" runat="server" width="100%">  
        
                                        <tr> 
        
                                            <td align="right">  
        
                                                <asp:Label ID="LabelCS" runat="server" Text="Customer Solicitation #: " TabIndex="-1"></asp:Label> 
        
                                            </td>

3 Answers, 1 is accepted

answered on 23 Jan 2009, 05:04 PM

Since this is a hidden table in the beginning, I tried code I found else where in the forums that would assign it an ID even though it is not rendered. This will give a value of the path, but when I assign that to another variable like the post says, I still get nulls.

    
            function OnExpand(sender, args){  
        
            var item = args.get_item();  
        
            var tableItem = document.getElementById("opt1hidden");  
        
            var tableItem2 = document.getElementById(tableItem.value);  
        
            alert(tableItem2);  
        
            }

    
                        HtmlTable opt1tbl = (HtmlTable)RadPanelBar1.FindItemByValue("valuestring").FindControl("opt1item");  
        
                        Page.ClientScript.RegisterHiddenField("opt1hidden", opt1tbl.ClientID);