Telerik
Knowledge Base
Home / Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Grid / Making RadGrid occupy 100% Width/Height of a RadSplitter pane and resizing on pane resize

Making RadGrid occupy 100% Width/Height of a RadSplitter pane and resizing on pane resize

Article Info

Rating: 4

Article information

Article relates to

RadGrid
RadSplitter

Created by

 Stephen, Telerik

Last modified

April 14, 2008

Last modified by

 Svetlina, Telerik

HOW-TO
Make RadGrid instance occupy 100% Width/Height of a RadSplitter pane and resize the grid on pane resize





DESCRIPTION
In numerous situations you may want a grid inside a splitter pane to "adjust" itself in order to fill the pane area initially and after a resize action.

SOLUTION
You need to set appropriate ScrollHeight in percentage to adjust the grid fill the entire available area inside the splitter pane on initial load. This should be sufficient enough to make the grid fill available area when expanding the width dimensions of the container pane. Note that the first grid in the demo is optimized to work in:
  • scrolling mode with static headers and paging enabled

Additionally, there are MS Calendar and MS ListBox controls inserted in adjacent panes for better user experience on resize action.

There is also a second grid wrapped inside another splitter pane (which is locked horizontally). This grid page size is modified on the fly when the pane height is changed by the user. To do that we wire the OnClientPageResized event of the splitter pane, trigger an AJAX request from its handler and modify the number of records displayed in par with the new pane size. For this purpose we override the RaisePostBackEvent handler of the page and rebind the grid after the action takes place.

For more information please refer to the code below and the attached project at the bottom of this article. Feel free to extend the logic when you have different grid table configuration:

ASPX/ASCX

            <script type="text/javascript">  
            function ResizeSecondGrid(sender, eventArgs)  
            {  
                window["<%= RadGrid2.ClientID %>"].AjaxRequest("<%= RadGrid2.UniqueID %>", "ChangePageSize");   
            }  
            </script> 
 
            <radspl:RadSplitter ID="RadSplitter1" runat="server" ResizeMode="AdjacentPane" Orientation="Vertical" Height="700px" Width="700px">  
                <radspl:RadPane ID="calendarPane" runat="server" Height="400px" Width="400px">  
                    <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="Black" 
                        BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" 
                        NextPrevFormat="ShortMonth" Width="100%" Height="100%">  
                        <SelectedDayStyle BackColor="#333399" ForeColor="White" /> 
                        <TodayDayStyle BackColor="#999999" ForeColor="White" /> 
                        <DayStyle BackColor="#CCCCCC" /> 
                        <OtherMonthDayStyle ForeColor="#999999" /> 
                        <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" /> 
                        <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" /> 
                        <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt" 
                            ForeColor="White" Height="12pt" /> 
                    </asp:Calendar> 
                </radspl:RadPane> 
                <radspl:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="True" /> 
                <radspl:RadPane ID="nestedPane" runat="server" Width="400px" Height="80%">  
                    <radspl:RadSplitter ID="nestedSplitter" runat="server" Orientation="Horizontal">  
                        <radspl:RadPane ID="gridPane" runat="server" Scrolling="None">  
                            <radG:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" runat="server" EnableAJAX="true" 
                                AllowPaging="true" PageSize="20" Width="100%">  
                                <MasterTableView /> 
                                <ClientSettings> 
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="80%" /> 
                                    <ClientEvents /> 
                                </ClientSettings> 
                                <PagerStyle Mode="NumericPages" /> 
                            </radG:RadGrid> 
                        </radspl:RadPane> 
                        <radspl:RadSplitBar ID="RadSplitBar2" runat="server" EnableResize="True" /> 
                        <radspl:RadPane ID="listBoxPane" runat="server">  
                            <asp:ListBox ID="ListBox1" runat="server" Width="100%" Height="100%">  
                                <asp:ListItem Selected="True">item 1</asp:ListItem> 
                                <asp:ListItem>item2</asp:ListItem> 
                                <asp:ListItem>item3</asp:ListItem> 
                            </asp:ListBox> 
                        </radspl:RadPane> 
                    </radspl:RadSplitter> 
                </radspl:RadPane> 
                <radspl:RadSplitBar ID="RadSplitBar3" runat="server" EnableResize="True" /> 
                <radspl:RadPane ID="paneResizePage" runat="server" Scrolling="None" Locked="true" 
                    Width="400px">  
                    <radspl:RadSplitter ID="spResizePage" runat="server" Orientation="Horizontal">  
                        <radspl:RadPane ID="gridPane2" runat="server" OnClientPaneResized="ResizeSecondGrid" 
                            Scrolling="None" Height="200px">  
                            <radG:RadGrid ID="RadGrid2" DataSourceID="AccessDataSource2" runat="server" EnableAJAX="true" 
                                AllowPaging="true">  
                                <MasterTableView AllowPaging="true" /> 
                                <PagerStyle Mode="NumericPages" /> 
                            </radG:RadGrid> 
                        </radspl:RadPane> 
                        <radspl:RadSplitBar ID="RadSplitBar4" runat="server" EnableResize="True" /> 
                        <radspl:RadPane ID="paneEmplty" runat="server">  
                        </radspl:RadPane> 
                    </radspl:RadSplitter> 
                </radspl:RadPane> 
            </radspl:RadSplitter> 
            <br /> 
            <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb" 
                SelectCommand="SELECT ContactName, ContactTitle, City, PostalCode FROM Customers" 
                runat="server"></asp:AccessDataSource> 
            <asp:AccessDataSource ID="AccessDataSource2" DataFile="~/Grid/Data/Access/Nwind.mdb" 
                SelectCommand="SELECT TOP 40 ContactName, ContactTitle, City, PostalCode FROM Customers" 
                runat="server"></asp:AccessDataSource> 

VB.NET

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)  
        If Not Page.IsPostBack Then 
            RadGrid2.PageSize = 5  
        End If 
    End Sub 
 
    Protected Overrides Sub RaisePostBackEvent(ByVal source As IPostBackEventHandler, ByVal eventArgument As String)  
        MyBase.RaisePostBackEvent(source, eventArgument)  
        Select Case eventArgument  
            Case "ChangePageSize" 
                Dim rows As Double = ((Me.gridPane2.Height.Value - 52) / 26)  
                If rows >= 1 Then 
                    RadGrid2.PageSize = CType(rows, Integer)  
                    RadGrid2.Rebind()  
                End If 
        End Select 
    End Sub 

C#

protected void Page_Load(object sender, EventArgs e)   
{   
 if (!Page.IsPostBack)   
 {   
   RadGrid2.PageSize = 5;   
 }   
}   
 
protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)   
{   
 base.RaisePostBackEvent(source, eventArgument);   
 if (eventArgument == "ChangePageSize")   
 {   
   double rows = ((this.gridPane2.Height.Value - 52) / 26);   
   if (rows >= 1)   
   {   
     RadGrid2.PageSize = (int)rows;   
     RadGrid2.Rebind();   
   }   
 }   
} 

   




The solution when implementing the same scenario with RadSplitter for ASP.NET AJAX (Prometheus) is a little bit different because the RadGrid does not offer ajaxifing functionality. This being said you should make a postback in the client resized eventhandler instead of ajax request. In case you want to ajaxify the RadGrid you should wrap it in a RadAjaxPanel or in a standard UpdatePanel. 

Another approach is to use RadAjaxManager as shown below:

ASPX/ASCX:

  <script type="text/javascript">  
            function ResizeSecondGrid(sender, eventArgs)  
            {  
             
               $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest('ChangePageSize');  
            }  
            </script> 
 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">  
             <AjaxSettings> 
                        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
                            <UpdatedControls> 
                                <telerik:AjaxUpdatedControl ControlID="RadGrid2" /> 
                            </UpdatedControls> 
                        </telerik:AjaxSetting> 
                        <telerik:AjaxSetting AjaxControlID="RadGrid2">  
                            <UpdatedControls> 
                                <telerik:AjaxUpdatedControl ControlID="RadGrid2" /> 
                            </UpdatedControls> 
                        </telerik:AjaxSetting> 
                    </AjaxSettings> 
            </telerik:RadAjaxManager> 
 
           <telerik:RadSplitter ID="RadSplitter1" runat="server" ResizeMode="AdjacentPane" Orientation="Vertical" Height="700px" Width="700px">  
               <telerik:RadPane ID="calendarPane" runat="server" Height="400px" Width="400px">  
                    <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="Black" 
                        BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" 
                        NextPrevFormat="ShortMonth" Width="100%" Height="100%">  
                        <SelectedDayStyle BackColor="#333399" ForeColor="White" /> 
                        <TodayDayStyle BackColor="#999999" ForeColor="White" /> 
                        <DayStyle BackColor="#CCCCCC" /> 
                        <OtherMonthDayStyle ForeColor="#999999" /> 
                        <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" /> 
                        <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" /> 
                        <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt" 
                            ForeColor="White" Height="12pt" /> 
                    </asp:Calendar> 
               </telerik:RadPane> 
               <telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="True" /> 
               <telerik:RadPane ID="nestedPane" runat="server" Width="400px" Height="80%">  
                   <telerik:RadSplitter ID="nestedSplitter" runat="server" Orientation="Horizontal">  
                       <telerik:RadPane ID="gridPane" runat="server" Scrolling="None">  
                           <telerik:RadGrid ID="RadGrid1" DataSourceID="AccessDataSource1" runat="server" 
                                AllowPaging="true" PageSize="20" Width="100%">  
                                <MasterTableView Width="99%" /> 
                                <ClientSettings> 
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="80%" /> 
                                    <ClientEvents /> 
                                </ClientSettings> 
                                <PagerStyle Mode="NumericPages" /> 
                           </telerik:RadGrid> 
                       </telerik:RadPane> 
                       <telerik:RadSplitBar ID="RadSplitBar2" runat="server" EnableResize="True" /> 
                       <telerik:RadPane ID="listBoxPane" runat="server">  
                            <asp:ListBox ID="ListBox1" runat="server" Width="100%" Height="100%">  
                                <asp:ListItem Selected="True">item 1</asp:ListItem> 
                                <asp:ListItem>item2</asp:ListItem> 
                                <asp:ListItem>item3</asp:ListItem> 
                            </asp:ListBox> 
                       </telerik:RadPane> 
                   </telerik:RadSplitter> 
               </telerik:RadPane> 
               <telerik:RadSplitBar ID="RadSplitBar3" runat="server" EnableResize="True" /> 
               <telerik:RadPane ID="paneResizePage" runat="server" Scrolling="None" Locked="true" 
                    Width="400px">  
                   <telerik:RadSplitter ID="spResizePage" runat="server" Orientation="Horizontal">  
                       <telerik:RadPane ID="gridPane2" runat="server" OnClientResized="ResizeSecondGrid" 
                            Scrolling="None" Height="200px">  
                           <telerik:RadGrid ID="RadGrid2" DataSourceID="AccessDataSource2" runat="server"   
                                AllowPaging="true">  
                                <MasterTableView AllowPaging="true" /> 
                                <PagerStyle Mode="NumericPages" /> 
                           </telerik:RadGrid> 
                       </telerik:RadPane> 
                       <telerik:RadSplitBar ID="RadSplitBar4" runat="server" EnableResize="True" /> 
                       <telerik:RadPane ID="paneEmplty" runat="server">  
                       </telerik:RadPane> 
                   </telerik:RadSplitter> 
               </telerik:RadPane> 
           </telerik:RadSplitter> 
            <br /> 
            <asp:AccessDataSource ID="AccessDataSource1" DataFile="~/Grid/Data/Access/Nwind.mdb" 
                SelectCommand="SELECT ContactName, ContactTitle, City, PostalCode FROM Customers" 
                runat="server"></asp:AccessDataSource> 
            <asp:AccessDataSource ID="AccessDataSource2" DataFile="~/Grid/Data/Access/Nwind.mdb" 
                SelectCommand="SELECT TOP 40 ContactName, ContactTitle, City, PostalCode FROM Customers" 
                runat="server"></asp:AccessDataSource> 

C#:

 protected void Page_Load(object sender, EventArgs e)  
    {  
        if (!Page.IsPostBack)  
        {  
            RadGrid2.PageSize = 5;  
        }  
 
    }  
 
    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)  
    {  
        switch (e.Argument.ToString())  
        {  
            case "ChangePageSize":  
                //Calculate the number of rows that fit in the RadPane.  
                //In this case 24 is the sum of the height of a single row and its upper border width.  
                //Depending on the paticular scenario this value may vary.  
                double rows = ((this.gridPane2.Height.Value - 52) / 26);  
                if (rows >= 1)  
                {  
                    RadGrid2.PageSize = (int)rows;  
                    RadGrid2.Rebind();  
                }  
                break;  
        }  
    } 

You can find this working project in the attached GridInSplitterWithResizingUpdated_Prometheus.zip archive file.

You can also find a detailed, working online demo, which covers the scenario with RadAjaxPanel  here.


         

Files

Comments

  • Stuart Hemming , May 10, 2007

    As it stands your code forces the the grid to go back to the first page of data when the splitter is resized. Changing the PostBack event handler will cause the grid to display the page on which the first row of the data at the old page size can now be found ... if (eventArgument == "ChangePageSize") { double rows = ((this.gridPane2.Height.Value - 52) / 26); if (rows >= 1) { int oldPageSize = RadGrid2.PageSize; int currentPage = RadGrid2.CurrentPageIndex; RadGrid2.CurrentPageIndex = (int) (oldPageSize * currentPage) / rows; RadGrid2.PageSize = (int)rows; RadGrid2.Rebind(); } } You could go a step further if you have a selected row on the page before resizing to ensure the same row is not only visible but selected after the page size changes. -- Stuart

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.

Powered by Sitefinity ASP.NET CMS

Contact Us | Site Feedback | Terms of Use | Privacy Policy
Copyright © 2002-2010 Telerik. All rights reserved.