Custom page sizes in paging dropdown in Telerik RadGrid

Jochen Kirstätter -

Working with Telerik RadControls for ASP.NET AJAX is actually quite easy and the initial effort to get started with the control suite is very low. Meaning that you can easily get good result with little time. But there are usually cases where you have to go a little further and dig a little bit deeper than the standard scenarios. In this article I am going to describe how you can customize the default values (10, 20 and 50) of the drop-down list in the paging element of RadGrid. Get control over the displayed page sizes while using numeric paging...

The default page sizes are good but not always good enough

The paging feature in RadGrid offers you 3, well actually 4, possible page sizes in the drop-down element out-of-the box, which are 10, 20 or 50 items. You can get a fourth option by specifying a value different than the three standards for the PageSize attribute, ie. 35 or 100. The drawback in that case is that it is the initial page size.

Certainly, the available choices could be more flexible or even a little bit more intelligent. For example, by taking the total count of records into consideration. There are some interesting scenarios that would justify a customized page size element:

  • A low number of records, like 14 or similar shouldn't provide a page size of 50,
  • A high total count of records (ie: 300+) should offer more choices, ie: 100, 200, 500, or
  • display of all records regardless of number of records

I am sure that you might have your own requirements, and I hope that the following source code snippets might be helpful.

Wiring the ItemCreated event

In order to adjust and manipulate the existing RadComboBox in the paging element we have to handle the OnItemCreated event of RadGrid. Simply specify your code behind method in the attribute of the RadGrid tag, like so:

<telerik:RadGrid ID="RadGridLive" runat="server" AllowPaging="true" PageSize="20"
    AllowSorting="true" AutoGenerateColumns="false" OnNeedDataSource="RadGridLive_NeedDataSource"
    OnItemDataBound="RadGrid_ItemDataBound" OnItemCreated="RadGrid_ItemCreated">
    <ClientSettings EnableRowHoverStyle="true">
        <ClientEvents OnRowCreated="RowCreated" OnRowSelected="RowSelected" />
        <Resizing AllowColumnResize="True" AllowRowResize="false" ResizeGridOnColumnResize="false"
            ClipCellContentOnResize="true" EnableRealTimeResize="false" AllowResizeToFit="true" />
        <Scrolling AllowScroll="true" ScrollHeight="360px" UseStaticHeaders="true" SaveScrollPosition="true" />
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <MasterTableView DataKeyNames="AdvertID">
        <PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" />
        <Columns>
            <telerik:GridBoundColumn HeaderText="Listing ID" DataField="AdvertID" DataType="System.Int32"
                SortExpression="AdvertID" UniqueName="AdvertID">
                <HeaderStyle Width="66px" />
            </telerik:GridBoundColumn>
            <!--//  ... and some more columns ... -->
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

To provide a consistent experience for your visitors it might be helpful to display the page size selection always. This is done by setting the AlwaysVisible attribute of the PagerStyle element to true, like highlighted above.

Customize the values of page size

Your delegate method for the ItemCreated event should look like this:

protected void RadGrid_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridPagerItem)
    {
        var dropDown = (RadComboBox)e.Item.FindControl("PageSizeComboBox");
        var totalCount = ((GridPagerItem)e.Item).Paging.DataSourceCount;
        var sizes = new Dictionary<string, string>() {
            {"10", "10"},
            {"20", "20"},
            {"50", "50"}
        };
        if (totalCount > 100)
        {
            sizes.Add("100", "100");
        }
        if (totalCount > 200)
        {
            sizes.Add("200", "200");
        }
        sizes.Add("All", totalCount.ToString());

        dropDown.Items.Clear();
        foreach (var size in sizes)
        {
            var cboItem = new RadComboBoxItem() { Text = size.Key, Value = size.Value };
            cboItem.Attributes.Add("ownerTableViewId", e.Item.OwnerTableView.ClientID);
            dropDown.Items.Add(cboItem);
        }
        dropDown.FindItemByValue(e.Item.OwnerTableView.PageSize.ToString()).Selected = true;
    }
}

It is important that we explicitly check the event arguments for GridPagerItem as it is the control that contains the PageSizeComboBox control that we want to manipulate. To keep the actual modification and exposure of possible page size values flexible I am filling a Dictionary with the requested 'key/value'-pairs based on the number of total records displayed in the grid. As a final step, ensure that the previously selected value is the active one using the FindItemByValue() method.

Of course, there might be different requirements but I hope that the snippet above provide a first insight into customized page size value in Telerik's Grid. The Grid demos describe a more advanced approach to customize the Pager.