Radgrid automatic pagesize

[archimede]

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.

[Konstantin Dikov]

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:

• fireCommand

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