SharePoint paging

[Justin]

I am using a kendoGrid bound to a SharePoint list. I am able to get the grid to work fine with pagination. The problem is that I am using large datasets so the query performance is slow due to returning the total record count. SharePoint provides a way to do paging without using a total record count. Queries return a "next" and "previous" page url (see screenshot below). I would rather use this method for the sake of performance. Is there a way to have a custom pager with just a next and previous button and set the click event of those buttons?

[Neli]

Hi Justin,

In order to display just previous and next buttons you can set the pageable.numeric and pageable.info option to false.

You can bind the change event to the Grid pager and get the selected page as follows:

 $(".k-grid-pager").data('kendoPager').bind('change', function(e){
            console.log('Selected page ' + e.index)
})

I hope this helps.

Regards,

Neli

[Justin]

Thanks for your reply Neil. I'm not sure how much that helps me. I need to set the click event of the previous and next button before the page changes. Is there a way to do that after the data is returned by the read function?

[Neli]

Hi Justin,

I am afraid that it is not possible to bind click handlers to the default previous and next buttons in the Grid pager before the page is changed. The only event that the Pager provides is the change event mentioned previously. 

What else you could try If adding custom buttons to the Grid pager is suitable in your scenario is to hide the Pager default buttons. Then you can append custom button elements to the Pager, and bind the click handler to them.

$(".k-grid-pager .k-pager-numbers-wrap .k-pager-nav").hide()

$(".k-grid-pager .k-pager-numbers-wrap").append('<button id="custom-prev" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button"><span id="custom-prev-icon"></span></button>')
kendo.ui.icon($("#custom-prev-icon"), { icon: 'k-i-chevron-right' }); 

 $('#custom-prev').on('click', function(){
       alert('Custom button is clicked')
})

However, the implementation of the click event handlers would be entirely up to you. Here is a Dojo where the snippet from above is implemented and an alert appears on a button click - https://dojo.telerik.com/@NeliKondova/iDAnESOf

I hope this helps.

Regards,

Neli

[Justin]

Thanks Neil. I almost have a working solution but I'm having trouble with the parameters sent to the server.

I'm using the requestEnd handler to set the button's click event and change the data source's read url when the next page button is clicked. I end up with duplicated parameters which causes the server call to fail (seen in the screenshot below). How can I prevent the grid from passing parameters once I set the url manually? The url contains all the parameters I need.

requestEnd: function (e) {
	if (e.response.d?.__next) {
		$("#custom-next").unbind("click").on("click", function () {
			grid.dataSource.transport.options.read.url = e.response.d?.__next;
			grid.dataSource.read();
		});
	}
	else {
		$("#custom-next").hide();
	}
}

[Martin]

Hello, Justin,

From what we can see the parameters are coming from the __next field. Could you please try stripping them to see if our logic would be enough to handle the parameters?