Splitter Height when using RadAjaxManager

3 posts, 0 answers
  1. Jason Bourdette
    Jason Bourdette avatar
    78 posts
    Member since:
    Jan 2010

    Posted 13 Feb 2015 Link to this post

    I'm trying to resize a splitter using the HeightOffset="60" property. It works perfect until I add a RadAjaxManager to the page. After that the splitter no longer takes up the full screen like i want it too. This is a simple example just to demo my issue. Obviously i need to keep the radajaxmanager otherwise i would just remove it. Thanks. Any help would be great!!!

    Notice in the code below it does not size correctly, but if i remove  the radajaxmanager block it works perfect.
             <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                 <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <telerik:AjaxUpdatedControl ControlID="LatePanel"  LoadingPanelID="RadAjaxLoadingPanel1"/>

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <!DOCTYPE html>
    <script runat="server">
        protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
            DataTable dt = new DataTable();
            dt.Rows.Add(new object[] { 1, "Davalio", "Nancy", "Sales Representative", 2 });
            dt.Rows.Add(new object[] { 2, "Fuller", "Andrew", "Vice President, Sales", null });
            dt.Rows.Add(new object[] { 3, "Leverling", "Janet", "Sales Representative", 2 });
            dt.Rows.Add(new object[] { 4, "Peacock", "Margaret", "Sales Representative", 2 });
            (sender as RadGrid).DataSource = dt;
    <head runat="server">
            form {
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
            .header {
                width: 100%;
                height: 20px;
                background: blue;
                color: white;
            .menu {
                width: 100%;
                height: 20px;
                background: black;
                color: white;
            .footer {
                height: 20px;
                width: 100%;
                background: blue;
                color: white;
                position: absolute;
                bottom: 0;
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                 <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <telerik:AjaxUpdatedControl ControlID="LatePanel"  LoadingPanelID="RadAjaxLoadingPanel1"/>
            <div class="header">Header</div>
            <div class="menu">Menu</div>
          <asp:Panel ID="LatePanel" runat="server" Height="100%" Width="100%" >
          <telerik:RadSplitter runat="server" id="InnerSplitter" Orientation="Vertical" VisibleDuringInit="false" Width="100%" Height="100%" HeightOffset="60">
                  <telerik:RadPane ID="LeftMenuPane" runat="server" Scrolling="None" BackColor="SteelBlue" Width="27%"  >
                  <telerik:RadSplitBar runat="server" id="RadSplitBar4" />
                  <telerik:RadPane ID="RightMenuPane" runat="server" Scrolling="None" BackColor="Tomato" >      
                               <%-- >>RADGRID--%>
                            <telerik:RadGrid ID="RadGrid1" Height="100%" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"
                            <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true">
                                <Selecting AllowRowSelect="true" />
                                <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                                <MasterTableView Width="100%" TableLayout="Fixed" AutoGenerateColumns="false">
                                        <telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="LastName" HeaderText="LastName"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="Title" HeaderText="Title"></telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="ReportsTo" HeaderText="ReportsTo"></telerik:GridBoundColumn>
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                            <%-- <<RADGRID--%>
            <div class="footer">Footer</div>

  2. Jason Bourdette
    Jason Bourdette avatar
    78 posts
    Member since:
    Jan 2010

    Posted 15 Feb 2015 Link to this post

    i think i basically figured this out. I have to set UpdatePanelHeight="100%" in the RadAjaxManager.

    It is not perfect but it should be ok. there is still this 60px of whitespace at the bottom which cause the side scrollbars to show.

    What i think i need is something like the HeightOffset="60" but for the RadAjaxManager to go along with the UpdatePanelHeight="100%".
  3. Vessy
    Vessy avatar
    1871 posts

    Posted 16 Feb 2015 Link to this post


    The experienced behavior is caused by the way the Splitter and its parents height is configured. The reason for the problem is that you are configuring the Panel to take 100% of its parent, while the Panel itself has other sibling elements which height is not substracted from the 100% height taken of the Panel. For example if you have the following structure:
    <div id='divA' style='height: 300px'>
        <div id='divB' style='height: 50px'></div>
        <div id='divC' style='height: 100%'></div>
    divB will be rendered with height of 50px, divC will take 100% of its parent = 300px, which will make divA to be rendered with height of 350px in order to show all of its children. This is a general HTML configuration specific and you will experience the same behavior if you replace the Splitter and the Panel with simple divs with height: 100%.

    In order to workaround this limitation we have implemented the HeightOffset property so you can predefine the height that has to be substracted of the Splitter's parent 100% height.
    As the Panel does not provide such property, though, I would suggest you
    • either to remove it from your configuration and update the Splitter directly, configuring its HeightOffset to substract the height of the header/footer divs
    • or to add one additional Splitter replacing the header/footer divs with RadPanes. In this way the Splitter will handle the size calculation on itself and no HeightOffset will be needed.

    I am attaching a sample page implementing the second approach so you can examine it on your side. Hope this helps.


    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.

Back to Top