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

Splitter height to fit content

8 Answers 250 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
asimptota
Top achievements
Rank 1
asimptota asked on 23 Aug 2012, 01:55 PM
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?

8 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 27 Aug 2012, 01:00 PM
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.
0
asimptota
Top achievements
Rank 1
answered on 27 Aug 2012, 01:30 PM
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
0
Vessy
Telerik team
answered on 30 Aug 2012, 09:28 AM
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.
0
asimptota
Top achievements
Rank 1
answered on 30 Aug 2012, 10:41 AM
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?
0
Vessy
Telerik team
answered on 30 Aug 2012, 03:35 PM
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.
0
asimptota
Top achievements
Rank 1
answered on 31 Aug 2012, 11:08 AM
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.
0
Accepted
Vessy
Telerik team
answered on 03 Sep 2012, 03:44 PM
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.
0
asimptota
Top achievements
Rank 1
answered on 04 Sep 2012, 07:26 AM
Now we're talkin'! :) It works.Thank you!
Tags
Splitter
Asked by
asimptota
Top achievements
Rank 1
Answers by
Vessy
Telerik team
asimptota
Top achievements
Rank 1
Share this question
or