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

[Solved] RadGrid Automatic 100% Height With Master Page

5 Answers 252 Views

Ajax

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

David asked on 08 Feb 2013, 02:03 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

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

5 Answers, 1 is accepted

answered on 17 Feb 2013, 10:18 AM

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.

answered on 01 Apr 2013, 01:12 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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;

}