Develop Reference

Paging is not working in jqgrid, loadonce : false

I want to display json data in jqgrid. I have given loadonce as false, the total records is showing properly in grid pager but the page index is always 1 of 1. any help is appreciated.
Code:
var LoadCDHDetailsGrid = function (backstageViewByVal, bossStoreDate, filterflag, getBackStageDataFromCache, inboundViewType, carrierViewBy, featured) {
BackstageInboundbuildSearchFilters();
var mygridwidth = $('.tablegriddiv').width();
var defaultSort = "expectedDeliveryDate";
var url = featured ? '/Inbound/RetrieveFeaturedInboundData/' : '/Inbound/RetrieveCDHInboundDetailsData/';
jQuery("#BackStageGrid").jqGrid({
url: url,
postData: { searchfilters: JSON.stringify(BackstageAdvfilters), advf: advf, customsortname: customsortname, customsortorder: customsortorder, filterflag: filterflag, storeDt: bossStoreDate, GetFromCache: getBackStageDataFromCache, packageType: inboundViewType, selectedviewTransfers: backstageViewByVal, carrierView: carrierViewBy },
datatype: 'json',
mtype: 'POST',
colNames: ['Tracking #', 'Carton #', 'Delivery Date', 'Status', 'Status Date', 'Status Time'],
colModel: [
{ name: 'bakTrackingNbr', jsonmap: 'trackingLabelNbr', index: 'trackingLabelNbr', width: 170, formatter: commonWorkloadFunctions.trackingHyperlinkFormatter, unformat: commonWorkloadFunctions.trackingnHyperlinkUnFormatter, align: 'center', search: true, classes: "underlineres" },
{ name: 'bakCarton', jsonmap: 'cartonNumber', index: 'cartonNumber', width: 145, align: 'center', search: true, formatter: commonWorkloadFunctions.cdhCartonHyperlinkFormatter, unformat: commonWorkloadFunctions.cartonHyperlinkUnFormatter, classes: "underlineres" },
//Added for SSW2- 292
{ name: 'bakExpectedDelDate', jsonmap: 'expectedDeliveryDateTime', index: 'expectedDeliveryDate', width: 125, align: 'center', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y" }, search: true },
{
name: 'bakStatus', jsonmap: 'status', index: 'Status', width: 150, align: 'center', formatter: 'select',
edittype: 'select', editoptions: {
value: workloadGridDropdownColumnsList.statusListBackstage(),
defaultValue: 'ALL',
multiple: true,
width: '200'
},
stype: 'select', searchoptions: {
sopt: ['eq', 'ne'],
value: workloadGridDropdownColumnsList.statusListInBoundBackstage(),
attr: { multiple: 'multiple', size: 5 },
dataInit: dataInitMultiselect
}
},
{ name: 'bakStatusDate', jsonmap: 'statusDate', index: 'StatusDate', width: 100, align: 'center', search: true },
{ name: 'bakStatusTime', jsonmap: 'statusTime', index: 'StatusTime', width: 80, align: 'center', search: false },
],
pager: '#BackStageGridPager',
rowNum: 30,
width: mygridwidth,
gridview: true,
ignoreCase: true,
cmTemplate: { resizable: false },
sortname: 'trackingLabelNbr',
sortname: defaultSort,
viewrecords: true,
sortorder: 'asc',
sortable: false,
scrollable: true,
loadonce: false,
shrinkToFit: true,
onSelectRow: function (rowid, status, e) {
backstageGridBuiltinFunctions.backstageGridOnSelectRow(rowid, status, e);
},
beforeRequest: function () {
if (toolbarBackStatusSel.length == 0) {
$("input:checkbox[name=multiselect_gs_bakStatus]:checked").each(function () {
toolbarBackStatusSel.push($(this).attr('value'));
bakstatusValue += $(this).attr('value') + ",";
});
if (bakstatusValue.length >= 1 && advfilters !== '') {
for (var i = 0; i < advfilters.length; i++) {
if (advfilters[i].SearchingName == 'Status')
advfilters.splice(i, 1);
}
advfilters.push({ SearchingName: "Status", SearchingValue: (bakstatusValue.replace(/,\s*$/, '')) });
}
}
jQuery("#BackStageGrid").jqGrid('setGridParam', { postData: { searchfilters: JSON.stringify(advfilters), advf: advf, customsortname: customsortname, customsortorder: customsortorder, filterflag: filterflag, storeDt: bossStoreDate, GetFromCache: getBackStageDataFromCache, packageType: inboundViewType, selectedviewTransfers: backstageViewByVal, carrierView: carrierViewBy } });
if (typeof $("#gs_bakTrackingNbr").val() !== 'undefined') {
baktrackingNoValue = $("#gs_bakTrackingNbr").val();
}
if (typeof $("#gs_bakCarton").val() !== 'undefined') {
bakcartonNoValue = $("#gs_bakCarton").val();
}
if (typeof $("#gs_bakExpectedDelDate").val() !== 'undefined') {
bakexpectedDelDateValue = $("#gs_bakExpectedDelDate").val();
}
if (typeof $("#gs_bakPackageType").val() !== 'undefined') {
bakpackageTypeValue = $("#gs_bakPackageType").val();
}
if (typeof $("#gs_bakStatusDate").val() !== 'undefined') {
bakstatusDateValue = $("#gs_bakStatusDate").val();
}
if (typeof $("#gs_bakStatusTime").val() !== 'undefined') {
bakstatusTimeValue = $("#gs_bakStatusTime").val();
}
},
onPaging: function () {
filterflag = false;
getBackStageDataFromCache = true;
},
loadComplete: function (data) {
backstageGridBuiltinFunctions.backstageGridViewLoadComplete(data);
},
loadError: function (xhr, status, error) {
filterflag = true;
getBackStageDataFromCache = false;
commonFunctions.spmDialogueAlert("Data service connectivity error.");
commonWorkloadFunctions.hideLoadingMessage();
},
height: "400",
timeout: 600000
}).trigger("reloadGrid");
var theGrid = jQuery("#BackStageGrid");
theGrid.jqGrid('navGrid', '#BackStageGridPager', { refreshstate: 'current', edit: false, refresh: false, search: false, del: false, add: false });
theGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch, beforeSearch: BackStageInboundBeforeSearchHandler });
};
I have tried using loadonce as true. then the pagination is working, but when searching a value the grid is blank. no records is returning. my data is returning from a web service. the is no issue with the data.

I was able to resolve the issue by sending record count, page index along with data. which I was not sending previously.

How To Refresh Google Chart When updating jqGrid

I have a jqGrid in a user control which is placed on an .aspx page. I also have a Google Graph to display the grid data on the same page. Both the grid and chart use Handler1.aspx as the url. Handler1.ashx makes a call to a SQL server and returns JSON.
When initially loading the page, I can see both the graph and the chart go into Handler1.ashx to get the data - so I get a grid and a nice line chart.
The issue is when I update data in the grid, the chart is not updated.
I have tried the SO solution Here without success. I have also tried a button on the page that calls drawChart(). Here is my grid:
$(function () {
$('#dataGrid').jqGrid({
url: 'Handler1.ashx',
datatype: 'json',
mtype: 'POST',
colNames: ["Days", "Origin IB Loads", "Origin OB Loads", "Dest IB Loads", "Dest IB Loads", "ID"],
colModel: [
{ name: 'Days', index: 'Days', width: 100, editable: true, editrules: { required: true }, },
{ name: 'OrigIB', index: 'OrigIB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'OrigOB', index: 'OrigOB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'DestIB', index: 'DestIB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'DestOB', index: 'DestOB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'ID', index: 'ID', width: 80, Key: true, hidden: true }
],
loadonce: false,
pager: '#pagingGrid',
rowNum: 10,
rowList: [10, 20, 30, 'All'],
viewrecords: true,
gridview: true,
autoencode: true,
loadComplete: function (data) {
$(".ui-pg-selbox option[value='All']").val(10000);
},
caption: 'Graph Data',
editurl: 'Handler2.ashx'
});
jQuery("#dataGrid").navGrid("#pagingGrid", {
edit: true,
add: true,
del: true,
search: false,
//searchtext: "Search",
refresh: true
},
{
closeAfterEdit: true,
reloadAfterSubmit: true
},
{
closeAfterAdd: true,
reloadAfterSubmit: true
},
{
reloadAfterSubmit: true
});
})
And here is my Chart - including the grid user control and chart div:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "handler1.ashx",
dataType: "json",
async: "false",
success: function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Days');
data.addColumn('number', 'Origin IB Loads');
data.addColumn('number', 'Origin OB Loads');
data.addColumn('number', 'Dest IB Loads');
data.addColumn('number', 'Dest OB Loads');
for (var i = 0; i < jsonData.length; i++) {
data.addRow([jsonData[i].Days, jsonData[i].OrigIB, jsonData[i].OrigOB, jsonData[i].DestIB, jsonData[i].DestOB]);
}
var options = {
title: 'Single Lane Route Quote',
is3D: true,
curveType: 'function',
legend: { position: 'bottom' },
vAxis: { title: "Days" },
hAxis: { title: "Loads" }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
});
}
<My:GridControl ID ="gridControl" runat="server" />
<div id="curve_chart" style="width: 1000px; height: 500px"></div>
How can I get the chart to refresh after making an update in the grid?

what if you tried something like this...
Load Google
Load jqGrid
Load Chart when loadComplete fires on jqGrid
this will allow google to kick things off, then when the grid updates, so will the chart...
google.charts.load('current', {
callback: loadDataGrid,
packages: ['controls', 'table']
});
function loadDataGrid() {
$('#dataGrid').jqGrid({
url: 'Handler1.ashx',
datatype: 'json',
mtype: 'POST',
colNames: ["Days", "Origin IB Loads", "Origin OB Loads", "Dest IB Loads", "Dest IB Loads", "ID"],
colModel: [
{ name: 'Days', index: 'Days', width: 100, editable: true, editrules: { required: true }, },
{ name: 'OrigIB', index: 'OrigIB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'OrigOB', index: 'OrigOB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'DestIB', index: 'DestIB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'DestOB', index: 'DestOB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'ID', index: 'ID', width: 80, Key: true, hidden: true }
],
loadonce: false,
pager: '#pagingGrid',
rowNum: 10,
rowList: [10, 20, 30, 'All'],
viewrecords: true,
gridview: true,
autoencode: true,
loadComplete: function (data) {
$(".ui-pg-selbox option[value='All']").val(10000);
var chartData = new google.visualization.DataTable();
chartData.addColumn('number', 'Days');
chartData.addColumn('number', 'Origin IB Loads');
chartData.addColumn('number', 'Origin OB Loads');
chartData.addColumn('number', 'Dest IB Loads');
chartData.addColumn('number', 'Dest OB Loads');
for (var i = 0; i < data.length; i++) {
chartData.addRow([data[i].Days, data[i].OrigIB, data[i].OrigOB, data[i].DestIB, data[i].DestOB]);
}
var options = {
title: 'Single Lane Route Quote',
is3D: true,
curveType: 'function',
legend: { position: 'bottom' },
vAxis: { title: "Days" },
hAxis: { title: "Loads" }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(chartData, options);
}
},
caption: 'Graph Data',
editurl: 'Handler2.ashx'
});
jQuery("#dataGrid").navGrid("#pagingGrid", {
edit: true,
add: true,
del: true,
search: false,
//searchtext: "Search",
refresh: true
},
{
closeAfterEdit: true,
reloadAfterSubmit: true
},
{
closeAfterAdd: true,
reloadAfterSubmit: true
},
{
reloadAfterSubmit: true
});
}

jqxGrid: conditionally add edit button per row

i have jqxGrid and display data fine using ajax request and everything is workig fine .
My problem : in grid coulmns i added edit button but i want to add this button conditionally depended on values of another field
My Code :
$(document).ready(function () {
$("#btnsearchHistory").click(function () {
var txtfrom = $('#txtfrom').val();
var txtto = $('#txtto').val();
var terminalId = $('#txtMerchantAccounthistory').val();
var SOFAccount = $('#txtsalesNumber').val();
var statMsg = $('#drpStatMsg').val();
var formatedData = '';
var totalrecords = 0;
if (txtfrom == "") {
alert("Select Valid From Date");
event.returnValue = false;
return false;
}
if (txtto == "") {
alert("Select Valid To Date");
event.returnValue = false;
return false;
}
var source = {
datatype: "json",
datafields: [
{ name: 'Id' },
{ name: 'TerminalId' },
{ name: 'UserName' },
{ name: 'Error' },
{ name: 'Date' },
{ name: 'SalesAccount' },
{ name: 'BillTypeCode' },
{ name: 'Amount' },
{ name: 'BillerCode' },
{ name: 'BankID' },
{ name: 'ReqId' }
],
sort: function () {
$("#grid").jqxGrid('updatebounddata', 'sort');
},
filter: function () {
$("#grid").jqxGrid('updatebounddata', 'filter');
},
beforeprocessing: function (data) {
var returnData = {};
data = data.d;
totalrecords = data.count;
returnData.totalrecords = data.count;
returnData.records = data.data;
if (data.data != null) {
return returnData;
}
return data;
},
type: 'Get',
sortcolumn: 'Id',
sortdirection: 'desc',
formatdata: function (data) {
data.pagenum = data.pagenum || 0;
data.pagesize = data.pagesize || 10;
data.sortdatafield = data.sortdatafield;
data.sortorder = data.sortorder || 'asc';
data.filterscount = data.filterscount || 0;
formatedData = buildQueryString(data);
return formatedData;
},
url: '/WS/WS.asmx/SearchTransferLog',
data: { fromDate: JSON.stringify(txtfrom), toDate: JSON.stringify(txtto), terminalId: JSON.stringify(terminalId), SOFAccount: JSON.stringify(SOFAccount), statMsg: JSON.stringify(statMsg) },
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: 'application/json; charset=utf-8',
loadError: function (xhr, status, error) {
alert(error);
}
});
var cols = [
{ text: 'Id', dataField: 'Id', hidden: true },
{ text: 'رقم حساب التاجر', dataField: 'TerminalId', width: '28%', align: "right", cellsalign: "right", hidden: true },
{ text: '', dataField: 'UserName', width: '28%', align: "right", cellsalign: "right", hidden: true },
{ text: 'الحالة', dataField: 'Error', width: '28%', align: "right", cellsalign: "right" },
{ text: 'تاريخ الدفع', dataField: 'Date', width: '18%', align: "right", cellsalign: "right" },
{ text: 'حساب الدفع', dataField: 'SalesAccount', width: '15%', align: "right", cellsalign: "right" },
{ text: 'توقعات الاغلاق على', dataField: 'BillTypeCode', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'القيمة المحولة', dataField: 'Amount', width: '15%', align: "right", cellsalign: "right" },
{ text: 'توقعات الاغلاق على', dataField: 'BillerCode', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'توقعات الاغلاق على', dataField: 'BankID', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'توقعات الاغلاق على', dataField: 'ReqId', width: '15%', align: "right", cellsalign: "right", hidden: true },
{
text: '', datafield: 'Edit', columntype: 'button', width: '100px', cellsrenderer: function () {
return "استعلام عن الحالة";
}, buttonclick: function (row) {
var id = $("#detail_grid").jqxGrid('getcellvalue', row, "Id");
alert(id);
//RefreshTransferStatus();
}
}
];
$("#detail_grid").jqxGrid({
source: dataAdapter,
pageable: true,
autoheight: true,
virtualmode: true,
sorttogglestates: 1,
filterable: true,
sortable: true,
rtl: true,
altrows: true,
width: '100%',
rendergridrows: function (args) {
return args.data;
},
columns: cols
});
});
});

Custom paging in Jqgrid using WCF service and asp.net

Here is my Code for binding Jqgrid, in my scnario i am fetching 25000 records which is making grid very slow, so i need to implement custom paging in JqGrid, so that only 50 records should load at once.
<script type="text/javascript">
$(document).ready(function () {
$("#TableDataGrid").jqGrid({
url: '/DataHandler.ashx?MethodName=TFNUserView&GroupNameQuery=<%=Master.GroupName %>&isadminCheck=<%=Master.Admin %>&isActiveCheck=<%=false %>',
datatype: "json",
colNames: ['ID', 'TFN', 'Group', 'Sub Group', 'Tactic', 'Sub Tactic', 'Micro Tactic',
'Campaign Name', 'Campaign Start Date', 'Campaign End Date', 'PCC',
'Segmentation', 'Vanity Description', 'Message', 'Notes', 'Organization', 'Product', 'Owner', 'Agency', ],
prmNames: { id: 'TFN' },
colModel: [
{
name: 'ID', index: 'ID', hidden: true,
editoptions: { disabled: true }, width: 80, "sortable": true, editable: true, sorttype: 'integer',
searchoptions: {
sopt: ['eq'], dataInit: function (elem) {
$(elem).height(21).width(40);
}
}, searchrules: { required: true }
},
{
name: 'TFN', index: 'TFN', key: true, edittype: 'select', formatter: 'showlink', width: 110,
formatoptions: { baseLinkUrl: 'TFNEdit.aspx' }, editable: true, sorttype: 'integer',
searchoptions: {
sopt: ['eq', 'ne'],
dataInit: function (elem) {
$(elem).height(21).width(60);
}
}, searchrules: { required: true }
},
{ name: 'TeamName', index: 'TeamName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'LanguageGroupName', index: 'LanguageGroupName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'TacticName', index: 'TacticName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'SubtacticName', index: 'SubtacticName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'MicrotacticName', index: 'MicrotacticName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'MarketingCampaignName', index: 'MarketingCampaignName', width: 190, editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{
name: 'MarketingCampaignStartDate', index: 'MarketingCampaignStartDate', width: 190, editable: true, sorttype: 'date',
searchoptions: { sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le'] }, formatter: 'date', datefmt: 'm/d/Y', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' },
editoptions: {
size: 12, dataInit: function (elem) {
setTimeout(function () {
$(elem).datepicker({ showOn: 'button' });
}, 100);
}
}, searchrules: { required: true }
},
{
name: 'MarketingCampaignEndDate', index: 'MarketingCampaignEndDate', width: 190, editable: true, sorttype: 'date',
searchoptions: { sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le'] }, formatter: 'date', datefmt: 'm/d/Y', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' },
editoptions: {
size: 12, dataInit: function (elem) {
setTimeout(function () {
$(elem).datepicker({ showOn: 'button' });
}, 100);
}
}, searchrules: { required: true }
},
{ name: 'PCC', index: 'PCC', editable: true, sorttype: 'text', width: 190, searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'Segmentaion', index: 'Segmentaion', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'VanityDescription', index: 'VanityDescription', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'GeneralNotes', index: 'GeneralNotes', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'Notes', index: 'Notes', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'Organization', index: 'Organization', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true }, hidden: checkAdmin() },
{ name: 'Product', index: 'Product', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true }, hidden: checkAdmin() },
{ name: 'OwnerName', index: 'OwnerName', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } },
{ name: 'Agency', index: 'Agency', editable: true, sorttype: 'text', searchoptions: { sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'] }, searchrules: { required: true } }
],
rowNum: 20,
rowList: [20, 100, 1000,10000],
pager: $('#DivPager'),
viewrecords: true,
loadonce: true,
sortable: true,
width: "100%",
autowidth: false,
shrinkToFit: false,
forceFit: false,
ignoreCase: true,
caption: "TFN User View"
});
$("#TableDataGrid").jqGrid('filterToolbar', { searchOperators: true });
$("#TableDataGrid").jqGrid('navGrid', '#DivPager', { add: false, edit: false, del: false, cancel: true, save: true, addtext: "Add", edittext: "Edit", deltext: "Delete", searchtext: "Search", refreshtext: "Refresh" },
$("#TableDataGrid").setGridParam({
onPaging: function (pgButton) {
var pageNumber = $("#TableDataGrid").getGridParam("page");
var lastPage = $("#TableDataGrid").getGridParam("lastpage");
alert(pageNumber + "" + lastPage);
//...
}
});
// var requestedPage = $("#grid").getGridParam("page");
// var lastPage = $("#grid").getGridParam("lastpage");
</script>
Here is json response
response = Convert.ToString(TfnUserView(groupName,isAdminCheck,isActiveCheck));
I am calling a WCF service here is code
public string TfnUserView(string groupName, string isAdminCheck)
{
using (TFNEntities db = new TFNEntities())
{
var serializer = new JavaScriptSerializer();
serializer.MaxJsonLength = Int32.MaxValue;
string[] groupNames = groupName.Split(',');
string jsonData = "";
var query = from st in db.TFN_Campaigns
join tac in db.TFN_Records on st.TFN equals tac.TFN
join rou in db.TFN_ROUTING_REFERENCE_VIEW on st.TFN equals rou.TOLL_FREE_NO
where st.Status == false && tac.IsUnable == false
select new
{
st.TFN,st.Language,st.TeamName,st.CreatedOn,st.Status,tac.IsUnable,rou.ROUTE_TYPE ,
rou.ROUTE_DESCRIPTION
};
if (isAdminCheck == "True" || isAdminCheck == "true")
{
jsonData = serializer.Serialize(query.ToList().OrderBy(item => item.ROUTE_DESCRIPTION).Take(200254));
}
else
{
jsonData = serializer.Serialize(query.Where(item => groupNames.Contains(item.TeamName)).OrderBy(i=>i.ROUTE_DESCRIPTION).Take(25000));
}
return jsonData;
}
}

First of all, this link : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager
will help you configure paging in Jqgrid.
And then probably you can pass two more parameters to your WCF service, page and rowNum. Then use skip function along with take function in your linq like below.
jsonData = serializer.Serialize(query.ToList().OrderBy(item => item.ROUTE_DESCRIPTION).Skip(page * rowNum).Take(rowNum));
This will return specific number on records that you want to display in one page from WCF.

Setting default Value Inline Add Jqgrid

Currently I have a requirement in a system where I need to repeat much of the data from the last row entered.
Actualy this is my Grid:
$('#list').jqGrid({
colNames: ['VendedorId', 'Vendedor', 'Especie', 'Cabezas', 'Kilos', 'Precio', 'Guías Venta', 'Vencimiento'],
colModel: [
{ hidden: true, name: 'VendedorId' },
{ editable: true, width: 160, edittype: 'select', editoptions: { dataUrl: '/Clientes/CmbClientes' }, editrules: { required: true }, name: 'Vendedor' },
{ editable: true, width: 70, edittype: 'select', editoptions: { dataUrl: '/Especies/CmbEspecie' }, editrules: { required: true }, name: 'Especie' },
{ align: 'right', width: 50, editable: true, editoptions: { size: 3, maxlength: 3 }, editrules: { number: true }, formatter: 'number', formatoptions: { decimalPlaces: 0 }, name: 'Cabezas' },
{ align: 'right', width: 50, editable: true, editrules: { number: true }, formatter: 'number', formatoptions: { decimalPlaces: 0 }, name: 'Kilos' },
{ align: 'right', width: 50, editable: true, editrules: { number: true, required: true }, formatter: 'currency', formatoptions: { prefix: '$',decimalPlaces: 2 }, name: 'Precio' },
{ editable: true, width: 50, editoptions: { maxlength: 20 }, name: 'GuiasVenta' },
{ align: 'right', width: 70, editable: true, editoptions: { size: 3, maxlength: 3 }, editrules: { number: true, required: true }, formatter: 'number', formatoptions: { decimalPlaces: 0 }, name: 'Vencimiento' }
],
url: '#Url.Action("ListVendedores")',
datatype: 'json',
editurl: '#Url.Action("SaveVendedor")',
mtype: 'POST',
pager: '#vendedoresPager',
prmNames: { id: 'RemateId' },
rowList: [5, 10, 15, 20],
sortname: 'FeriaId',
viewrecords: true,
width: 850
}).jqGrid('navGrid', '#vendedoresPager', { add: false, edit: false, del:true ), search: false },{},{},{ url: '/Remates/BorrarVendedor' }).
jqGrid('inlineNav', '#vendedoresPager',
{
add : true,
edit : true,
save : true,
addParams: {
addRowParams: {
position: "afterSelected",
keys: true,
extraparam: {
...
}
}
},
editParams: {
keys: true,
extraparam: {
...
}
}
});
When adding the first row no default data, but then fields Vendedor, Especie, Guías Venta and Vencimiento should repeat the last entered.
In this scenario I imagine two possible solutions, one is using the event jqGridInlineEditRow, and the other is using autocomplete.
Have read this Question about qGridInlineEditRow. But in this case as I can get the data from the last row of the grid and how it should load the data into the new row.
And read this Question about autocomplete.
Maybe there other solutions that can read to get a better approximation to the solution.
Can anyone help?
update 15/04/2013
i replace the Add button for a custom button this is the code:
$("#Agregar").click(function () {
var parameters =
{
initdata: {},
position: "first",
useDefValues: true,
useFormatter: false,
addRowParams: {
keys: true,
extraparam: {
...
},
aftersavefunc: function (rowid) {
var grid = jQuery('#vendedores');
lastSavedAddData = grid.jqGrid("getRowData", rowid);
},
oneditfunc: function (rowid) {
var name;
var grid = jQuery('#vendedores');
for (name in lastSavedAddData) {
if (lastSavedAddData.hasOwnProperty(name)) {
$('#' + rowid +"_"+ name).val(lastSavedAddData[name]);
}
}
}
}
};
jQuery("#vendedores").jqGrid('addRow', parameters);
});
But this work only for text box but not for a combo

If I understand correctly your question the usage of jQuery UI Autocomplete is independent from initial filling of the input fields of the last added line during starting the next like to add.
It seems to me that you can save data saved in the last added line inside of aftersavefunc callback defined in addRowParams (or use jqGridInlineAfterSaveRow event alternatively). You can use oneditfunc to set the last entered values in the new like. For example you can use
addRowParams: {
position: "afterSelected",
keys: true,
extraparam: {
...
},
aftersavefunc: function (rowid) {
lastSavedAddData = $(this).jqGrid("getRowData", rowid);
},
oneditfunc: function (rowid) {
var name;
for (name in lastSavedAddData) {
if (lastSavedAddData.hasOwnProperty(name)) {
$("#" + $.jgrid.jqID(rowid + "_" + name)).val(lastSavedAddData[name]);
}
}
}
}
where lastSavedAddData should be defined in some outer scope. It's not tested code. I just wanted to show the main idea. You can extend the code of oneditfunc to support more different controls which you use in editing line.