Splitter height to fit content

9 posts, 1 answers
  1. asimptota
    asimptota avatar
    50 posts
    Member since:
    Apr 2011

    Posted 23 Aug 2012 Link to this post

    I am using RadSplitter on my master page for layout. My layout is similar to layout in THIS demo. Thea only difference is that I have one extra pane at the bottom for footer. So, my master page layout would be something like this:
    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head runat="server">
        <title>FullWindow</title>
        <style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
        </style>
         <asp:ContentPlaceHolder ID="HeadContent" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form2" runat="server">
            <asp:ScriptManager ID="ScriptManager" runat="server" />
            <div id="ParentDivElement" style="height: 100%;">
                <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
                    Orientation="Horizontal" Skin="Outlook">
                    <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"
                        Scrolling="none">
                        <!-- Place the content of the pane here -->
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
                        <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" LiveResize="true">
                            <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">
                                <!-- Place the content of the pane here -->
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />
                            <telerik:RadPane ID="ContentPane" runat="server">
                                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                            </telerik:RadPane>
                                        <telerik:RadPane ID="FooterPane" CssClass="footer" Height="35px" runat="server">
                                           My footer © 2012. All rights reserved.
                                      </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </div>
        </form>
    </body>
    </html>


    I want NestedSplitter to resize according to ContentPane height, with no vertical scroll bar within ContentPane. I've also found THIS article describing how to accomplish that but I keep getting some JavaScript error: "undefined" is null or not an object. Could you please help me?

  2. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 27 Aug 2012 Link to this post

    Hi Jasmin,

    The approach you have to follow is almost the same as the one in the KB article you have already found. The only difference is that you are using nested splitters, so you do not have to resize the height of the inner splitter (ID="NestedSplitter") but of its containing pane ( ID="MainPane").

    This is done because by design when a Splitter is nested in another one it calculates its size depending on its parent pane's size. You could find more information about this behavior in this live demo and this help article.

    Regards,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. asimptota
    asimptota avatar
    50 posts
    Member since:
    Apr 2011

    Posted 27 Aug 2012 Link to this post

    Thank you for your reply.
    But I still haven't solved my problem. I have done as you said and used this JavaScript for resizing:
    <script type="text/javascript"
       function SplitterLoaded(splitter, arg) 
       
           var pane = splitter.getPaneById('<%= MainPane.ClientID %>'); 
           var height = pane.getContentElement().scrollHeight; 
           splitter.set_height(height); 
           pane.set_height(height); 
       
       </script>

    and called it on this client event:
    <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
                Orientation="Horizontal" Skin="Default" OnClientLoaded="SplitterLoaded">
     but I still get that error: 'undefined is null or not an object'.
    Could you please post some code snippet so I could see how should I correctly use this JavaScript and on which splitter?
    Thank You
  5. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 30 Aug 2012 Link to this post

    Hi Jasmin,

    For your convenience I prepared a sample project demonstrating the described approach. There are some additional lines in the JavaScript (used in the previously mentioned KB) which have to be added because of the nested splitter in the setup.

    Please, give it a try and tell me how it goes.

    Greetings,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. asimptota
    asimptota avatar
    50 posts
    Member since:
    Apr 2011

    Posted 30 Aug 2012 Link to this post

    Thank you so much. It works. But, it only works after full page postback. My scenario is that I have an ajaxified hierarchy grid in my content page (which is placed inside ContentPane of the splitter as you could see on my code snippet I've provided). I want to resize the NestedSplitter when I expand a row in my hierarchy grid. Help?
  7. Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 30 Aug 2012 Link to this post

    Hi Jasmin,

    I tried to reproduce the described issue but to no avail. I tested the previously sent project with a RadGrid in the ContentPane (using a simple data) and a button, adding some static value to the data source I am using.

    I am sending you this test project, so you could see how the splitter is being resized depending on the lines in the grid. Please, examine it and tell me how does it differs from the Splitter's behavior on your side?

    Furthermore, there are some specifics when trying to ajaxify a RadSplitter - you could find more information in this help article: AJAX updates.

    If non of the above is the case, could you please provide a sample fully runnable project, so we could examine it further?

    Regards,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. asimptota
    asimptota avatar
    50 posts
    Member since:
    Apr 2011

    Posted 31 Aug 2012 Link to this post

    I wasn't able to upload .zip solutions so here are code snippets:

    Site.Master
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Splitter.SiteMaster" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head runat="server">
        <title></title>
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
        <asp:ContentPlaceHolder ID="HeadContent" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                        </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            function SplitterLoaded(splitter, arg) {
                var pane = splitter.getPaneById("<%= ContentPane.ClientID %>");
                var height = pane.getContentElement().scrollHeight;
                var parentPane = $find("<%= MainPane.ClientID %>"); //$find("MainPane"); //$find(splitter._parentPaneId);
                parentPane.resize(height - parentPane.get_height(), 1);
                splitter._windowResizeHandler();
     
     
     
                //Original
                //          $find(splitter._parentPaneId).resize(height - $find(splitter._parentPaneId).get_height(), 1);
                //          $find(splitter._parentPaneId).get_splitter()._windowResizeHandler();
            }
     
            function SplitterLoaded_(splitter, arg) {
     
                var pane = splitter.getPaneById("<%= ContentPane.ClientID %>");
                var height = pane.getContentElement().scrollHeight;
                var parentPane = find("<%= MainPane.ClientID %>"); //get the pane containing the nested splitter
                var delta = height - parentPane.get_height();
                parentPane.resize(delta, 1);
                parentPane.get_splitter()._windowResizeHandler();
     
                //          splitter.set_height(splitter.get_height() - pane.get_height() + height);      
                //          pane.set_height(height);    
            
                </script>
     
        <div id="ParentDivElement" style="height: 100%;">
            <telerik:RadSplitter ID="MainSplitter" runat="server" Width="100%" Height="100%" Orientation="Horizontal"
                Skin="Outlook">
                <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"
                    Scrolling="none">
                    <!-- Place the content of the pane here -->
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
                <telerik:RadPane ID="MainPane" runat="server" MinWidth="500" Scrolling="None">
                    <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" LiveResize="true"
                        OnClientLoaded="SplitterLoaded">
                        <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">
                        </telerik:RadPane>
                        <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />
                        <telerik:RadPane ID="ContentPane" runat="server" Scrolling="None">
                            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                        </telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadsplitbarFooter" runat="server" CollapseMode="Forward" />
                <telerik:RadPane ID="FooterPane" Height="35px" runat="server">
                    My footer © 2012. All rights reserved.
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        </form>
    </body>
    </html>


    Site.Master.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace Splitter
    {
        public partial class SiteMaster : System.Web.UI.MasterPage
        {
            protected void Page_Load(object sender, EventArgs e)
            {
     
            }
        }
    }


    Default.aspx

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeBehind="Default.aspx.cs" Inherits="Splitter._Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadajaxLoadingPanel1" Skin="Default"/>
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadajaxLoadingPanel1"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="CustomersDS"
            AllowPaging="True">
    <ClientSettings>
    <Selecting AllowRowSelect="True"></Selecting>
    </ClientSettings>
     
    <MasterTableView DataSourceID="CustomersDS" Name="Master" DataKeyNames="CustomerID" ClientDataKeyNames="CustomerID">
        <DetailTables>
            <telerik:GridTableView DataKeyNames="OrderID" ClientDataKeyNames="OrderID" DataSourceID="OrdersDS" Width="100%"
                        runat="server">
            </telerik:GridTableView>
        </DetailTables>
     
    </MasterTableView>
     
    <FilterMenu EnableImageSprites="False"></FilterMenu>
        </telerik:RadGrid>
         
        <asp:EntityDataSource ID="CustomersDS" runat="server"
            ConnectionString="name=NWEntities" DefaultContainerName="NWEntities"
            EnableFlattening="False" EntitySetName="Customers"
            Select="it.[CustomerID], it.[CompanyName], it.[ContactName], it.[ContactTitle], it.[Address], it.[City], it.[Country]"
            OrderBy="it.CustomerID">
        </asp:EntityDataSource>
        <asp:EntityDataSource ID="OrdersDS" runat="server"
            ConnectionString="name=NWEntities" DefaultContainerName="NWEntities"
            EnableFlattening="False" EntitySetName="Orders"
            Select="it.[OrderID], it.[CustomerID], it.[OrderDate], it.[RequiredDate], it.[ShippedDate], it.[ShipVia], it.[ShipCity]"
            OrderBy="it.OrderID">
        </asp:EntityDataSource>
    </asp:Content>


    Default.aspx.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace Splitter
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
     
            }
        }
    }

    If I don't ajaxify RadGrid1 (comment RadAjaxManager on Default.aspx) splitter expands correctly. I want splitter on master page to expand along with ajaxified RadGrid on content page. Hope you could help me.
  9. Answer
    Vessy
    Admin
    Vessy avatar
    1388 posts

    Posted 03 Sep 2012 Link to this post

    Hi Jasmin,

    This is the expected behavior of the page since you only the grid is being ajaxified. In order to make the nested splitter expand depending on the ajaxified grid you should make the following changes:

    1. Exchange the RadScriptManager in the Site.master with a ScriptManager:
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    2. Modify the SplitterLoaded() function in Site.master:
    <script type="text/javascript">
        function SplitterLoaded() {
            var splitter = $find("<%=NestedSplitter.ClientID %>");
            var pane = splitter.getPaneById("<%= ContentPane.ClientID %>");
            var height = pane.getContentElement().scrollHeight;
            var parentPane = $find("<%= MainPane.ClientID %>");
            parentPane.resize(height - parentPane.get_height(), 1);
            splitter._windowResizeHandler();
        }
    </script>

    3. Add the logic which is calling the SplitterLoaded() function on every PostBack of the grid (in Default.asp.cs):
    public void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack && Request.Params["__EVENTTARGET"] != null && Request.Params["__EVENTTARGET"].ToString().Contains(RadGrid1.UniqueID)) //check if RadGrid or its child controls have triggered the PostBack
        {
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "KEY", "Sys.Application.add_load(function(){SplitterLoaded();})", true);
        }
     
    }

    For your convenience I have attached the modified project.

    All the best,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. asimptota
    asimptota avatar
    50 posts
    Member since:
    Apr 2011

    Posted 04 Sep 2012 Link to this post

    Now we're talkin'! :) It works.Thank you!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017