Resize window when RadPanelbar Expand/Collapse

12 posts, 0 answers
  1. Mickael
    Mickael avatar
    24 posts
    Member since:
    Oct 2014

    Posted 07 Oct 2014 Link to this post

    Hi,

    I have a radwindow with a PanelBar inside.

    I declare the window like this:

    <telerik:RadWindow
        ID="RadWindow1"
        runat="server"
        AutoSizeBehaviors="Width, Height"
        AutoSize="true"
        VisibleStatusbar="false"
        Behaviors="Move"
        VisibleOnPageLoad="false"
        ReloadOnShow="true"
        Modal="true"
        NavigateUrl="Popup_Add.aspx"
        OnClientClose="OnClientclose"
        EnableShadow="true">
    </telerik:RadWindow>

    And inside the Popup_Add.aspx I have the RadPanelBar inside a tableCell, inside an updatepanel

    <asp:TableCell
        ColumnSpan="3"
        VerticalAlign="Middle">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <telerik:RadAjaxPanel
                    ID="RadAjaxPanel1"
                    runat="server">
                    <telerik:RadPanelBar
                        runat="server"
                        ID="RadPanelBar1"
                        ExpandMode="MultipleExpandedItems"
                        Width="100%">
                        <Items>
                            <telerik:RadPanelItem Expanded="false" Text="Advanced Settings" runat="server">
                                    <Items>
                                        <telerik:RadPanelItem Value="AccountInformation" runat="server">
                                            <ItemTemplate>
    [controls here]
     
                                                    </ItemTemplate>
                                                </telerik:RadPanelItem>
                                            </Items>
                                        </telerik:RadPanelItem>
                                </Items>
                            </telerik:RadPanelBar>
                        </telerik:RadAjaxPanel>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>

    based on http://demos.telerik.com/aspnet-ajax/window/examples/autosize/defaultcs.aspx
    I think I am supposed to call 'popup.autoSize(true);'

    But I am not sure how to wire it.

    I already have this in the window to close it, so I could reuse the GetRadWindow() for the autosize.
    I just need to know how to call it for the RadPanelBar expand/collapse

    <script type="text/javascript">
        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow) oWindow = window.radWindow;
            else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
            return oWindow;
        }
     
        function CloseWithArg(arg) {
            GetRadWindow().close(arg);
        }
    </script>
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 07 Oct 2014 Link to this post

    Hello,

    You can use the OnClientItemCollapse and OnClientItemExpand events of the panel bar.

    Then, GetRadWindow().autoSize() should do the trick.

    I also advise that you examine this article so you can setup the content page for autosizing: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-autosize-not-correct.html.

    On a side note - you should not nest asp:UpdatePanels and RadAjaxPanel controls, as this, effectively, results in nested update panels, and it can cause issues.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mickael
    Mickael avatar
    24 posts
    Member since:
    Oct 2014

    Posted 07 Oct 2014 in reply to Marin Bratanov Link to this post

    I added the margin/padding/height to the page css

    I also removed the RadAjaxPanel (because I want to keep the ability to trigger an Update on the panel)

    Then I added the events. But it looks like they are not triggering the resize.

    <telerik:RadPanelBar
        runat="server"
        ID="RadPanelBar1"
        ExpandMode="MultipleExpandedItems"
        Width="100%"
        onClientItemExpand="GetRadWindow().autoSize(true)"
        onClientItemCollapse="GetRadWindow().autoSize(true)">
        <Items>
            <telerik:RadPanelItem Expanded="false" Text="Advanced Settings" runat="server">
                    <Items>
                        <telerik:RadPanelItem Value="AccountInformation" runat="server">
                            <ItemTemplate>
    [content]
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>
  5. Mickael
    Mickael avatar
    24 posts
    Member since:
    Oct 2014

    Posted 07 Oct 2014 in reply to Mickael Link to this post

    Just for test, I replaced
    onClientItemExpand="GetRadWindow().autoSize(true)"
    onClientItemCollapse="GetRadWindow().autoSize(true)"​
    with
    onClientItemExpand="alert('expand')"
    onClientItemCollapse="alert('collapse')"

    both events are fired as soon as the window opens.
    And then they do not react anymore.




  6. Mickael
    Mickael avatar
    24 posts
    Member since:
    Oct 2014

    Posted 07 Oct 2014 in reply to Mickael Link to this post

    I moved the events to the RadPanelItem.
    This time the alerts do not show when the window opens.
    But they do not show either when I open/collapse the item
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 08 Oct 2014 Link to this post

    Hi Michael,

    Our controls take only the name of a JS function for their client-side event handlers:

    I hope this helps you use our client-side events in the future as well.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Mickael
    Mickael avatar
    24 posts
    Member since:
    Oct 2014

    Posted 08 Oct 2014 in reply to Marin Bratanov Link to this post

    I tried to put the javascript function name directly, and it looks like nothing happens.
    The resize does not occur.
    At least not vertically.

    I put the events on the RadPanelBar.
    Is that correct or should they be on the RadPanelItem? (because I tried that also and it did not change anything.

    This is what I have now:

    <telerik:RadPanelBar
        runat="server"
        ID="RadPanelBar1"
        ExpandMode="MultipleExpandedItems"
        Style="width: 100%"
        OnClientItemExpand="ResizeWindow"
        OnClientItemCollapse="ResizeWindow">

    Inside I have what I showed you above.
    The content is a div table.
    I set the div width to 100%, but not the height.(should I put it to 100% too?) (I tried to put the height to 100% and it changed nothing)
    it contains a few rows/columns with labels and buttons.


  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 09 Oct 2014 Link to this post

    Hi Mickael,

    Can you confirm the content size actually changes, as advised in the very first article I linked: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-autosize-not-correct.html? The AutoSize feature requires that the content provides the dimensions, it cannot be set in percent.

    Also, if you are using animations, you can also attach to the OnClientItemAnimationEnd event.

    I am attaching here a simple example and a short video with the expected behavior, so you can use them as base.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Mickael
    Mickael avatar
    24 posts
    Member since:
    Oct 2014

    Posted 09 Oct 2014 in reply to Marin Bratanov Link to this post

    Hi Marin,
    Yes, I confirm that the content is dynamic.
    So the size can increase vertically.

    Is there a way to calculate the size of the dynamically added content and apply it to the RadPanelbar using JavaScript ?
  11. Mickael
    Mickael avatar
    24 posts
    Member since:
    Oct 2014

    Posted 09 Oct 2014 in reply to Mickael Link to this post

    Actually I just observed something strange.
    When I expand the TabPanel, it looks like the window is resized to the size when the TabPanel is collapsed.
    And when I collapse the TabPanel, the window is resized to the size I expect to see when the TabPanel is expanded.
    It looks like a postback issue or something.

    This is what my TabPanel looks like now:

    <telerik:RadPanelBar
        runat="server"
        ID="RadPanelBar1"
        ExpandMode="MultipleExpandedItems"
        Width="500px"
        Style="text-align: center; padding-top: 5px; padding-left: 10px; padding-bottom: 5px; padding-right: 10px;"
        OnClientItemExpand="ResizeWindow"
        OnClientItemCollapse="ResizeWindow">
        <Items>
            <telerik:RadPanelItem Expanded="false" Text="Advanced Settings" runat="server">
                <ContentTemplate>
                    <div
                        id="dynamicTable">
                    </div>
                </ContentTemplate>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

    With my javascript like this:

    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <script type="text/javascript">
            function GetRadWindow() {
                var oWindow = null;
                if (window.radWindow) oWindow = window.radWindow;
                else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
                return oWindow;
            }
     
            function CloseWithArg(arg) {
                GetRadWindow().close(arg);
            }
     
            function ResizeWindow() {
                debugger;
                GetRadWindow().autoSize(true);
            }
        </script>
    </telerik:RadCodeBlock>

    For some reason the 'ResizeWindow' javascript function is never called.
    I thought I could try to get the Div height inside that function and force the PanelBar height with it.
    But the debugger is never hit.
  12. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 10 Oct 2014 Link to this post

    Hello,

    I am attaching here a short video that shows how the events are fired properly and how you can use the AnimationEnd event because it will fire after animations complete and dimensions are changed.

    I am also attaching here another video that shows how having a properly configured page (reduced paddings, provided dimensions) lets autosizing work as expected. Note that there is a minimal height of a RadWindow because of a browser limitation related to iframes inside tables (which is what RadWindow renders with), so it cannot get below about 150px total height.

    Please thoroughly examine the articles, videos and examples I have provided so far to get a complete understanding of the requirements for such a scenario to work.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Mickael
    Mickael avatar
    24 posts
    Member since:
    Oct 2014

    Posted 11 Oct 2014 in reply to Marin Bratanov Link to this post

    Thanks a lot Marin

    That last sample you gave me was exactly what I needed.
    It looks like the OnClientItemExpand and OnClientItemCollapse were fired before the inner items were created and sized.
    The OnClientItemAnimationEnd is doing the perfect job.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017