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

[Chet Watkins]

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>

[Chet Watkins]

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!

[Chet Watkins]

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);

[Atanas Korchev]

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.