Autosize CHILDcontrols (ContentTemplate) in RadWindow

3 posts, 1 answers
  1. Max
    Max avatar
    34 posts
    Member since:
    Dec 2011

    Posted 15 Dec 2011 Link to this post

    Hi, I've tried various css/manuals/snippets to get RadSplitter within RadWindow automatically resize on RadWindow resize. I wonder if there's known way to do it without conditionally heavy client-side js.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GlobalException.aspx.cs"
        Inherits="GlobalException" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form2" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadFormDecorator ID="FormDecorator" runat="server" DecoratedControls="all" />
        <telerik:RadSkinManager runat="server" ID="SkinManager" Skin="Windows7" PersistenceKey="Skin"
            PersistenceMode="ViewState" />
        <telerik:RadWindowManager ID="CommonWindowManager" runat="server" Behaviors="Resize, Maximize, Move">
            <Windows>
                <telerik:RadWindow ID="ExceptionWindow" runat="server" VisibleOnPageLoad="true">
                    <ContentTemplate>
                        <telerik:RadSplitter ResizeWithParentPane="true" ResizeWithBrowserWindow="true" ID="MainSplitter" runat="server" Orientation="Horizontal">
                            <telerik:RadPane ID="TopPane" runat="server">
                                <telerik:RadTabStrip ID="exceptionTabStrip" runat="server" SelectedIndex="0" MultiPageID="exceptionMultiPage">
                                    <Tabs>
                                        <telerik:RadTab runat="server" Text="message" Selected="True">
                                        </telerik:RadTab>
                                        <telerik:RadTab runat="server" Text="details">
                                        </telerik:RadTab>
                                    </Tabs>
                                </telerik:RadTabStrip>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </ContentTemplate>
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
        </form>
    </body>
    </html>

    I tried clean code from
    http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx
    Everything works in browser page and in RadWindow with Url on another page but not in RadWindow's <ContentTemplate>.

    !important: It is only acceptable to me to have a SINGLE page for RadWindow with controls without external url as in windowManager.open("Window.aspx", "Window");

    Thanks
  2. Answer
    Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 15 Dec 2011 Link to this post

    Hello Max,

    Try changing your RadSplitter declaration to something like this:

    <telerik:RadWindowManager ID="CommonWindowManager" runat="server" Behaviors="Resize, Maximize, Move"
            OnClientResize="ResizeRadSplitter" OnClientCommand="ResizeRadSplitter">
            <Windows>
                <telerik:RadWindow ID="ExceptionWindow" runat="server" VisibleOnPageLoad="true">
                    <ContentTemplate>
                        <telerik:RadSplitter ID="MainSplitter" runat="server" Orientation="Horizontal" Width="100%"
                            Height="100%">
                            <telerik:RadPane ID="TopPane" runat="server">
                                <telerik:RadTabStrip ID="exceptionTabStrip" runat="server" SelectedIndex="0" MultiPageID="exceptionMultiPage">
                                    <Tabs>
                                        <telerik:RadTab runat="server" Text="message" Selected="True">
                                        </telerik:RadTab>
                                        <telerik:RadTab runat="server" Text="details">
                                        </telerik:RadTab>
                                    </Tabs>
                                </telerik:RadTabStrip>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </ContentTemplate>
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
      
        <script type="text/javascript">
            function ResizeRadSplitter(sender, args) {
                var splitter = $find("<%=MainSplitter.ClientID %>");
                var container = $telerik.$(sender.get_contentElement());
                splitter.resize(container.width(), container.height());
            }
        </script>

    I handle the OnClientResize and OnClientCommand (Maximize, Restore, etc) events to resize the splitter. I set the initial height and width of the RadSplitter to occupy 100% of the space available to it.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Max
    Max avatar
    34 posts
    Member since:
    Dec 2011

    Posted 15 Dec 2011 Link to this post

    Thank you very much, Kevin.
Back to Top