RadGrid 100% height in Templated UserControl (Chrome)

[Tobias]

First off: Hello! this my first post here, and I have an annoying issue that arises with google chrome.

here's a screenshot: http://img208.imageshack.us/img208/448/gridproblem.png

I started out using the Web Mail demo from this site for the layout. It worked nicely. Then I decided I would to like to put some common layouts and functionality into a templated usercontrol.

I put a radsplitter, 2 panes, and 2 placeholders in the usercontrol markup. I created a page with the usercontrol on it; within one of its templates I put a radgrid. Everything worked well with IE/FireFox, but the grid got squished in chrome. After searching these forums I found some javascripts which may be outdated, but I implemented them anways and the grid actually resized in chrome onload but gets squished the moment I start resizing the window.

Here's the code

usercontrol asxc

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PanelView.ascx.cs" Inherits="PanelView" ClassName="PanelView" %>
<%@ Register Src="HeaderBar.ascx" TagName="HeaderBar" TagPrefix="emesh" %>
<telerik:RadScriptBlock ID="rsbChrome" runat="server" Visible="false">
    <script type="text/javascript">
            function Resize() {
                setTimeout(function () {

                    var scrollArea = null;

                    for (var i = 0; i < radGrids.length; i++) {

                        var scrollArea = document.getElementById(radGrids[i] + "_GridData");
                        if (scrollArea) {
                            scrollArea.style.height = document.body.offsetHeight + "px";
                        }
                        if (window[radGrids[i]].ClientSettings.Scrolling.UseStaticHeaders) {
                            var header = document.getElementById(radGrids[i] + "_GridHeader");
                            scrollArea.style.height = document.body.offsetHeight - header.offsetHeight + "px";
                        }
                    }

                }, 200);
            }
            windowwindow.onresize = window.onload = Resize;
    </script>
</telerik:RadScriptBlock>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal">
    <telerik:RadPane ID="LeftPane" runat="server" Scrolling="None">
        <emesh:HeaderBar runat="server" ID="LeftPaneCaption" />
        <asp:PlaceHolder runat="server" ID="LeftPaneContent" />
    </telerik:RadPane>
    <telerik:RadSplitBar ID="RadSplitBar1" runat="server">
    </telerik:RadSplitBar>
    <telerik:RadPane ID="RightPane" runat="server" Scrolling="None">
        <emesh:HeaderBar runat="server" ID="RightPaneCaption" />
        <asp:PlaceHolder runat="server" ID="RightPaneContent" />
    </telerik:RadPane>
</telerik:RadSplitter>

usercontrol codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.ComponentModel;
using System.Web.Script.Serialization;

public partial class PanelView : System.Web.UI.UserControl
{
    #region ContentTemplate Code

    private ITemplate leftContentTemplate = null;
    private ITemplate rightContentTemplate = null;

    public class ContentContainer : WebControl, INamingContainer { }

    [TemplateContainer(typeof(ContentContainer))]
    [PersistenceMode(PersistenceMode.InnerProperty)]
    [TemplateInstance(TemplateInstance.Single)]
    [Browsable(true)]
    [Category("Behavior")]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
    public ITemplate LeftPaneContentTemplate
    {
        get { return leftContentTemplate; }
        set { leftContentTemplate = value; }
    }

    [TemplateContainer(typeof(ContentContainer))]
    [PersistenceMode(PersistenceMode.InnerProperty)]
    [TemplateInstance(TemplateInstance.Single)]
    [Browsable(true)]
    [Category("Behavior")]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
    public ITemplate RightPaneContentTemplate
    {
        get { return rightContentTemplate; }
        set { rightContentTemplate = value; }
    }

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        if (LeftPaneContentTemplate != null)
        {
            // Instantiate and initialize the content container class
            ContentContainer containerLeft = new ContentContainer();
            LeftPaneContentTemplate.InstantiateIn(containerLeft);

            // Add the content template to the placeholder so that we can see the user content
            LeftPaneContent.Controls.Add(containerLeft);
        }
        else
        {
            LeftPaneVisible = false;
        }

        if (RightPaneContentTemplate != null)
        {
            // Instantiate and initialize the content container class
            ContentContainer containerRight = new ContentContainer();
            RightPaneContentTemplate.InstantiateIn(containerRight);

            // Add the content template to the placeholder so that we can see the user content
            RightPaneContent.Controls.Add(containerRight);
        }
        else
        {
            RightPaneVisible = false;
        }
    }

    #endregion

    #region Properties

    public bool LeftPaneVisible
    {
        get{ return LeftPane.Visible; }
        set{ LeftPane.Visible = value;}
    }
    public bool RightPaneVisible
    {
        get { return RightPane.Visible; }
        set { RightPane.Visible = value; }
    }

    public string LeftPaneTitle
    {
        get { return LeftPaneCaption.Text; }
        set { LeftPaneCaption.Text = value; }
    }
    public string RightPaneTitle
    {
        get { return RightPaneCaption.Text; }
        set { RightPaneCaption.Text = value; }
    }

    public Orientation CurrentOrientation
    {
        get { return RadSplitter1.Orientation; }
        set { RadSplitter1.Orientation = value; }
    }

    public bool ChromeCompatibilityMode
    {
        get;
        set;
    }

    #endregion

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);

        if (!LeftPaneVisible || !RightPaneVisible)
        {
            RadSplitBar1.Visible = false;
        }

        if (ChromeCompatibilityMode)
        {
            rsbChrome.Visible = true;

            List<string> IDs = new List<string>();

            FillWithGridIDs(IDs, Page.Controls);

            JavaScriptSerializer js = new JavaScriptSerializer();

            ScriptManager.RegisterArrayDeclaration(Page, "radGrids", js.Serialize(IDs));
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    private void FillWithGridIDs(List<string> gridIDs, ControlCollection controls)
    {
        foreach (Control ctrl in controls)
        {
            if (ctrl is RadGrid)
            {
                gridIDs.Add(ctrl.ClientID);
            }

            FillWithGridIDs(gridIDs, ctrl.Controls);
        }
    }
}

aspx:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/EMeshMaster.master" AutoEventWireup="true" CodeFile="Roles.aspx.cs" Inherits="Roles" %>

<%@ Register src="UserControls/HeaderBar.ascx" tagname="HeaderBar" tagprefix="uc1" %>
<%@ Register src="UserControls/PanelView.ascx" tagname="PanelView" tagprefix="emesh" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cphContent" Runat="Server">

    <asp:ObjectDataSource ID="dsRoles" runat="server" TypeName="DbHelpers" SelectMethod="GetRoles"></asp:ObjectDataSource>

    <emesh:PanelView runat="server" ChromeCompatibilityMode="true">
        <LeftPaneContentTemplate>
            <telerik:RadToolBar ID="tlbRoles" runat="server" Width="100%" onbuttonclick="tlbRoles_ButtonClick">
                <Items>
                    <telerik:RadToolBarButton Value="tbWrapper">
                        <ItemTemplate>
                            <table cellpadding="2" cellspacing="0">
                                <tr>
                                    <td>
                                        <span>New Role</span>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox runat="server" ID="tbRole">
                                        </telerik:RadTextBox>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Text="Create" Value="new"></telerik:RadToolBarButton>
                    <telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton>
                    <telerik:RadToolBarButton Text="Delete Role" Value="delete"></telerik:RadToolBarButton>
                </Items>
            </telerik:RadToolBar>

            <telerik:RadGrid ID="existingRoles" runat="server"  AllowSorting="True" AutoGenerateColumns="False" GridLines="None" Height="100%" Width="100%" DataSourceID="dsRoles" ShowHeader="True">
                <ClientSettings>
                    <Selecting AllowRowSelect="True" />
                    <Scrolling AllowScroll="True"  />
                </ClientSettings>

                <MasterTableView>
                    <RowIndicatorColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn HeaderText="Roles" UniqueName="RoleName" DataField="RoleName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderText="Users in Role" UniqueName="UsersInRole" DataField="UsersInRole">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>

        </LeftPaneContentTemplate>
    </emesh:PanelView>
</asp:Content>

By the way: if I take the contents of the LeftPaneContentTemplate and just slap that into the aspx markup then the problem disappears, but then I can't use templated usercontrols. I do not use ajax or any updatepanels for this app (yet). As of this moment I will start moving the functionality from this usercontrol into a masterpage instead. Maybe I will have better luck there.

Any ideas ?

Edit: RadControls Version: v.2010.1.415.40

[Dimo]

Hello Tobias,

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx

In addition to generated update panels, you should also check for other parent elements of RadGrid that have no height specified.

The percentage height rule is applied recursively upwards in the DOM tree until an element with a pixel height is reached or until the <html> element is reached. Here is one more demo:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx

Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.