RadGrid Automatic 100% Height With Master Page

6 posts, 0 answers
  1. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 08 Feb 2013 Link to this post

    If possible please suggest how to ensure a RadGrid in a Master Page has the correct calculated height. I have fixed height content in the Master Page but this content is not accounted for when the grid is sized. Please see the following basic example to explain further:

    Master Page
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <style type="text/css">
            html, body, form
            {
                height:100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;   
            }
        </style>
        <asp:ContentPlaceHolder id="head" runat="server" />
    </head>
    <body>
        <div style="height:100px; background-color:blue;">Test Master Content</div>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
        </form>
    </body>
    </html>

    Child Page
    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
     
    </asp:Content>
     
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="Horizontal">
            <telerik:RadPane ID="RadPane1" runat="server" Width="100%" height="50px" BackColor="Red">
                <p>This is a test</p>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
            <telerik:RadPane ID="RadPane2" runat="server" Width="100%" Height="100%">
                <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="RadGrid1">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManagerProxy>
                <telerik:RadGrid ID="RadGrid1"
                    runat="server"
                    Width="100%"
                    Height="100%"
                    OnNeedDataSource="RadGrid1_NeedDataSource" />
        </telerik:RadPane>
        </telerik:RadSplitter>
    </asp:Content>

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Feb 2013 Link to this post

    Hi,

    The provided code looks correct except the RadAjaxManagerProxy control. I suggest you place the AjaxManagerProxy declaration outside the Splitter control and see if it makes any difference.

    Greetings,
    Pavlina
    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. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 17 Feb 2013 Link to this post

    Thank you for your reply. Moving the AjaxManagerProxy hasn't solved the problem. I have changed the code as follows:

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="Horizontal">
            <telerik:RadPane ID="RadPane1" runat="server" Width="100%" height="50px" BackColor="Red">
                <p>This is a test</p>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
            <telerik:RadPane ID="RadPane2" runat="server" Width="100%" Height="100%">
                <telerik:RadGrid ID="RadGrid1"
                    runat="server"
                    Width="100%"
                    Height="100%"
                    OnNeedDataSource="RadGrid1_NeedDataSource" />
        </telerik:RadPane>
        </telerik:RadSplitter>
    </asp:Content>

    The RadGrid still does not account for the height of the Master Page content. I get the same result in the latest version of FireFox, Chrome and IE.
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 20 Feb 2013 Link to this post

    Hello,

    At this point it will be best if you can isolate the problem in a sample runnable project and send it to us via support ticket. We will test it locally and will advice you further.

    Kind regards,
    Pavlina
    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. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 01 Apr 2013 Link to this post

    Hi Pavlina
    I can't send you a support ticket because my 30 day trial period has expired. To reproduce the problem please copy and paste the following basic code into a new solution. I'm evaluating Telerik for use by my team at a major US bank and while for the most part I'm very impressed with it this particular issue is extremely frustrating. If possible please add to your list of demos a working 100% width and height splitter. All of your demos use a fixed height container e.g. http://demos.telerik.com/aspnet-ajax/splitter/examples/fillcontainersize/defaultcs.aspx . I can see I'm not the first person to struggle with 100% width and height of the RadGrid and/or RadSplitter e.g.http://www.telerik.com/community/forums/aspnet-ajax/splitter/radsplitter-height-100.aspx .


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NoMaster.aspx.cs" Inherits="NoMaster" %>
    <%@ Register Src="~/UserControl/Grid.ascx" TagPrefix="test" TagName="Grid" %>
    <!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>
        <style type="text/css">
            html
            {
                overflow: hidden;   
            }
            html, body, form
            {
                height:100%;
                margin: 0px;
                padding: 0px;   
            }
        </style>
    </head>
    <body>
        <div style="height:100px; background-color:blue;">Test Content</div>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelHeight="100%" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadSplitter
                ID="RadSplitter1"
                runat="server"
                Width="100%"
                Height="100%"
                Orientation="Horizontal">
                <telerik:RadPane
                    ID="RadPane1"
                    runat="server"
                    Width="100%" 
                    height="50"
                    MaxHeight="50"
                    BackColor="Red"
                    Scrolling="None">
                    <p>This is a test</p>
                </telerik:RadPane>
                <telerik:RadSplitBar
                    ID="RadSplitBar1"
                    runat="server"
                    CollapseMode="forward" />
                <telerik:RadPane
                    ID="RadPane2"
                    runat="server"
                    Scrolling="None"
                    Width="100%"
                    Height="100%">
                    <test:Grid ID="TestGrid" runat="server" />
                </telerik:RadPane>
            </telerik:RadSplitter>
        </form>
    </body>
    </html>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using Telerik.Web.UI;
     
    public partial class NoMaster : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
    }
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Grid.ascx.cs" Inherits="UserControl_Grid" %>
    <telerik:RadGrid
        ID="RadGrid1"
        runat="server"
        Width="100%"
        Height="100%"
        AllowPaging="true"
        EnableViewState="true"
        ShowStatusBar="true"
        ShowGroupPanel="true"
        Style="border: 0; outline: none"
        AutoGenerateColumns="false"
        EnableLinqExpressions="false"
        OnNeedDataSource="RadGrid1_NeedDataSource">
        <ClientSettings
            AllowDragToGroup="true">
            <Scrolling
                AllowScroll="true"
                UseStaticHeaders="true" />
        </ClientSettings>
        <MasterTableView
            PageSize="30"
            TableLayout="Fixed"
            CommandItemDisplay="Bottom"
            AllowPaging="true">
            <Columns>
                <telerik:GridBoundColumn UniqueName="id" DataField="id" HeaderText="ID" />
                <telerik:GridBoundColumn UniqueName="ParentItem" DataField="ParentItem" HeaderText="Parent Item" />
            </Columns>
        </MasterTableView>
        <PagerStyle
            Mode="NextPrevNumericAndAdvanced"
            AlwaysVisible="true" />
    </telerik:RadGrid>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using Telerik.Web.UI;
     
    public partial class UserControl_Grid : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
     
        protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            RadGrid1.DataSource = GetDataTable();
        }
     
        public DataTable GetDataTable()
        {
            DataSet dataSet;
     
            DataTable table = new DataTable();
     
            DataColumn column;
            DataRow row;
     
            column = new DataColumn();
            column.DataType = Type.GetType("System.Int32");
            column.ColumnName = "id";
            column.ReadOnly = true;
            column.Unique = true;
     
            table.Columns.Add(column);
     
            column = new DataColumn();
            column.DataType = Type.GetType("System.String");
            column.ColumnName = "ParentItem";
            column.AutoIncrement = false;
            column.Caption = "ParentItem";
            column.ReadOnly = false;
            column.Unique = false;
     
            table.Columns.Add(column);
     
            dataSet = new DataSet();
            dataSet.Tables.Add(table);
     
            for (int i = 0; i <= 200; i++)
            {
                row = table.NewRow();
                row["id"] = i;
                row["ParentItem"] = "ParentItem " + 1;
                table.Rows.Add(row);
            }
     
            return table;
        }
    }
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 04 Apr 2013 Link to this post

    Hello,

    Did you try the suggestions from the pointed forum thread and if yes - are they useful for you?

    Regards,
    Pavlina
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017