Radgrid automatic pagesize

2 posts, 0 answers
  1. archimede
    archimede avatar
    103 posts
    Member since:
    Jul 2006

    Posted 26 May 2015 Link to this post

    Good day,

     we have implemented a flex layout to accommodate our typical site page setup with a formview on top and one or more radgrids at the bottom.

    The flex based design uses a non stretching top space dedicated to the formview, and a stretching inferior part dedicated to the grids.

    We would like to implement a dynamic pagesize solution to take advantage of our site's fluid design. We've already solved all containment challenges so the radgrid's container implements auto scroll, but because of the grids' pagesizes, the grids remain limited in vertical size and never benefit from a taller display than the 'design' one.

    We would like to know how to implement a dynamic pagesize based on the grid's container height, or any equivalent paging solution that would allow our grids to resize vertically automatically and take advantage of dynamic vertical space.

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 29 May 2015 Link to this post

    Hello,

    There is no built-in functionality or settings that could allow you to achieve the desired behavior. Nevertheless, you can try to handle the client-side onresize event of the grid's container (or the window) and fire command through the MasterTableView client object with the fireCommand method. Detailed information on the method and the available command could be found in the following help article:
    The main idea will be to wrap the grid in a RadAjaxPanel for example and calculate the page size that will be suitable for the available height:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad() {
                window.onresize = function (e) {
                    var size = parseInt(window.innerHeight / 30);
                    changeGridSize(size);
                }
            }
     
            function changeGridSize(size) {
                var tableView = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
                tableView.fireCommand("PageSize", size);
            }
        </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadAjaxPanel runat="server">
        <telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" AllowPaging="true">
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>

    And the dummy data:
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("ID", typeof(int));
        table.Columns.Add("FirstName", typeof(string));
        table.Columns.Add("LastName", typeof(string));
        table.Columns.Add("Age", typeof(int));
        table.Columns.Add("Date", typeof(DateTime));
        table.Columns.Add("ValintaStatus", typeof(Boolean));
        for (int i = 0; i < 50; i++)
        {
            table.Rows.Add(i, "FirstName" + i, "LastName" + i, 20 + i, DateTime.Now.AddDays(i), i % 2 == 0);
        }
     
        (sender as RadGrid).DataSource = table;
    }

    The above is just an example that should be a good starting point for achieving the desired result.



    Regards,
    Konstantin Dikov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top