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

RadGrid 100% height in Templated UserControl (Chrome)

1 Answer 63 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tobias
Top achievements
Rank 1
Tobias asked on 27 May 2010, 03:41 AM
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 
    { 
        getreturn 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

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 May 2010, 11:22 AM
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.
Tags
Grid
Asked by
Tobias
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or