I am bind the igGrid with ajax call which return a json on button click. i used the above solution and my json returns from controller mentioned below :

myrowData                      [Oject{id="dfdjk",name="duyety"}]

TotalRecordsCount           1000  

function getFeature() {
var feature= [
{
name: "Paging",
type: "local",
pageSize: pageSize,
pageCountLimit: 0,
recordCountKey: "TotalRecordsCount"// as u mentioned in your suggestion
}]}

function grid(grid1, columns, data, getFeature) {

igloader("igGrid.*");
$.ig.loader(function () {
$(grid1).igGrid({
autoGenerateColumns: false,
columns: columns,
dataSource: data,
features: getFeature
});

});
}

 Actually i target is to get 100 records at time from the server by using ajax call. When i am doing the same then iggrid shows the number of count as page size but that is not required.   If i have TotalRecordsCount -  1000  records then i will divide with my show records dropdown value and same value i want populate to pagger dropdown.. Any way to add new item to pagger dropdown which below of the grid. If any please share some example and  sample code for the same. Its very urgent ..

I want in this way so that on page change event i can get call the same ajax call to get the next set of 100 records for the server.

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.

Hello Rocky, 

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

Thanks,
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,

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

Hope this helps,
Martin Pavlov
Infragistics, Inc.