Paging and 100% height

2 posts, 0 answers
  1. Teija
    Teija avatar
    23 posts
    Member since:
    Oct 2008

    Posted 19 Jan 2009 Link to this post

    I want to use paging in my radGrid but at the same time resize the grid to 100% height in my browser or div.
    A bit like this example: http://demos.telerik.com/aspnet-ajax/Grid/Examples/Programming/CustomizingPager/DefaultCS.aspx but I want the page size to be variable and be based on the containers height and how many objects it can fit in the grid when maximized.
    For example if the height is big then the grid would hold 100 objects per page and if I resize it smaller it could only hold 10 objects. And all this is controlled automatically and programatically.
    How can I solve this?

  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jan 2009 Link to this post

    Hi Mathias,

    I am not sure why you need this, because a lot better solution is to use the RadGrid scrolling feature (with or without static headers).

    However, here is a possible approach. Resize the browser window to see how the PageSize changes.

    The tecnique has one limitation - there is no way for RadGrid to know initially what will be the available space for the control, unless you calculate and pass it yourself.


    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Data" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <script runat="server"
     
        protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        { 
            DataTable dt = new DataTable(); 
            DataRow dr; 
            int colsNum = 5
            int rowsNum = 2000
            string colName = "Column"
     
            for (int j = 1; j <= colsNum; j++) 
            { 
                dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
            } 
     
            for (int i = 1; i <= rowsNum; i++) 
            { 
                dr = dt.NewRow(); 
     
                for (int k = 1; k <= colsNum; k++) 
                { 
                    dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
                } 
                dt.Rows.Add(dr); 
            } 
     
            (sender as RadGrid).DataSource = dt
        } 
     
        protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e) 
        { 
            RadGrid1.PageSize = Convert.ToInt16(int.Parse(e.Argument) / 22); 
            RadGrid1.Rebind(); 
        } 
         
    </script> 
     
    <!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"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    <style type="text/css"
     
    html{overflow:hidden} 
    html,body,form{margin:0;height:100%;} 
     
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackColor="White" Transparency="50" /> 
     
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
                </UpdatedControls> 
            </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManager> 
     
    <telerik:RadGrid 
        ID="RadGrid1" 
        runat="server" 
        Skin="Office2007" 
        AllowPaging="true" 
        Height="100%" 
        OnNeedDataSource="RadGrid_NeedDataSource"
        <MasterTableView TableLayout="Fixed" /> 
        <ClientSettings> 
            <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        </ClientSettings> 
    </telerik:RadGrid> 
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <script type="text/javascript"
     
    window.onresize = function() 
        $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest([document.documentElement.clientHeight]); 
     
    </script> 
    </telerik:RadCodeBlock> 
     
    </form> 
    </body> 
    </html> 
     


    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top