This is a migrated thread and some comments may be shown as answers.

Resize window when RadPanelbar Expand/Collapse

11 Answers 72 Views
Window
This is a migrated thread and some comments may be shown as answers.
Mickael
Top achievements
Rank 1
Mickael asked on 07 Oct 2014, 12:53 PM
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>

11 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 07 Oct 2014, 01:15 PM

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.

 
0
Mickael
Top achievements
Rank 1
answered on 07 Oct 2014, 04:46 PM
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>
0
Mickael
Top achievements
Rank 1
answered on 07 Oct 2014, 04:52 PM
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.




0
Mickael
Top achievements
Rank 1
answered on 07 Oct 2014, 04:56 PM
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
0
Marin Bratanov
Telerik team
answered on 08 Oct 2014, 10:08 AM

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.

 
0
Mickael
Top achievements
Rank 1
answered on 08 Oct 2014, 06:10 PM
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.


0
Marin Bratanov
Telerik team
answered on 09 Oct 2014, 11:52 AM

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.

 
0
Mickael
Top achievements
Rank 1
answered on 10 Oct 2014, 01:22 AM
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 ?
0
Mickael
Top achievements
Rank 1
answered on 10 Oct 2014, 02:22 AM
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.
0
Marin Bratanov
Telerik team
answered on 10 Oct 2014, 10:05 AM

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.

 
0
Mickael
Top achievements
Rank 1
answered on 11 Oct 2014, 05:58 PM
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.
Tags
Window
Asked by
Mickael
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Mickael
Top achievements
Rank 1
Share this question
or