Resize window when RadPanelbar Expand/Collapse

[Mickael]

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>

[Marin Bratanov]

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

 

 

[Mickael]

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>

[Mickael]

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.

[Mickael]

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

[Marin Bratanov]

Hi Michael,

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

• http://www.telerik.com/help/aspnet-ajax/panelbar-onclientitemexpand.html.
• http://www.telerik.com/help/aspnet-ajax/panelbar-onclientitemcollapse.html.
• http://blogs.telerik.com/aspnet-ajax/posts/12-08-10/migrating-onclientclick-handlers-from-asp-button-to-telerik-s-asp-net-ajax-button.aspx.

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


Regards,

Marin Bratanov
Telerik

 

 

[Mickael]

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.

[Marin Bratanov]

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

 

 

[Mickael]

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 ?

[Mickael]

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.

[Marin Bratanov]

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

 

 

[Mickael]

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.