Hello Rocky,

Attached you can find a sample demonstrating how to implement custom remote paging functionality. 

Hope this helps,
Martin Pavlov
Infragistics, Inc. 

Hello Rocky,

I'll try to create a working sample and will write back tomorrow.

Best regards,
Martin Pavlov
Infragistics, Inc. 

please find the below sample code

controller:
public ActionResult Show(string id,int page = 1,int pageSize=100, DateTime? minDate = null, DateTime? maxDate = null)
{
var model = new ShowModel();
model.Id = id;
model.TotalRecordsCount = myList.Count;
model.Entries = myList.Skip(pageSize * (page - 1)).Take(pageSize).ToArray();
return new JsonNetResult(model);
}

html:

js:
$(document).ready(function () {

//igGrid Initialization
getData(id, new Date(Date.parse(minDateId.val(), "MM/dd/yyyy")), new Date(Date.parse(maxDateId.val(), "MM/dd/yyyy"))).done(function (data, textStatus, jqXHR) {
igGrid($("#grid1"), getColumns(), data.LogEntries, getFeature());
});

///Ajax data call from controller
function getData(Id,minDate, maxDate) {

var wsUrl = "/controller/Show/";
var oParams = {
id: Id,
minDate: minDate,
maxDate: maxDate
};

return $.ajax({
url: wsUrl,
data: JSON.stringify(oParams),
timeout: 360000,
});
}

//rebind the binding grid on button click

submit.click(function (event) {
getData(id,mindate, maxdate).done(function (data, textStatus, jqXHR) {
$("#grid1").igGrid("option", "dataSource", data.Entries);

});}

//get columns
function getColumns() {
var columns = [];
columns = [

{ headerText: "Date", key: "Date", dataType: "Date" },
{ headerText: "Name", key: "Name", dataType: "string" },
{ headerText: "Company Name", key: "Company", dataType: "string"},

];
return columns;
}

//Set features
function getFeature() {
var features= [
{
name: "Paging",
type: "remote",
pageSize: pageSize,
pageCountLimit: 0,
recordCountKey: "TotalRecordsCount"
},
{
name: "RowSelectors",
enableRowNumbering: true
},
{
name: "Sorting",
type: "local"
},
{
name: "Selection",
mode: "cell"
},
{
name: "Filtering",
type: "local",
filterDropDownItemIcons: false,
filterDropDownWidth: 200
},
{
name: "Tooltips"
},
{
name: "Resizing"
},
{
name: "Hiding"
},
{
name: "GroupBy"
}
];
return features;
}

//loader function
function grid(grd, columns, data, oSettings) {
igloader("igGrid.*");
$.ig.loader(function () {
grd.igGrid({
width: gridWidth,
autoGenerateColumns: false,
columns: columns,
dataSource: data,
features: oSettings
});

});
}});

So from pagechanged event i want rebind the igGrid by next set of 100 records..

$("#grid1")live('iggridpagingpageindexchanged', function(event, args) {
console.log('pageIndexChanged event fired. Page Index = ' + args.pageIndex);

Show(id,args.pageIndex,int pageSize=100, DateTime? minDate = null, DateTime? maxDate = null)

});

By the above way it will get the iggrid data for next 100 records.

but it can only show when page numbers in dropdown already renders which i am not able to do. so help me to edit the pager information like pager dropdown for showing page numbers. 

Very thanks for the all quick reply.. Thank you in advance...

Hello Rocky, 

Can you provide a sample code, so I can work on it?

Thanks,
Martin Pavlov
Infragistics, Inc. 

I tried in the change to type: "remote", but it doesn't work for me.. And for igGrid data i m using ajax call as below

function getData(lId, minDate, maxDate) {

var wsUrl = "/controller/action/";
var oParams = {
id: Id,
minDate: minDate,
maxDate: maxDate
};

return $.ajax({
url: wsUrl,
data: JSON.stringify(oParams),
timeout: 360000,
});
}

which produces the data in sample format:

So i am not getting way to change pager dropdown items equal to total page count.

please let me know how can i proceed further. It will be very helper.