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 200 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Chet Watkins
Top achievements
Rank 1
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

Sort by
0
Chet Watkins
Top achievements
Rank 1
answered on 23 Jan 2009, 01:42 PM
Update: This is being run on an ASCX page, I think this is the problem. Has anyone had any luck with javascript on a usercontrol? Thanks!
0
Chet Watkins
Top achievements
Rank 1
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);  
 
0
Atanas Korchev
Telerik team
answered on 26 Jan 2009, 05:55 PM
Hi Chet Watkins,

Controls which are made visible=false are not rendered at all on the client-side. As a result you cannot show them via JavaScript. How many items does your panelbar have? Typically tables should not include that much of a delay. You can try making the tables with fixed layout instead of making them invisible:

<table style="table-layout:fixed">

If this does not help - could you please open a support ticket and send us a sample page which reproduces the delay? Thanks.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
PanelBar
Asked by
Chet Watkins
Top achievements
Rank 1
Answers by
Chet Watkins
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or