This is a migrated thread and some comments may be shown as answers.
Setting scrolling grid to 100% inside splitter RadPane
9 Answers 104 Views
This is a migrated thread and some comments may be shown as answers.
Iggy
Top achievements
Rank 1
Iggy asked on 22 Jun 2010, 10:53 PM

Hello,

I have a scrolling grid using static headers and no paging.  I need to have the grid expand inside it's container but I've gone through the forums for the splitter and grid as well as the code library and I can't seem to get it to work correctly. 
I want the grid to scroll, not the splitter pane so that the column headers stay on the screen.  Also, if it's not too much to ask I'd like to be able to have the grid resize when the screen resizes and causes the splitter to resize.

The page is set up with a splitter as the main control set for a horizontal orientation.  In the splitter there are 2 RadPanes.  The top one contains header text and a toolbar.  The bottom one contains the grid.  Around the grid I added a div just for padding.

What is happening with this setup is the splitter occupies 100% of the page correctly.  The bottom pane expands to fill the rest of the page under the header, which is correct.  But the grid opens to around 200px high and 40px wide and then immediatly snaps to full width (which is correct) but only shows the column headers and another 10px (around 30px total height).

Attached is a screen shot of the grid after it expands.

    <style type="text/css">  
        html, body, form  
        {  
            height: 100%;  
            margin:0;  
            padding:0;  
            overflow: hidden;  
        }             
    </style> 

<telerik:RadSplitter ID="rsMain" runat="server" Height="100%" Width="100%" Orientation="Horizontal">  
    <telerik:RadPane ID="rpTop" runat="server" Height="110px" Locked="true">  
        <div style="padding: 10px; padding-bottom:0;">  
            This is my page header  
            <div style="padding-bottom: 20px">  
                <telerik:RadToolBar ID="rtbToolbar" runat="server">  
                    <Items> 
                        <telerik:RadToolBarButton runat="server" SkinID="FolderUp" id="rtbbBack" PostBack="false"></telerik:RadToolBarButton> 
                        <telerik:RadToolBarButton runat="server" SkinID="Refresh" id="rtbbRefresh" PostBack="false"></telerik:RadToolBarButton> 
                    </Items> 
                </telerik:RadToolBar> 
            </div>                   
        </div> 
    </telerik:RadPane>              
    <telerik:RadPane ID="rpBottom" runat="server" Height="100%">  
        <div style="padding: 10px; padding-top: 0;">  
            <telerik:RadGrid ID="rgMyGrid" runat="server" OnNeedDataSource="rgMyGrid_NeedDataSource" Height="100%" Width="100%">  
                <ClientSettings> 
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
                </ClientSettings> 
                <MasterTableView AutoGenerateColumns="false" TableLayout="Auto">                  
                    <Columns> 
                        <telerik:GridHyperLinkColumn UniqueName="Name" DataTextField="Name" DataNavigateUrlFields="DetailsUrl" HeaderText="Name">  
                        </telerik:GridHyperLinkColumn> 
                        <telerik:GridImageColumn UniqueName="IsCustom" HeaderStyle-Width="60px" HeaderText="Custom" DataImageUrlFields="IsCustomImageUrl" 
                            ItemStyle-HorizontalAlign="Center" /> 
                    </Columns> 
                </MasterTableView> 
            </telerik:RadGrid>                
        </div> 
    </telerik:RadPane> 
</telerik:RadSplitter>  

Anyone have any ideas?

9 Answers, 1 is accepted

Sort by
0
Iggy
Top achievements
Rank 1
answered on 22 Jun 2010, 10:57 PM
Forgot to mention, using Telerik Ajax version 2010.1.309.35.
0
Pavlina
Telerik team
answered on 23 Jun 2010, 10:32 AM
Hello Iggy,

Go through the following code library, which elaborates on how to configure RadGrid to occupy 100% height of its container (or the total browser window height) with scrolling and static headers enabled.
Setting 100% height and resize on container resize for grid with scrolling and static headers

Give it a try and let me know if further assistance is needed.

Best wishes,
Pavlina
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
0
Iggy
Top achievements
Rank 1
answered on 23 Jun 2010, 02:22 PM
I had already gone through that code library.  Following it gets me the grid that I have attached above where it shows the column headers and only around 10px of the body.  If I remove the Height="100%" on the grid then the grid shows with the body around 300px high but it doesn't stretch to the height of the container.
0
Pavlina
Telerik team
answered on 25 Jun 2010, 03:29 PM
Hi Iggy,

Unfortunately the provided code lines are not sufficient to pinpoint the reason for the problem. Please, open up a formal support ticket and send a runnable version of your implementation. We shall debug it and get back to you with our findings.

Thank you.

Kind regards,
Pavlina
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
0
Iggy
Top achievements
Rank 1
answered on 28 Jun 2010, 04:31 PM
Ok, I figured out what's causing it.  While creating a test project it was working fine until I added the RadAjaxManager and ajaxified the grid. 

Here's my sample code:

aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SplitterGridText._Default" %> 
<%@ 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></title>  
    <style type="text/css">  
        html  
        {  
            overflow:auto;  
        }  
 
        html,  
        body,  
        form  
        {  
            margin:0;  
            height:100%;  
        }  
                  
    </style>      
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" > 
        </asp:ScriptManager> 
        <telerik:RadSplitter ID="rsMain" runat="server" Height="100%" Width="100%" Orientation="Horizontal">  
            <telerik:RadPane ID="rpTop" runat="server" Height="110px" Locked="true">  
                <div style="font:16pt Tahoma">My Resizing Test Grid</div> 
            </telerik:RadPane>              
            <telerik:RadPane ID="rpBottom" runat="server" Height="100%" Scrolling="none">  
                    <telerik:RadGrid ID="rgTestGrid" runat="server" OnNeedDataSource="rgTestGrid_NeedDataSource" Width="100%" Height="100%">  
                        <ClientSettings EnableRowHoverStyle="true">  
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
                        </ClientSettings> 
                        <MasterTableView AutoGenerateColumns="false" TableLayout="Fixed">                  
                            <Columns> 
                                <telerik:GridBoundColumn DataField="name" HeaderText="Name"></telerik:GridBoundColumn> 
                            </Columns> 
                        </MasterTableView> 
                    </telerik:RadGrid>                
            </telerik:RadPane> 
        </telerik:RadSplitter>          
        <telerik:RadAjaxManager ID="ramMain" runat="server">  
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="rgTestGrid">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="rgTestGrid" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
    </form> 
</body> 
</html> 
 

.cs
protected void rgTestGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)  
{  
    List<string> names = new List<string>();  
    for (int i = 0; i < 50; i++)  
    {  
        names.Add("Grid Entry " + i);  
    }  
 
    rgTestGrid.DataSource = from name in names  
                            select new {name};  
0
Iggy
Top achievements
Rank 1
answered on 29 Jun 2010, 02:48 PM
Wrapping this in an ajax panel has the same results and so does adding the grid dynamically to the ajax manager.  Does anybody have any ideas on how to solve this issue or can you just not use ajax with the grid anymore?
0
Pavlina
Telerik team
answered on 01 Jul 2010, 01:47 PM
Hello Iggy,

Thank you for the provided code. However, I was not able to replicate the described issue as you can see for this video. Please examine it and let me know if I am leaving something out while testing. Attached to this message is the test project.

Regards,
Pavlina
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
0
Iggy
Top achievements
Rank 1
answered on 01 Jul 2010, 05:00 PM
I have opened a support ticket on this issue: 324310
I watched the video you created and the code looks identical so I attached my full test project to the support ticket and hopefully you can reproduce the issue with it.

Thanks.
0
Dimo
Telerik team
answered on 02 Jul 2010, 06:56 AM
Hello Iggy,

You also need to set 100% height style to the update panel, which is generated around RadGrid. This is a CSS standards' requirement related to elements with percentage heights (in this case - RadGrid).

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

All the best,
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
Iggy
Top achievements
Rank 1
Answers by
Iggy
Top achievements
Rank 1
Pavlina
Telerik team
Dimo
Telerik team
Share this question
or