Custom pager in the Telerik MVC grid

Question

Can I customize the appearance of the grid pager? I want to select the page size from the list (for example, Redmine, see the "Per Page" block), and not from the drop-down list.

This is the standard Telerik player:

This is the Redmine Pager:

Thanks.

PS, for example, Devexpress' Grid has the ability

Answer 1

You can replace the DOM element, which is responsible for the page size. You need to do this when the grid is loaded.

View

@Html.Telerik().Grid(Model) .Name("Grid") .ClientEvents(events => events.OnLoad("Grid_onLoad")) 

Javascript

 function Grid_onLoad(e) { var html = { place your favorite template engine here } $('#YourGridId').find('.t-page-size').html(html); // bind 'click' event to your new control } 

Now the problem is that you need to associate your own event with the page resizing and report the new page size for the Telerik grid.

You can provide additional parameters for the action of the controller, which provides data to your controller. The documentation has how to add additional data to your request.

 <script type="text/javascript"> function Grid_onDataBinding(e) { // pass additional values by setting the "data" field of the event argument e.data = { pageSize: // TODO: provide selected page size from your new control }; } </script> 

In a server-side controller action, you must automatically map your pageSize to the action parameter.

I hope this helps, let me know if you need more information.