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

Splitter Height when using RadAjaxManager

2 Answers 46 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Jason Bourdette
Top achievements
Rank 1
Jason Bourdette asked on 14 Feb 2015, 01:28 AM
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">
            <AjaxSettings>
             <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="LatePanel"  LoadingPanelID="RadAjaxLoadingPanel1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
          </AjaxSettings>
        </telerik:RadAjaxManager>

<%@ 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.Columns.Add("EmployeeID");
        dt.Columns.Add("LastName");
        dt.Columns.Add("FirstName");
        dt.Columns.Add("Title");
        dt.Columns.Add("ReportsTo");
        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;
    }
</script>
 
<head runat="server">
    <title></title>
    <style>
        html,
        body,
        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;
        }
    </style>
 
 
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">
        </telerik:RadScriptManager>
 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
             <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="LatePanel"  LoadingPanelID="RadAjaxLoadingPanel1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
          </AjaxSettings>
        </telerik:RadAjaxManager>
 
        <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%"  >
                    right           
              </telerik:RadPane>
 
              <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"
                            AllowSorting="true">
                        <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true">
                            <Selecting AllowRowSelect="true" />
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                        </ClientSettings>
                            <MasterTableView Width="100%" TableLayout="Fixed" AutoGenerateColumns="false">
                                <Columns>
                                    <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>
                                </Columns>
                            </MasterTableView>
                            <ClientSettings>
                                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                            </ClientSettings>
                        </telerik:RadGrid>
                        <%-- <<RADGRID--%>
              </telerik:RadPane>
 
      </telerik:RadSplitter>
    </asp:Panel>
 
        <div class="footer">Footer</div>
 
    </form>
</body>
</html>

2 Answers, 1 is accepted

Sort by
0
Jason Bourdette
Top achievements
Rank 1
answered on 16 Feb 2015, 12:08 AM
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%".
0
Vessy
Telerik team
answered on 16 Feb 2015, 03:46 PM
Hi,

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>
</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.

Regards,
Vessy
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.

 
Tags
Splitter
Asked by
Jason Bourdette
Top achievements
Rank 1
Answers by
Jason Bourdette
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or