How to perform custom paging in Ext Grid - asp.net

Question

I have following Ext Grid,
Ext.onReady(function () {
var dataStore = new Ext.data.JsonStore({
proxy: {
type: 'ajax',
url: 'Default.aspx/CustomerData', //'web.aspx',
headers: { 'Content-type': 'application/json' },
reader: {
type: 'json',
root: 'd',
totalProperty: 'totalCount'
}
},
fields: [
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'age', type: 'string' },
{ name: 'phone', type: 'string' }
],
pageSize: 10
});
dataStore.load({ params: { start: 0, limit: 25} });
var myGrid1 = new Ext.grid.GridPanel({
id: 'customerslist',
store: dataStore,
columns: [
{ id: "firstname", header: "First Name", width: 100, dataIndex: "firstname", sortable: true },
{ header: "Last Name", width: 100, dataIndex: "lastname", sortable: true },
{ header: "Age", width: 100, dataIndex: "age", sortable: true },
{ header: "Phone", width: 100, dataIndex: "phone", sortable: true }
],
autoLoad: false,
stripeRows: true,
autoHeight: true,
width: 450,
height: 300,
dockedItems: [{
xtype: 'pagingtoolbar',
store: dataStore,
dock: 'bottom',
displayInfo: true
}],
renderTo: 'grid1'
});
});
I have following server side code for custom paging,
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
public static List<tblCustomerList> CustomerData(int rowSize, int pageNumber)
{
DataGridEntities _dbContext = new DataGridEntities();
//Code for custom paging
Customer customer = new Customer();
customer.TotalRecords = //code for total record count
customer.Details = //fetch record based on page number and page size
return customer.Details;
}
}
How can I achieve custom Paging in this.

Answer 1

Paging is done with start and limit per default. And if you don't want to rewrite the whole chain I recommend you to leave it as it is an simply add two more params, in your case
dataStore.load({
params: {
rowSize: dataStore.pageSize,
pagenNumber: dataStore.currentPage || 1
}
});
In addition you will need either a custom paging navigation, a customized version of the paging toolbar or a beforeload eventhandler like this:
function(store,operation,eo){
operation.params: {
rowSize: store.pageSize,
pagenNumber: store.currentPage +1 // I assume that this was not updated before a successful load
}
}
This is untested and should show you how it can be done.