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

ChildGroupHeight in percent

1 Answer 60 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Aftab
Top achievements
Rank 1
Aftab asked on 22 Jun 2010, 09:05 AM
I have four RadPanelItem in a RadPanelBar. I want to set their heights in percent that they can be resized according to the height of the Browser. I have tried with ChildGroupHeight but this does not work. My code looks like this.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestUI1.aspx.cs" Inherits="TestUI1" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!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>Untitled Page</title> 
    <style type="text/css">  
    html, body, form        
        {  
            margin: 0;  
            padding: 0;  
            height: 100%; /* this is the key! */  
            font-size: 11px;  
        }  
        #main_container  
        {  
            position: absolute;  
            left: 0;  
            top: 0;  
            padding: 0;  
            width: 100%;  
            height: 100%; /* works only if parent container is assigned a height value */  
            color: #333;  
            background-color: #83b0ec;  
            background-image: url("images/navshape.jpg");  
            background-repeat: repeat-x;  
              
        }  
        #sub_container  
        {  
            padding: 0px 10px 0px 10px;  
        }  
        #site_header  
        {  
            padding-left: 30px;  
            padding-top: 30px;  
            height: 80px;  
        }  
        .RadPanelBar_Windows7 .rpLink .rpText  
        {  
            font-weight:bold;  
            font-size:13px;  
            color:#003366;  
        }  
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" /> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" /> 
        <div id="main_container">  
            <div id="sub_container">  
                <div id="site_header">  
                    <asp:Image ID="Image1" runat="server" BorderWidth="0" ImageUrl="~/images/ClaimShare.gif" 
                        AlternateText="Claim Share" /> 
                </div> 
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">  
                        <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Skin="Windows7" Width="100%" ExpandMode="multipleexpandeditems" Height="100%">  
                            <Items> 
                                <telerik:RadPanelItem Text="Cases" Expanded="true" ImageUrl="~/images/icons/search.png" Width="100%" ChildGroupHeight="20%">  
                                    <ItemTemplate> 
                                        <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="150px" Width="100%" 
                                            EnableAutomaticLoadOnDemand="True" AutoPostBack="true" Skin="Outlook" EmptyMessage="Søg" 
                                            DataSourceID="ObjectDataSource1" ShowMoreResultsBox="true" DataTextField="CLLH_x0020_Claim_x0020_Number" 
                                            DataValueField="CLLH_x0020_Claim_x0020_Number">  
                                        </telerik:RadComboBox> 
                                    </ItemTemplate> 
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="New Cases" Expanded="true" ImageUrl="~/images/icons/new.png" Width="100%" ChildGroupHeight="30%">  
                                    <Items> 
                                        <telerik:RadPanelItem> 
                                            <ItemTemplate> 
                                                <telerik:RadGrid ID="rgNewCases" runat="server" AllowSorting="True" GridLines="None" 
                                                    DataSourceID="odsNewCases" > 
                                                    <MasterTableView AutoGenerateColumns="False" DataSourceID="odsNewCases" DataKeyNames="CLLH_x0020_Claim_x0020_Number" 
                                                        Width="100%">  
                                                        <RowIndicatorColumn> 
                                                            <HeaderStyle Width="20px"></HeaderStyle> 
                                                        </RowIndicatorColumn> 
                                                        <ExpandCollapseColumn> 
                                                            <HeaderStyle Width="20px"></HeaderStyle> 
                                                        </ExpandCollapseColumn> 
                                                        <ItemStyle VerticalAlign="top" /> 
                                                        <AlternatingItemStyle VerticalAlign="top" /> 
                                                        <Columns> 
                                                            <telerik:GridBoundColumn DataField="CLLH_x0020_Claim_x0020_Number" HeaderText="Cllh claim nr." 
                                                                HeaderStyle-Wrap="false" SortExpression="CLLH_x0020_Claim_x0020_Number" UniqueName="CLLH_x0020_Claim_x0020_Number" 
                                                                HeaderStyle-Width="30%">  
                                                            </telerik:GridBoundColumn> 
                                                            <telerik:GridBoundColumn DataField="Client" HeaderText="Client" SortExpression="Client" 
                                                                UniqueName="Client" HeaderStyle-Width="35%">  
                                                            </telerik:GridBoundColumn> 
                                                            <telerik:GridBoundColumn DataField="Insured_x0020_Name" HeaderText="Insured" SortExpression="Insured_x0020_Name" 
                                                                UniqueName="Insured_x0020_Name" HeaderStyle-Width="35%">  
                                                            </telerik:GridBoundColumn> 
                                                        </Columns> 
                                                    </MasterTableView> 
                                                    <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnablePostBackOnRowClick="true">  
                                                        <Selecting AllowRowSelect="true" /> 
                                                        <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
                                                    </ClientSettings> 
                                                </telerik:RadGrid> 
                                            </ItemTemplate> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="My followups" Expanded="true" ImageUrl="~/images/icons/followup.png" Width="100%" ChildGroupHeight="30%">  
                                    <Items> 
                                        <telerik:RadPanelItem> 
                                            <ItemTemplate> 
                                                <telerik:RadGrid ID="rgFollowUps" runat="server" AllowSorting="True" GridLines="None" 
                                                    DataSourceID="odsDSFollowups" > 
                                                    <ClientSettings EnablePostBackOnRowClick="true">  
                                                        <Selecting AllowRowSelect="true" /> 
                                                    </ClientSettings> 
                                                    <MasterTableView AutoGenerateColumns="False" DataSourceID="odsDSFollowups" DataKeyNames="CLLHClaimNumber" 
                                                        Width="100%">  
                                                        <RowIndicatorColumn> 
                                                            <HeaderStyle Width="20px"></HeaderStyle> 
                                                        </RowIndicatorColumn> 
                                                        <ExpandCollapseColumn> 
                                                            <HeaderStyle Width="20px"></HeaderStyle> 
                                                        </ExpandCollapseColumn> 
                                                        <ItemStyle VerticalAlign="top" /> 
                                                        <AlternatingItemStyle VerticalAlign="top" /> 
                                                        <Columns> 
                                                            <telerik:GridBoundColumn DataField="CLLHClaimNumber" HeaderText="Cllh claim nr." 
                                                                HeaderStyle-Wrap="false" SortExpression="CLLHClaimNumber" UniqueName="CLLHClaimNumber" 
                                                                HeaderStyle-Width="30%">  
                                                            </telerik:GridBoundColumn> 
                                                            <telerik:GridBoundColumn DataField="Client" HeaderText="Client" SortExpression="Client" 
                                                                UniqueName="Client" HeaderStyle-Width="35%">  
                                                            </telerik:GridBoundColumn> 
                                                            <telerik:GridBoundColumn DataField="InsuredName" HeaderText="Insured" SortExpression="InsuredName" 
                                                                UniqueName="InsuredName" HeaderStyle-Width="35%">  
                                                            </telerik:GridBoundColumn> 
                                                        </Columns> 
                                                    </MasterTableView> 
                                                    <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnablePostBackOnRowClick="true">  
                                                        <Selecting AllowRowSelect="true" /> 
                                                        <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
                                                    </ClientSettings> 
                                                </telerik:RadGrid> 
                                            </ItemTemplate> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelItem> 
                                <telerik:RadPanelItem Text="My opened cases" Expanded="True" ImageUrl="~/images/icons/star.png" Width="100%" ChildGroupHeight="20%">  
                                    <Items> 
                                        <telerik:RadPanelItem> 
                                            <ItemTemplate> 
                                                <telerik:RadGrid ID="rgMyOpenedCases" runat="server" AllowSorting="True" GridLines="None" 
                                                    DataSourceID="odsMyOpenCases" > 
                                                    <ClientSettings EnablePostBackOnRowClick="true">  
                                                        <Selecting AllowRowSelect="true" /> 
                                                    </ClientSettings> 
                                                    <MasterTableView AutoGenerateColumns="False" DataSourceID="odsMyOpenCases" DataKeyNames="CLLH_x0020_Claim_x0020_Number" 
                                                        Width="100%">  
                                                        <RowIndicatorColumn> 
                                                            <HeaderStyle Width="20px"></HeaderStyle> 
                                                        </RowIndicatorColumn> 
                                                        <ExpandCollapseColumn> 
                                                            <HeaderStyle Width="20px"></HeaderStyle> 
                                                        </ExpandCollapseColumn> 
                                                        <ItemStyle VerticalAlign="top" /> 
                                                        <AlternatingItemStyle VerticalAlign="top" /> 
                                                        <Columns> 
                                                            <telerik:GridBoundColumn DataField="CLLH_x0020_Claim_x0020_Number" HeaderText="Cllh claim nr." 
                                                                HeaderStyle-Wrap="false" SortExpression="CLLH_x0020_Claim_x0020_Number" UniqueName="CLLH_x0020_Claim_x0020_Number" 
                                                                HeaderStyle-Width="30%">  
                                                            </telerik:GridBoundColumn> 
                                                            <telerik:GridBoundColumn DataField="Client" HeaderText="Client" SortExpression="Client" 
                                                                UniqueName="Client" HeaderStyle-Width="35%">  
                                                            </telerik:GridBoundColumn> 
                                                            <telerik:GridBoundColumn DataField="Insured_x0020_Name" HeaderText="Insured" SortExpression="Insured_x0020_Name" 
                                                                UniqueName="Insured_x0020_Name" HeaderStyle-Width="35%">  
                                                            </telerik:GridBoundColumn> 
                                                        </Columns> 
                                                    </MasterTableView> 
                                                    <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnablePostBackOnRowClick="true">  
                                                        <Selecting AllowRowSelect="true" /> 
                                                        <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
                                                    </ClientSettings> 
                                                </telerik:RadGrid> 
                                            </ItemTemplate> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelBar> 
                </telerik:RadAjaxPanel> 
                <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetClaimsNumberList" TypeName="CLLH.TPA.WebCommon" /> 
                <asp:ObjectDataSource ID="odsNewCases" runat="server" SelectMethod="GetNewCases" TypeName="CLLH.TPA.WebCommon" /> 
                <asp:ObjectDataSource ID="odsDSFollowups" runat="server" SelectMethod="GetFollowups" TypeName="CLLH.TPA.WebCommon" /> 
                <asp:ObjectDataSource ID="odsMyOpenCases" runat="server" SelectMethod="GetMyOpenedCases" TypeName="CLLH.TPA.WebCommon" />           </div> 
        </div> 
    </form> 
</body> 
</html> 


Your quick response in this regard will be highly appreciated.

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 25 Jun 2010, 12:01 PM
Hi Aftab,

Unfortunately, in order to have element height in percent in all modern browsers, you will need to have height set on all its block containers (or pixel height on the element parent). This means that you need percent height on your #sub_container, AjaxPanel and part of the RadPanelBar elements. However, when browsers measure layout, they don't take into account paddings, margins and you'll probably end up with not very well sized elements. I've modified your markup to partially fit your requirements (though I had to remove any database components), check if it can be of any help (it won't work in IE6 or 7 though, since they measure the box layout differently).

Regards,
Kamen Bundev
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
PanelBar
Asked by
Aftab
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or