Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadGrid Automatic 100% Height With Master Page

5 Answers 175 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
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">
 
<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

Sort by
0
Pavlina
Telerik team
answered on 13 Feb 2013, 09:27 PM
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.
0
David
Top achievements
Rank 1
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.
0
Pavlina
Telerik team
answered on 20 Feb 2013, 05:39 PM
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.
0
David
Top achievements
Rank 1
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">
 
<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;
    }
}
0
Pavlina
Telerik team
answered on 04 Apr 2013, 02:29 PM
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.
Tags
Ajax
Asked by
David
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
David
Top achievements
Rank 1
Share this question
or