Paging in the grid on top & bottom

[Sang]

is it possible to have the pagination on top and bottom of the grid?  today it always sits at the bottom but on our case where the list is big, it would be nice to have it on top so use don't have to navigate to the bottom for pagination.  Thanks.

[Dimiter Madjarov]

Hi Sang,


Please take a look at the following forum topic, where this is discussed in detail with examples.

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik

[Laurie]

Dimiter,

The forum post you point to doesn't really resolve the question of how to add pagination on top and bottom of a grid using the mvc helpers as opposed to using straight-up kendoui. What I see is Dimo's response:

Copying the pager behavior in the MVC Grid is not straightforward,
because the implementation is different. You can clone the HTML markup
in a similar way, however, then you will need to attach custom event
handlers that will execute paging actions using the client API.
Modifying the cloned pager markup manually (or cloning the pager again)
in the Grid's dataBound / load event will also be required.

Is there anyone at Telerik who could provide a clearer explanation of how to implement this using wrappers? It seems there are several people out there who would like to do this.

 Also, is this on the list of things to be added to the mvc grid?

Thanks.

Laurie

[Dimiter Madjarov]

Hello Laurie,

The linked forum post is very old and my colleague Dimo is referring to the MVC Grid from the Telerik MVC Extensions, which is discontinued at the moment. If the UI for ASP.NET MVC Grid is used in the current case, the desired task could be achieved by only adding the JavaScript code, showed in the following post, depending on whether the Grid is scrollable or not.

Regarding the second question, adding this as a built in feature is not in our development plans.

I hope this clarifies the case. Have a nice day!

Regards,
Dimiter Madjarov
Telerik

[Laurie]

Thanks, Dimiter, that worked perfectly!

[Laurie]

One additional question: when I first go to the page, the pager is at top and bottom. When I click on the pager to go to the next page, an additional pager appears at the top.

 ​

 Here's the relevant code in my VIew and I'm attaching a pic of what it looks like. Any ideas?

@(Html.Kendo().Grid<BFRDP.Models.OrganizationViewModel>()
        .Name("grid")
        .Pageable()
        .Filterable()
        .Sortable()
        .Columns(columns =>
            {
                columns.Bound(p => p.OrganizationName).Title("Organization");
                columns.Bound(p => p.Website).Title("Website");
                columns.Bound(p => p.CityState).Title("City, State");
            })
            .Events(events => events.DataBound("onDataBound"))
            .DataSource(datasource => datasource
            .Ajax()
                .Model(model => model.Id(m => m.OrganizationName))
                .Read(read => read.Url(@Url.HttpRouteUrl("DefaultAPI", new { controller = "OrganizationAPI", action = "GetAllOrganizations" })).Type(HttpVerbs.Get))
            .PageSize(10)
            .ServerOperation(true)
            .Sort(sort =>
                {
                    sort.Add(p => p.OrganizationName);
                })
                )
)
<script>

    function onDataBound(e) {
        var grid = $('#grid').data('kendoGrid');
        var wrapper = $('<div class="k-pager-wrap k-grid-pager pagerTop"/>').insertBefore(grid.element.children("table"));
        grid.pagerTop = new kendo.ui.Pager(wrapper, $.extend({}, grid.options.pageable, { dataSource: grid.dataSource }));
        grid.element.height("").find(".pagerTop").css("border-width", "0 0 1px 0");
    }
</script>

[Dimiter Madjarov]

Hello Laurie,

The dataBound event is fired each time the Grid is bound to a new set of data e.g. when going to the next page. This is why the code for adding the second pager should be executed on document.ready only, not in the dataBound event handler.

Regards,
Dimiter Madjarov
Telerik

[Laurie]

Yes, perfect!  Many thanks!