Telerik Extensions for ASP.NET MVC

This help topic discusses the paging feature of Telerik Grid for ASP.NET MVC

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

By default Telerik Grid for ASP.NET will display all records from the data source it is bound to. Often the need use paging arises when there are lots of records to display. To enable paging for your grid you should use the Pageable()()()() method:

CopyView
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Pageable()
%>
This would enable paging with default configuration - showing 10 records per page and using numeric pager style.

Pager Configuration

You can customize the pager by using the Pageable(Action<(Of <<'(GridPagerSettingsBuilder>)>>)) method. It allows you to do the following:
  • Set the initial page via the PageTo(Int32) method:
    CopyView
    <%= Html.Telerik().Grid(Model)
            .Name("Grid")
            .Pageable(pager => pager.PageTo(3))
    %>
  • Enable paging based on some condition via the Enabled(Boolean) method:
    CopyView
    <%= Html.Telerik().Grid(Model)
            .Name("Grid")
            .Pageable(pager => pager.Enabled((bool)ViewData["enablePaging"]))
    %>
  • Change the page size via the PageSize(Int32) method:
    CopyView
    <%= Html.Telerik().Grid(Model)
            .Name("Grid")
            .Pageable(pager => pager.PageSize(20))
    %>
  • Change the pager position via the Position(GridPagerPosition) method:
    CopyView
    <%= Html.Telerik().Grid(Model)
            .Name("Grid")
            .Pageable(pager => pager.Position(GridPagerPosition.Top))
    %>
  • Set the total number of records of your datasource via the Total(Int32) method:
    CopyView
    <%= Html.Telerik().Grid(Model)
            .Name("Grid")
            .Pageable(pager => pager.Total((int)ViewData["total"]))
    %>
    Note
    Setting the Total is only required when using Custom binding.
  • Change the pager style via the Style(GridPagerStyles) method:
    CopyView
    <%= Html.Telerik().Grid(Model)
            .Name("Grid")
            .Pageable(pager => pager.Style(GridPagerStyles.PageInput | GridPagerStyles.Numeric))
    %>

See Also

Other Resources