RadPanelBar size reverting on ItemClick

2 posts, 0 answers
  1. Dave Perrill
    Dave Perrill avatar
    9 posts
    Member since:
    Apr 2011

    Posted 04 Feb 2014 Link to this post

    I am using the RadPanelBar to display a selection of reports to the user.  The reports are in categories, and the number of categories and reports depends upon the user.  The RadPanelBar is data bound at run time.  It is part of a div that also contains a search box and a filter for the reports (data bound check list).

    Because the screen resolution varies based on the user, I need to dynamically resize the RadPanelBar.  I am doing so through javascript, and it generally works fine.  The RadPanelBar conforms to the initial screen size, and scales with the resize.  And so long as only the expand/collapse arrows are clicked, it maintains the new size.  The problem is that as soon as any item is click, it reverts back to the default size.  After that, if the screen is resized, or the expand/collapse arrows are used to fully collapse the RadPanelBar, it will return to the correct size.

    I tried to fix this by wrapping the RadPanelBar in a RadAjaxPanel and added the ForceResize to ClientEvents-OnResponseEnd; that did not work.

    Currently I have added additional JavaScript to wait one second after the item click, and then call ForceResize again.  That alone did nothing, so I added code to collapse and expand the item; that partially worked, but does not restore it to the full size.

    My page is part of a larger project, and is on a MasterPageFile, if that makes any difference.

    Here is the javascript I am using for the resize:
    function ForceResize() {
        var height = getDocHeight() - 275;
        if (height < 250) height = 250;
     
        var reportCategoryPb = document.getElementById("<%= this.ReportCategoryPb.ClientID %>");
        if (reportCategoryPb) {
            reportCategoryPb.style.height = height + 'px';
            reportCategoryPb.Height = parseInt(height);
        }
    }
     
    function PanelResize() {
        ForceResize();
        var reportCategoryPb = document.getElementById("<%= this.ReportCategoryPb.ClientID %>");
        if (reportCategoryPb) {
            var item = $find("<%= this.ReportCategoryPb.ClientID %>").get_expandedItem();
            if (item) {
                item.collapse();
                item.expand();
            }
        }
    }
     
    function resizeTrigger() {
        setTimeout("PanelResize()", 1250);
    }
     
    $(document).ready(function () {
        ForceResize();
    });
     
    $(window).resize(function () {
        ForceResize();
    });


    And here is a abbreviated version of the ASPX:
    <telerik:RadAjaxPanel ID="ReportUI_Ajax" runat="server" ClientEvents-OnResponseEnd="ForceResize" >
            <div id="ReportCombinedListDiv" style="width: 25%; height: 100%; float: left; border: 1px solid #CCC; padding: 5px;">
                <asp:Label ID="ReportCombinedListLbl" runat="server" Font-Size="Large" Font-Bold="true" Text="Reports" />
                <br />
                <hr />
                <br />
                <trm:TrmSearchBox runat="server" ID="ReportListSearch" TargetControlID="ReportListPb" DataTextField="ReportName" DataValueField="ReportId"/>
                <asp:Label ID="ReportTypeLabel" runat="server" Text="Report Types" Font-Size="Larger" Font-Bold="true" />
                <br />
                <telerik:RadListBox ID="ReportTypeFilter" runat="server" CheckBoxes="true" OnItemCheck="ReportFilter_ItemCheck" BorderColor="White" AutoPostBack="true"
                    DataTextField="Name" DataValueField="ReportTypeId" Style="height: 60px;" CssClass="multiColumn" Width="100%" />
                <br />
                <telerik:RadPanelBar ID="ReportCategoryPb" runat="server" ExpandMode="FullExpandedItem" OnItemClick="ReportCategoryPb_ItemClick" Height="325px" Width="100%"
                                     AllowCollapseAllItems="true" >
                </telerik:RadPanelBar>
            </div>
    </telerik:RadAjaxPanel>

    I tried to implement the instructions in the support KB here.  But the javascript threw an error on InitFullExpandOpera(), and after I removed that line, it did nothing.

    This thread suggests using the panel bar's repaint; but I cannot find any documentation or examples, and my attempts to extrapolate from other repaint examples have only resulted in errors.

    The version of Telerik.Web.UI I am using is 2013.3.1114.45.

    Has anyone encountered this issue, and have you found a way to fix it?

  2. Dave Perrill
    Dave Perrill avatar
    9 posts
    Member since:
    Apr 2011

    Posted 04 Feb 2014 Link to this post

    With the help of one of my coworkers, we figured out a work around.  I added a hidden field, and write the height value out to it.  Then, on page load, if it is a postback, I set the panelbar's height to the captured valued.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top