Custom pager in Telerik MVC Grid

Question

Can i customize appearance of a Grid's pager? I wanna select a page size from list (like Redmine, see 'Per page' block) not from dropdown.

It's standart Telerik's pager:

It's Redmine's pager:

Thanks.

PS for instance Devexpress' Grid has this ability

Answer 1

You could replace the DOM element that is responsible for page size. You need to do it when 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 bind own event to the change of the page size and tell new page size for the Telerik grid.

You can provide additional parameters to the controller action that provides data to your controller. There is an example in the documentation 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 the server side controller action should automatically map your pageSize to an action parameter.

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