Paging with .asmx WebService

[AbhilashDK2018Participant]

Hi,

I ma trying to use server side paging feature along with an .asmx webservice. I want to fetch 50 records first and then based on user needs I want to fetch remaining records. Below is the code I came up by following some posts. But I am only able to get 50 records. Nothing more than that. Could anybody help me in moving ahead?

I am confused about sending pagenum and pagesize parameters to my webservice. If you can explain how to do it in my scenario, i would be helpful.
$(document).ready(function () {
let data = { pagenum: 0, pagesize: 50 };
var source = {

datatype: “json”,
datafields: [
//Around 50 fields
],
formatdata: function (data) {
return { pagenum: data.pagenum, pagesize: data.pagesize }
},
localdata: data
};
$.ajax({
type: ‘GET’,
dataType: ‘json’,
async: true,
data: data,
url: ‘http://localhost:63722/WebService.asmx/Report’,
cache: false,
contentType: ‘application/json; charset=utf-8’,
success: function (data) {
console.log(‘Setting LocalData’);
//console.log(data.d);
$(‘#loading_img’).hide();
source.localdata = data.d;
var dataAdapter = new $.jqx.dataAdapter(source,
{ contentType: ‘application/json; charset=utf-8’,
loadError: function (jqXHR, status, error) {
alert(error);
},
downloadComplete: function () {
// update the totalrecords count.
$.ajax({
url: ‘http://localhost:63722/WebService.asmx/GetTotalRowsCount’,
contentType: ‘application/json; charset=utf-8’,
async: false,
success: function (data) {
source.totalrecords = data.d;
}
});
}
});

$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
columnsresize: true,
columnsheight: 50,
theme: ‘metro’,
pageable: true,
pagesize: 50,
rowsheight: 100,
pagesizeoptions: [‘100’, ‘200’],
autorowheight: true,
rendergridrows: function (args) {
return args.data;
},
columns: [
//Around 50 fields

]
});
$(‘#pagerjqxgrid’).css({‘z-index’:’0′});
},
error: function (err) {
console.log(err);
alert(‘Error’);
}
});

});

Thanks in Advance

[HristoParticipant]

Hello AbhilashDK2018,

It looks like you set “pagesize: 50”.
I would like to suggest you look at this tutorial about the WebService:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-web-service-grid.htm?search=

Also, please, take a look at this demo: https://mvcexamples.jqwidgets.com/widgets/datatable/light
You could determinate the totalrecords into the DataAdapter’s source.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[AbhilashDK2018Participant]

Hi Hristo Hristov,

Thank you for the reply. I have a WebService with takes pagenum and pagesize as parameters. How do I pass these parameters to WebService. I am not asking about the $.ajax’s data property. I am finding it difficult to understand how jqxGrid does this. Will passing these parameters should be taken care by me or will jqxGrid takes care of that.

I am following the below tutorial:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-paging.htm

I know this is not the post for loading data using WebService, but it is for server side paging. I am able to load data through WebService. I need to implement Server Side paging. The total record count is 25000 and above. I would like to display 50 rows per page. Is there a tutorial where somebody have achieved it.

What I am not able to understand in the above blog is how to pass pagenum and pagesize parameters. My WebService throws error saying that pagesize parameter is missing.

Thanks in Advance

[HristoParticipant]

Hello AbhilashDK2018,

Once you create correct implementation the Grid cares about the rendered records.
You could see how it is defined in this demo, it is for the PHP but the approach is the same:
https://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverpaging.htm?light
In the beforeprocessing callback you could set the size of the all records – source.totalrecords and from the arguments of the callback, you receive the data from the server. There you set on some field number of all rows in the mentioned demo it is 'TotalRows' => $total_rows,.
Or somewhere before the data be rendered you should set a number of all rows (ex. beforeLoadComplete or downloadComplete).

downloadComplete: function (data) {
	source.totalrecords = data.TotalRows;
}

In the server paging, it is enabled virtualmode: true and in combination with it is rendergridrows callback.
Which is care about the rendered rows on demand. In “rendergridrows” callback has an argument which has the records and also startindex and endindex which is created by the Grid depends on the ‘page’ and the ‘pagesize’.

About the formatdata callback is it created for the demo purposes (in the mentioned tutorial) and if you do not have such implementation it is not necessary to add it.
This callback sends information to the server that you could use there for specific logic. More information about the formatData callback you could find in the API Documentation about the DataAdapter: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm?search=data

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts