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

Problems using RadGrid inside RadSplitter

4 Answers 416 Views

Grid

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

reinberger asked on 18 Feb 2009, 08:31 AM

Hi,

in my project, I changed my implementation from scrolling a grid inside a radpane to a non-scrolling radpane with a scrolling grid with static headers. Unfortunately, this leads to some problems. I've attached an aspx page for reproduction purposes.

Problems are:
1) using sender.getInnerHeight() where sender is the pane just resized, returns an incorrect value. This leads to the problem, that vertical scrollbar bottom end vanishes below the browser window border. This also leads to the problem that horizontal scrollbars vanish below the bottom browser window border (only IE7, because FF3 doesn't even show horizontal scrollbars).
2) I can't get horizontal scrollbars to become visible in FF3 - although in IE7 they exist.
3) right above the horizontal scrollbar, there is a ugly grey rectangle visible inFF3 that matches the height of the grid header. Of course, I'd like to get rid of this rectangle.
4) the grid tries to horizontally 'squash' itself in FF3 - I can't find any reason therefore. The grid in my project contains more rows than a 1280x1024 screen is able to display - so I'd like to have horizontal scrolling enabled without that squashing effect.

Here's the sample aspx page:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="scrollbartest3.aspx.cs" Inherits="InteractionToolkit_Custom_scrollbartest3" %> 
        
            <!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" style="height: 100%;"> 
        
            <head runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body style="margin: 0px; height: 100%; overflow: hidden;" class="pane" scroll="no"> 
        
                <form id="form1" runat="server" style="height: 100%; margin: 0px;"> 
        
                <script type="text/javascript"> 
        
                function RadPane2_ClientResized(sender, eventArgs) { 
        
                                var oGrid = $find("<%= RadGrid1.ClientID %>"); 
        
                                var gridHeader = $get("<%= RadGrid1.ClientID %>" + "_GridHeader"); 
        
                                var gridData = $get("<%= RadGrid1.ClientID %>" + "_GridData"); 
        
                                var scrollX = sender.getInnerWidth(); 
        
                                var scrollY = sender.getInnerHeight(); 
        
                                //gridData.style.width = scrollX + "px"; 
        
                                gridData.style.height = (scrollY - gridHeader.offsetHeight) + "px"; 
        
                } 
        
            </script> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="true" 
        
                    OutputCompression="Disabled" AsyncPostBackTimeout="360" ScriptMode="Release"> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" 
        
                    EnableViewState="False" EnableEmbeddedSkins="true" /> 
        
                <asp:HiddenField ID="controlfocus" runat="server" /> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" 
        
                    EnableViewState="False" 
        
                    EnablePageHeadUpdate="False"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="Button1"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadSplitter ID="MainSplitter" runat="server" Orientation="Horizontal" Height="100%" 
        
                    VisibleDuringInit="False" Width="100%" FullScreenMode="true" BorderSize="0"> 
        
                    <telerik:RadPane ID="RadPaneTop" runat="server" Height="35px" MaxHeight="35" EnableViewState="false" 
        
                        CssClass="menuPaneTop" Scrolling="None" Locked="True"> 
        
                        <div style="float: left; width: 214px;"> 
        
                            <asp:Image ImageUrl="~/InteractionToolkit/Custom/RenderLogo.aspx" ID="imgLogo" runat="server" 
        
                                AlternateText="Logo" /> 
        
                        </div> 
        
                        <telerik:RadMenu ID="RadMenu1" runat="server" Style="z-index: 2900;"> 
        
                            <Items> 
        
                                <telerik:RadMenuItem Text="Start" Value="start" NavigateUrl="Custom/default.aspx"> 
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Suche" Value="search"> 
        
                                    <Items> 
        
                                        <telerik:RadMenuItem Text="Volltextsuche" Value="fulltextsearch" NavigateUrl="Custom/PIU_DecisionMaker_CBUSERIT.aspx"> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem Text="Einzelsuche" Value="directsearch" NavigateUrl="Custom/default2.aspx"> 
        
                                        </telerik:RadMenuItem> 
        
                                    </Items> 
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Vorlagenverwaltung" Value="templateadminstration" NavigateUrl="Custom/DynamicFilters/expertensuche.aspx"> 
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Einstellungen" Value="settings"> 
        
                                    <Items> 
        
                                        <telerik:RadMenuItem Text="Benutzerdaten" Value="usermanagement" NavigateUrl="Custom/usermanagement.aspx"> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem Text="Downloads" Value="downloads" NavigateUrl="Custom/mydownloads.aspx"> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem Text="Kennwort ändern" Value="changePwd"> 
        
                                        </telerik:RadMenuItem> 
        
                                    </Items> 
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Hilfe" Value="help"> 
        
                                    <Items> 
        
                                        <telerik:RadMenuItem Text="Supportanfrage" Value="support"> 
        
                                        </telerik:RadMenuItem> 
        
                                        <telerik:RadMenuItem Text="Hilfethemen" Value="helptopics"> 
        
                                        </telerik:RadMenuItem> 
        
                                    </Items> 
        
                                </telerik:RadMenuItem> 
        
                                <telerik:RadMenuItem Text="Abmelden" Value="logout" PostBack="true"> 
        
                                </telerik:RadMenuItem> 
        
                            </Items> 
        
                        </telerik:RadMenu> 
        
                        <div style="float: right;"> 
        
                            <div> 
        
                                <asp:Label ID="lbUser" runat="server" Text="Username" EnableViewState="False"></asp:Label> 
        
                            </div> 
        
                            <div> 
        
                                <asp:Label ID="lblCA" runat="server" Text="CorporateAccount" EnableViewState="False"></asp:Label> 
        
                            </div> 
        
                        </div> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadPane ID="RadMiddle" runat="server" Scrolling="None"> 
        
                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" VisibleDuringInit="false" 
        
                            Width="100%" LiveResize="false"> 
        
                            <telerik:RadPane ID="RadPaneBottom" runat="server" Scrolling="None"> 
        
                                <telerik:RadSplitter ID="RadSplitter2" runat="server" Width="100%" Height="100%" 
        
                                    Orientation="Horizontal"> 
        
                                    <telerik:RadPane ID="RadPane1" runat="server" Width="100%" Height="50%"> 
        
                                        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> 
        
                                    </telerik:RadPane> 
        
                                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> 
        
                                    <telerik:RadPane ID="RadPane2" runat="server" Scrolling="None" OnClientResized="RadPane2_ClientResized"> 
        
                                        <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" Width="100%"> 
        
                                            <HeaderContextMenu> 
        
                                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                            </HeaderContextMenu> 
        
                                            <MasterTableView AutoGenerateColumns="True"> 
        
                                            </MasterTableView> 
        
                                            <ClientSettings> 
        
                                                <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="300px" /> 
        
                                            </ClientSettings> 
        
                                            <FilterMenu> 
        
                                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                            </FilterMenu> 
        
                                        </telerik:RadGrid> 
        
                                    </telerik:RadPane> 
        
                                </telerik:RadSplitter> 
        
                            </telerik:RadPane> 
        
                        </telerik:RadSplitter> 
        
                    </telerik:RadPane> 
        
                </telerik:RadSplitter> 
        
                <telerik:RadWindow ID="RadWindowChangePassword" runat="server" Title="Content5 ContactBase - change password" 
        
                    EnableViewState="false" NavigateUrl="ChangePassword.aspx" Modal="true" ShowContentDuringLoad="false" 
        
                    VisibleStatusbar="false" Behaviors="Close, Reload" Width="800px" Height="440px"> 
        
                </telerik:RadWindow> 
        
                </form> 
        
            </body> 
        
            </html>

Here's the code-behind:

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Linq; 
        
            using System.Web; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using System.Data; 
        
            public partial class InteractionToolkit_Custom_scrollbartest3 : System.Web.UI.Page 
        
            { 
        
                int colCount = 20; 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    RadGrid1.DataSource = CreateTableStructure(); 
        
                    RadGrid1.DataBind(); 
        
                } 
        
                protected void Button1_Click(object sender, EventArgs e) 
        
                { 
        
                    DataTable dt = CreateTableStructure(); 
        
                    for (int r = 0; r < 100; r++) 
        
                    { 
        
                        DataRow newRow = dt.NewRow(); 
        
                        for (int i = 0; i < colCount; i++) 
        
                        { 
        
                            newRow[i] = "row " + r + ", col " + i; 
        
                        } 
        
                        dt.Rows.Add(newRow); 
        
                    } 
        
                    RadGrid1.DataSource = dt; 
        
                    RadGrid1.DataBind(); 
        
                } 
        
                private DataTable CreateTableStructure() 
        
                { 
        
                    DataTable dt = new DataTable("data"); 
        
                    int colCount = 20; 
        
                    for (int i = 0; i < colCount; i++) 
        
                    { 
        
                        dt.Columns.Add("col" + i, typeof(string)); 
        
                    } 
        
                    return dt; 
        
                } 
        
            }

Would be great if somebody could point out my mistake.

Best regards
Thomas

4 Answers, 1 is accepted

answered on 20 Feb 2009, 04:51 PM

Hi Thomas,

Thanks for the sample page. Here are some guidelines on your issues:

I can see that you are trying to control the RadGrid header and data area dimensions, which you should not do - the RadGrid control takes care of its dimensions absolutely automatically, when it is placed inside a RadSplitter pane. You should simply set Height="100%" to RadGrid and remove the ScrollHeight property (Height and ScrollHeight should not be set at the same time).

When RadGrid is not placed inside a splitter pane, it can readjust its vertical dimensions when its parent changes size by calling the repaint() method to the RadGrid client object.

As for the missing horizontal scrollbars and small column widths in Firefox - there have been some limitations with this regard, which will be removed in Q1 2009. Please upgrade (you can also test with the Q1 2009 beta release, which is now available).

Next, since RadGrid is ajaxified, it is wrapped inside an update panel, which is a <div> element with no styles. The CSS specification says that an element with a percentage height must have a parent element with its height set explicitly. Since the update panel has no height, RadGrid will not expand vertically. If RadGrid is not ajaxified, it will expand as expected, because its direct parent (the splitter pane) always has a height set explicitly with Javascript. In order to fix this vertical expansion problem when RadGrid is ajaxified, you need to add a height style to the update panel. Unfortunately update panels do not offer any means to control their height. You can set a height with CSS, however, you will need the client ID of the update panel. Here is an example, which demonstrates how to obtain the client ID of an update panel and set a 100% height style with CSS:

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

Finally, the Firefox top-right corner problem. Unfortunately, this is caused by a browser behavior, which prevents us from adding a suitable background image, as in other browsers:

http://blogs.telerik.com/dimodimov/posts/08-07-23/Browser_Inconsistencies_with_Scrolling_and_Padding.aspx

However, you can create a custom background image, which resembles the header background and set it as a background to the RadGrid wrapper <div>. We have not done that because this is not a universal solution, that will work well in all scenarios. A universal solution exists, but needs changes in the RadGrid rendering and implies complications in the client scripting. That's why we refrain from implementing it for now.

Let us know if you need more information.

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 26 Sep 2014, 11:05 AM

Hi,
[quote]
Next, since RadGrid is ajaxified, it is wrapped inside an update panel, which is a <div> element with no styles. The CSS specification says that an element with a percentage height must have a parent element with its height set explicitly. Since the update panel has no height, RadGrid will not expand vertically. If RadGrid is not ajaxified, it will expand as expected, because its direct parent (the splitter pane) always has a height set explicitly with Javascript. In order to fix this vertical expansion problem when RadGrid is ajaxified, you need to add a height style to the update panel. Unfortunately update panels do not offer any means to control their height. You can set a height with CSS, however, you will need the client ID of the update panel. Here is an example, which demonstrates how to obtain the client ID of an update panel and set a 100% height style with CSS:

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

Firts, thanks for great explanation how RadGrid is rendered inside RadSplitter. I'm dealing with almost same scenario so this was very useful. My page is build with five RadPanes in two RadSplitters. In every pane I'm loading same UserControl which contains RadGrid. I got idea how to set it from second example (MasterPage+RadAjaxManagerProxy) in upper link.
So my problem is, that CSS style

#<%=radGridPanelClientID%>

{

margin:0;

height:100%;

}

defined in UserControl is generated 5x with same name uc5_radGridPanel but RadAjaxPanel are generated 5x with different IDs which is normal and expected behavior. Result is that only last RadGrid has width="100%", because all #<%=radGridPanelClientID%> gets IDs from last RadGrid #uc5_radGridPanel.
So, how can I render #<%=RgNalogPanelClientID%> with 5 different IDs from RadAjaxPanels.
Regards Sid

answered on 01 Oct 2014, 11:20 AM

Hi Sid,

Could you provide a live URL where the described problem can be observed? We will inspect the grid in your scenario and will get back to you with additional information.

Meanwhile you can check the code library linked below which demonstrates few different scenarios that are frequently used by our clients:
    - Set RadGrid’s height to 100% of the page with RadAjaxManager
    - Set RadGrid’s height to 100% of the page with RadAjaxPanel
    - Nested RadGrid in RadSplitter, both with height in percentage
    - RadGrid (with height in percentage) in RadTabStrip
    - RadGrid taking the place between a header and footer on the page:
http://www.telerik.com/support/code-library/setting-radgrid%27s-height-in-percents

I believe that it will be useful for you.

Regards,
Pavlina
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.