My Jqgrid is freezing after 500 rows, page is blocking and if rows exceeds 1000 or 1500 then one browser alert is coming and saying that "long time to execute script .. do you wanna stop or continue.. " I am in no mans land can you please check my code and suggest me.. Am I doing any wrong.
one more issue is Why my loading GIF image and page stuck until all rows loaded?
$(document).ready(function ()
{
GetTrackOrdersData();
});
var searchFilter = {};
searchFilter.REFERENCE = "%";
searchFilter.INVOICENOR = "";
searchFilter.PRODNAME = "ALL";
searchFilter.ORDSTATUS = "WIP";
------etc ------
function GetTrackOrdersData()
{
var param = JSON.stringify(
{
'searchFilter': searchFilter
}); //This function is from JSon2.js
$.ajax(
{
type: "POST",
url: "TrackOrdersNew.aspx/GetTrackOrdersData",
data: param,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (mydata)
{debugger;
var mydata = $.parseJSON(mydata.d);
if (mydata != null && mydata.length == 0)
{
$('#divgrid').hide();
$('#gbox_list1').hide();
$("#jqgridWrapperdiv").hide();
alert('No Records');
}
else if(mydata != null)
{
var i = 0;
for (i; i <= mydata.length; i++)
{
jQuery("#list1").jqGrid('addRowData', i + 1, mydata[i]);
}
if (i > 0)
{
$('.ui-jqgrid-title').text('Track Orders (' + (i - 1) + ')');
}
$("#jqgridWrapperdiv").hide();
$('#divgrid').show();
}
},
error: function (mydata)
{
alert("Some thing went wrong because of network. Please reload the page. Code:100T"+mydata.responseText);
$('#divgrid').hide();
},
complete: function ()
{
$("#jqgridWrapperdiv").hide();
}
});
}
function bindGrid()
{
jQuery("#list1").jqGrid(
{
datatype: "local",
colNames: ['Customer', 'Delivery', 'TrackNo','Ref', 'JobNo', 'Type', 'Product', 'Status',
'EntryDate', 'Scheduled', 'Invoiced'
],
colModel: [
{
name: 'CUOH_CUST_CD',
index: 'CUOH_CUST_CD',
width: 100,
classes: 'pointer'
},
{
name: 'CUOA_DEL_CUST_CD',
index: 'CUOA_DEL_CUST_CD',
width: 69,
classes: 'pointer'
},
{
name: 'CUOH_TRAK_NO',
index: 'CUOH_TRAK_NO',
width: 70,
classes: 'pointer'
},
{
name: 'CUOH_SOURCE_REF',
index: 'CUOH_SOURCE_REF',
width: 70,
classes: 'pointer'
},
{
name: 'CUOH_JOB_NO',
index: 'CUOH_JOB_NO',
width: 60,
classes: 'pointer'
},
{
name: 'CUOH_ORDER_TYPE',
index: 'CUOH_ORDER_TYPE',
width: 65,
classes: 'pointer'
},
{
name: 'CUOL_DESCR_LOC',
index: 'CUOL_DESCR_LOC',
width: 155,
classes: 'pointer'
},
{
name: 'Status',
index: 'Status',
width: 100,
classes: 'pointer',
cellattr: function (rowId, value)
{
// additional parameter of cellattr: rawObject, cm, rdata are optional
if (value.indexOf("ompleted")!=-1)
{
return ' class="bcolor"';
}
}
},
{
name: 'CUOH_ENTRY_DATE_TIME',
index: 'CUOH_ENTRY_DATE_TIME',
formatter: 'date',
formatoptions:
{
srcformat: 'd/m/Y',
newformat: 'd/m/Y'
},
width: 77,
classes: 'pointer'
},
{
name: 'CUOH_SCHEDULE_DATE',
index: 'CUOH_SCHEDULE_DATE',
formatter: 'date',
formatoptions:
{
srcformat: 'd/m/Y',
newformat: 'd/m/Y'
},
width: 84,
classes: 'pointer'
},
{
name: 'CUOH_INVOICE_DATE_TIME',
index: 'CUOH_INVOICE_DATE_TIME',
formatter: 'date',
formatoptions:
{
srcformat: 'd/m/Y',
newformat: 'd/m/Y'
},
width: 72,
classes: 'pointer'
}],
//multiselect: true,
//rowList: [10, 20, 30, 40],
//pager: jQuery('#pager1'),
//rowList: [], // disable page size dropdown
//pgbuttons: false, // disable page control like next, back button
//pgtext: null, // disable pager text like 'Page 0 of 10'
//viewrecords: true, // disable current view record text like 'View 1-10 of 100'
rowNum: 10000,
sortorder: "asc",
caption: "Track Orders",
gridview: true,
//shrinkToFit: true,
loadui:"block",
loadonce: true,
rownumbers: true, //Displays Row number Column
onSelectRow: function (rowId)//ondblClickRow
{
var rowData = jQuery(this).getRowData(rowId);
var trackingNo = rowData['CUOH_TRAK_NO'];
RowClicked(trackingNo);
}
});
}
C sharp:
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetTrackOrdersData(TrackOrdersFilterData searchFilter)
{
if (HttpContext.Current.Session["LoginName"] == null)
{
HttpContext.Current.Response.Redirect("~/Login.aspx");
}
string val = string.Empty;
DataSet ds = GetTrackOrders(searchFilter);
if (ds.Tables.Count > 0)
{
val = DataTableToJSON(ds.Tables[0]);
}
return val;
}
Related
Jqgrid load with data on pageload. When I try to load the grid on a button click grid load with the data but in the next moment the full grid get disappear if I use the grid on a content page with master page and the rows get disappear if I use a page without master page. Is there any solution for this? Thanks
Added a demo
Note: grid is disappearing on every postback
When I removed the update panel from master page , grid is not disappearing but the data on the grid is disappering
jQuery("#jqgItemDetails").jqGrid({
url: '',
datatype: "local",
colNames: ['UPC Code', 'OLD UPC', 'Item Description', 'Old Item Desc', 'Size UOM', 'Old Size UOM', 'Department', 'Category',
'Tax Description', 'WIC/CVV', 'Label', 'Last Movement', 'Last Purchase', 'Item Added', 'Comment', 'Store Number'],
colModel: [
{ name: 'UPC_Code', index: 'UPC_Code', width: 90, stype: 'text' },
{ name: 'UPC_Code_Old', index: 'UPC_Code_Old', width: 90, stype: 'text', hidden: true },
{ name: 'Item_Desc', index: 'Item_Desc', width: 150 },
{ name: 'Item_Desc_Old', index: 'Item_Desc_Old', width: 150, hidden: true },
{ name: 'Size_UOM', index: 'Size_UOM', width: 60 },
{ name: 'Size_UOM_Old', index: 'Size_UOM_Old', width: 60, hidden: true },
{ name: 'Department', index: 'Department', width: 100 },
{ name: 'Category', index: 'Category', width: 80 },
{ name: 'Tax_Desc', index: 'Tax_Desc', width: 150 },
{ name: 'WIC_CVV', index: 'WIC_CVV', width: 80 },
{ name: 'Label', index: 'Label', width: 150 },
{ name: 'Last_Movement', index: 'Last_Movement', width: 100 },
{ name: 'Last_Purchase', index: 'Last_Purchase', width: 100 },
{ name: 'Item_Added', index: 'Item_Added', width: 100 },
{ name: 'Comment', index: 'Comment', width: 100, editable: true },
{ name: 'Store_Number', index: 'Store_Number', width: 100, hidden: true }
],
multiselect: true,
rowNum: 10,
sortname: 'UPC_Code',
viewrecords: true,
sortorder: "desc",
pager: '#pager2',
width: 1100,
cellEdit: true,
cellsubmit: 'clientArray',
editurl: '',
height: 60,
onSelectRow: editRow,
shrinkToFit: false,
afterSaveCell: function (rowid, name, val, iRow, iCol) {
var grid = $("#jqgItemDetails");
if (name == 'Comment') {
grid.jqGrid('setCell', rowid, 'Comment', val);
}
},
caption: '<span style="height:20px;color:#cc961a">UPC Item Details</span>'
});
var lastSelection;
function editRow(id) {
if (id && id !== lastSelection) {
var grid = $("#jqgItemDetails");
grid.jqGrid('restoreRow', lastSelection);
grid.jqGrid('editRow', id, { keys: true });
lastSelection = id;
}
}
function btnUPCShow_OnClientClick() {
fillUPCDetailsGrid();
}
function fillUPCDetailsGrid() {
var UPCCol = new Array();
var UPCData = "", UPCLike = "", RangeFrom = "", RangeTo = "", FilterVal;
FilterVal = document.getElementById('ddlFilter').value;
if (FilterVal == 1) {
UPCData = document.getElementById('txtUPC').value; // '77098103440,77098103450,77098103470,77098104423'; // document.getElementById('txtUPC').value;
UPCCol = UPCData.split(',');
}
else if (FilterVal == 2) {
UPCLike = document.getElementById('txtUPC').value;
}
else if (FilterVal == 3) {
RangeFrom = document.getElementById('txtUPC').value;
RangeTo = document.getElementById('txtRangeTo').value;
}
$.ajax({
type: "POST",
url: 'ItemInquiries.aspx/GetUPCDetails',
data: JSON.stringify({ UPCCollection: UPCCol, UPCLike: UPCLike, UPCRangeFrom: RangeFrom, UPCRangeTo: RangeTo, Filter: FilterVal }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (Result) {
var myjsongrid = $.parseJSON(Result.d);
for (var i = 0; i < myjsongrid.Table.length; i++) {
jQuery('#jqgItemDetails').jqGrid('addRowData', i + 1, myjsongrid.Table[i]);
}
}
});
}
Using Jquery.Jqgrid v4.4.4
I have 10 pages in my State grid, i want to display the page which holds state name 'Tamilnadu' on first of the jqgrid loads. Not to bring the state on the first page, need to display that page on the first time.
EDIT: My Jqgrid code, here i have 'State' column contains 10+ pages , in one of the page 'Tamilnadu' state record is there. Please help me on how to load the grid with that page on first load.
// Setting up County Grid properties
$(function () {
$("#CountyGrid").jqGrid({
url: '/ControlTables/GetCountyResult',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'Get',
colNames: ['CountyIdentifier', 'Active', 'State', 'County', 'County Number', AddNewBtn],
colModel: [
{
Key: true, name: 'CountyIdentifier', index: 'CountyIdentifier', width: 16, editable: false, sortable: true, align: "left", classes: "grid-col",
hidden: true, displayName: "CountyIdentifier"
},
{
name: 'ActiveFlag', index: 'ActiveFlag', width: 4, align: 'center', editable: true,
edittype: 'checkbox', editoptions: { value: "True:False", defaultValue: "True" }, formatter: "checkbox", displayName: "Active"
},
{
name: 'StateIdentifier', index: 'StateIdentifier', editable: true, formatter: 'select', sortable: true,
edittype: 'select', width: 19, align: "left", classes: "grid-col", editoptions: { style: "height:23px;" }, displayName: "State", valueField: "StateText",
},
{
name: 'CountyText', index: 'CountyText', width: 19, editable: true, sortable: true, align: "left", classes: "grid-col",
editoptions: { style: "height:23px;", maxlength: "48", dataInit: function (el) { $(el).css('text-transform', 'uppercase'); } }, displayName: "County"
},
{
name: 'CountyNumber', index: 'CountyNumber', width: 7, editable: true, sortable: true, align: "left", classes: "grid-col",
editoptions: { style: "height:23px;", maxlength: "5" }, displayName: "County Number"
},
{
name: "action", index: "action", sortable: false, editable: false, align: "center", width: "7", displayName: "Action"
},
],
// Call select row function
onSelectRow: function (id) {
if (onPagingLastSel) {
$('#CountyGrid').jqGrid('resetSelection', lastsel, true);
onPagingLastSel = false;
}
rowSelect(id);
},
onPaging: function () {
//Prompt to save pending changes when the user try to navigate Next/Previous/Front/Last page.
if (lastsel != null) {
$('#CountyGrid').jqGrid('saveRow', lastsel, {});
var editrowData = jQuery("#CountyGrid").getRowData(lastsel);
var editRow_ActiveFlag = editrowData['ActiveFlag']
var editRow_StateIdentifier = editrowData['StateIdentifier']
var editRow_CountyText = editrowData['CountyText']
var editRow_CountyNumber = editrowData['CountyNumber']
$('#CountyGrid').jqGrid('editRow', lastsel, {});
if ((lastsel_StateIdentifier != editRow_StateIdentifier && editRow_StateIdentifier != undefined)||
(lastsel_CountyText != editRow_CountyText && editRow_CountyText != undefined) ||
(lastsel_CountyNumber != editRow_CountyNumber && editRow_CountyNumber != undefined) ||
(lastsel_ActiveFlag != editRow_ActiveFlag && editRow_ActiveFlag != undefined)) {
DialogConfirmSave("GENL-002");
onPagingLastSel = true;
return 'stop';
}
else {
lastsel = null;
//enable New Button
$("#NewBtnId").removeClass('add-new-button-disable');
$("#NewBtnId").removeAttr("disabled");
}
}
},
// load all States into jqGrid dropdown
beforeProcessing: function (response) {
var $self = $(this),
options = response.colModelOptions, StateIdentifier;
if (options != null) {
for (StateIdentifier in options) {
if (options.hasOwnProperty(StateIdentifier)) {
$("#CountyGrid").jqGrid("setColProp", StateIdentifier, options[StateIdentifier]);
}
}
}
},
// Grid column header alignment to the left diable new button for general users
loadComplete: function () {
$("#CountyGrid").jqGrid("setLabel", "Active", "", { "text-align": "left" })
$("#CountyGrid").jqGrid("setLabel", "StateIdentifier", "", { "text-align": "left" })
$("#CountyGrid").jqGrid("setLabel", "CountyText", "", { "text-align": "left" })
$("#CountyGrid").jqGrid("setLabel", "CountyNumber", "", { "text-align": "left" })
},
pager: jQuery('#CountyPager'),
rowNum: jqGridRowCount,
rowList: GridRowList,
viewrecords: true,
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
multiselect: false,
autowidth: true,
height: 560,
hidegrid: false,
}).navGrid('#CountyPager', {
edit: false, add: false, del: false, search: false, refresh: false, reload: false, restoreAfterSelect: false
})
});
My Controller code:
public JsonResult GetCountyResult(string sidx, string sord, int page, int rows, bool getAllRecords = false)
{
objCountyViewModel = new CountyViewModel();
int totalRecords = 0;
if (Session["CountyList"] != null && Session["CountyList"] is List<CountyModel>)
{
objCountyViewModel.CountyModelList = (List<CountyModel>)Session["CountyList"];
if (objCountyViewModel.CountyModelList != null)
{
Session["CountyList"] = objCountyViewModel.SortCounty(sidx, sord);
totalRecords = objCountyViewModel.CountyModelList.Count();
}
}
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
rows = getAllRecords ? totalRecords : rows;
var jsonData = new
{
colModelOptions = new
{
StateIdentifier = new
{
formatter = "select",
edittype = "select",
editoptions = new
{
value = objCountyViewModel.GetStateDropdownList()
}
}
},
total = totalPages,
page,
records = totalRecords,
rows = objCountyViewModel.GetCountyPageList(page, rows)
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
I do realize many have asked this same question. I have tried all other suggestions and have had no success. I know for sure its something I am overlooking and wanted a second set of eyes to help me. Thanks in advance!!
My problem is that the primary grid loads find. Its the sub grid thats the problem.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#PositionsGrid").jqGrid({
url: '/Position/GetPositions?projectid=#Model.ID',
datatype: 'json',
mtype: 'POST',
colNames: ['PositionID', 'ID', 'Job', 'Band', 'Start Date', 'End Date','Current Assignee','Terminated Worker','Status'],
colModel: [
{ name: 'PositionID', index: 'PositionID', width: 20, align: 'left', hidden: true, sortable: false, search: false,key:true },
{ name: 'DisplayID', index: 'DisplayID', width: 50, align: 'left' },
{ name: 'JobTitle', index: 'JobTitle', width: 100, align: 'left' },
{ name: 'Band', index: 'Band', width: 50, align: 'left' },
{ name: 'StartDate', index: 'StartDate', width: 50, align: 'left', searchoptions: { sopt: ['cn'], dataInit: datePick} },
{ name: 'EndDate', index: 'EndDate', width: 50, align: 'left', searchoptions: { sopt: ['cn'], dataInit: datePick} },
{ name: 'CurrentWorker', index: 'CurrentWorker', width: 100, align: 'left' },
{ name: 'TerminatedWorker', index: 'TerminatedWorker', width: 100, align: 'left' },
{ name: 'Status', index: 'Action', width: 50, align: 'left', search: false}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'PositionID',
sortorder: "asc",
viewrecords: true,
autowidth: true,
subGrid: true,
subGridRowExpanded: showDetails
});
$('#PositionsGrid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
$("#PositionGrid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false, refresh: true });
});
datePick = function (elem) {
$(elem).datepicker({ dateFormat: "mm/dd/yy", onSelect: function (dateText, inst) { $("#grid")[0].triggerToolbar(); } });
};
function showDetails(subgrid_id, row_id) {
showSubGrid_AssignmentsGrid(subgrid_id, row_id, "<br><b>Worker History</b><br><br>", "AssignmentsGrid");
}
function showSubGrid_AssignmentsGrid(subgrid_id, row_id, message, suffix) {
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
if (message) jQuery('#' + subgrid_id).append(message);
if (message) jQuery('#' + subgrid_id).append(message);
jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
jQuery("#" + subgrid_table_id).jqGrid({
url: "Position/GetAssignmentsByPosition?positionid=" + row_id,
datatype: "json",
colNames: ['AssignID', 'JobReqNum', 'WorkerName', 'StartDate', 'EndDate','Status'],
colModel: [
{ name: "AssignID", index: "AssignID", width: 80},
{ name: "JobReqNum", index: "JobReqNum", width: 130 },
{ name: "WorkerName", index: "WorkerName", width: 80, align: "right" },
{ name: "StartDate", index: "StartDate", width: 80, align: "right" },
{ name: "EndDate", index: "EndDate", width: 100, align: "right" },
{ name: "Status", index: "Status", width: 100, align: "right" }
],
height: '100%',
rowNum: 20,
sortname: 'AssignID',
sortorder: "asc"
});
}
</script>
the controller action that loads the subgrid is below
public JsonResult GetAssignmentsByPosition(int positionid)
{
ProjPosition position = uow.PositionRepository.GetPosition(positionid);
var jsonRows = position.ProjPositionAssignments.AsEnumerable()
.Select(a => new
{
cell = new string[] { a.ID.ToString(),
a.JobReqNum == null ? "" :a.JobReqNum,
a.Worker == null ? "" : a.Worker.FullName,
(a.StartDate == null) ? "" : ((DateTime)a.StartDate).ToString("MM/dd/yyyy"),
(a.EndDate == null) ? "" : ((DateTime)a.EndDate).ToString("MM/dd/yyyy"),
(a.Status == null ? "Active" : StatusDictionary.AssignmentStatusDictionary[a.Status])
}
})
.ToArray();
var jsonData = new
{
rows = jsonRows
};
return Json(jsonData);
}
You also need to pass to jqgrid:
page = numberOfPages
records = totalRecords,
I personally use something like:
var jsonData = new
{
total = (totalRecords + rows - 1) / rows,
page = page,
records = totalRecords,
rows = (
from item in pagedQuery
select new
{
cell = new string[] {
item.value1,
item.value2, ....
}
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
I am trying to change the sorting order of jqGrid by using this code:
jQuery('#id').setGridParam({sortorder:"desc"}).trigger("reloadGrid");
It changes the sortorder of the table but the Sorting Icon of the table is not changing as per the order. In onSortCol i'm sorting the column which actually sort the column. But when i use the above piece of code to set the sortorder, the sortorder is set but the sort icon still shows the previous sortorder.
_table.jqGrid({
datatype: 'local', // disable initial autoload. this will be when load function is called "json",
altRows: true,
altclass : 'AltRowClass',
gridView: true,
width:850,
height:"auto",
rowheight: 75,
align: 'center',
treeGrid: false,
loadonce:true,
ExpandColumn: 'name',
loadtext : 'Currently updating',
mtype : 'POST',
colNames: ['MSISDN','IMSI','Last name','First name','Device type','CE Index','Customer lifetime value'],
colModel: [
{ name: 'MSISDN', align: 'center', hidden: false, sortable: false,formatter: maskingColumn},
{ name: 'IMSI', align: 'center', hidden: false, sortable: false,formatter: maskingColumn},
{ name: 'LastName', align: 'center', hidden: false, sortable: false},
{ name: 'FirstName', align: 'center', hidden: false, sortable: false},
{ name: 'DeviceType', align: 'center', hidden: false, sortable: false,formatter: columnData},
{ name: 'CEIndex', align: 'center', hidden: false, sortable: true, sorttype: 'int'},
{ name: 'CustomerLifetimeValue', align: 'center', hidden: false, sortable: false}
],
sortname: 'CEIndex',
sortorder: 'desc',
loadComplete: function(data)
{
var rowCount = _table.jqGrid('getGridParam', 'records');
if (rowCount > 5) {
_table.parents("div.ui-jqgrid-bdiv").css({'max-height':'300px'});
_table.closest(".ui-jqgrid-bdiv").css({'overflow-y':'auto'}).css({'overflow-x':'hidden'});
}
if (rowCount != 0) {
_table.parents().find('.ui-jqgrid-view').first().show();
}
if (rowCount <= rowsNum) {
utils.find('cei-drill-customer-detail-showmore').hide();
} else {
utils.find('cei-drill-customer-detail-showmore').show();
}
_table.trigger("reloadGrid");
} ,
onSortCol: function (data, status, xhr) {
if (xhr == 'asc') {
var postData = this.p.postData.jsonRequest.replace('Top','Bottom');
actionInputObjectExportCustDrilldown.parameters.requestQuery = actionInputObjectExportCustDrilldown.parameters.requestQuery.replace('Top','Bottom');
var postDataVar = {
operation : 'drillDownLevel1',
drillLevel1 : "drilldown",
jsonRequest : postData
};
_this.load(postDataVar);
} else if (xhr == 'desc') {
var postData = this.p.postData.jsonRequest.replace('Bottom','Top');
actionInputObjectExportCustDrilldown.parameters.requestQuery = actionInputObjectExportCustDrilldown.parameters.requestQuery.replace('Bottom','Top');
var postDataVar = {
operation : 'drillDownLevel1',
drillLevel1 : "drilldown",
jsonRequest : postData
};
_this.load(postDataVar);
}
},
beforeProcessing : function(data, status, xhr) {
jQuery('div#jqgh_' + prefix + '-cei-dd-customer-details-table_CustomerLifetimeValue.ui-jqgrid-sortable').text("Customer Lifetime Value(" + filterValuesHl.currency + ")");
if (data.queryError != null || !data.rows || data.rows.length == 0) {
utils.find('cei-drill-customer-detail-ExportShowMore').hide();
utils.find('div-for-export-customer').hide();
var noError = utils.find('cei-customerDetails-div').parent().find(".cei-customer-details-dd-no-data");
if (data.queryError != null) {
noError.text("Error in portlet: " + data.queryError);
} else {
noError.html("<strong>No Data Available</strong>");
}
noError.show();
return false;
} else {
utils.find('cei-drill-customer-detail-ExportShowMore').show();
utils.find('div-for-export-customer').show();
utils.find('cei-drill-customer-detail-showmore').show();
//Hiding the columns which has no data in all the rows.
hideColumns(data);
//Setting CSV Data
csvData = data;
}
},
beforeRequest : function() {
_table.parents().find('.ui-jqgrid-view').first().hide();
utils.find('cei-customerDetails-div').parent().find(".cei-customer-details-dd-no-data").hide();
},
loadError : function(xhr, st, err) {
utils.find('cei-drill-customer-detail-ExportShowMore').hide();
utils.find('div-for-export-customer').hide();
var noError = utils.find('cei-customerDetails-div').parent().find(".cei-customer-details-dd-no-data");
noError.html("<html>Error connecting portlet: " + err + "</strong>");
noError.show();
}
});
You can try following code where id is your column name.
$('#grid').jqGrid('setGridParam', {sortorder: 'desc'});
$('#grid').jqGrid('sortGrid', 'id');
Here are my column and model items:
var col_names = ['Qty', 'SFC', 'Item Nbr', 'Brand', 'Product', 'Supplier', 'Price', 'UOM', 'Case', 'Remarks', 'Weight', 'Par', 'Sort', 'Purchased', 'ProductId'];
var col_model = [
{ name: 'Quantity', index: 'Quantity', width: 22, sorttype: "number", editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 15} },
{ name: 'ProductAttributes', index: 'ProductAttributes', width: 50 },
{ name: 'ItemNum', index: 'ItemNum', width: 50, align: "right"},
{ name: 'BrandName', index: 'BrandName', width: 100 },
{ name: 'ProducName', index: 'ProducName', width: 150 },
{ name: 'SupplierName', index: 'SupplierName', width: 100 },
{ name: 'Price', index: 'Price', width: 40, sorttype: "number", align: "right" },
{ name: 'UOM', index: 'UOM', width: 30 },
{ name: 'CasePack', index: 'CasePack', width: 30 },
{ name: 'PackageRemarks', index: 'PackageRemarks', width: 80 },
{ name: 'AveWeight', index: 'AveWeight', width: 33, align: "right" },
{ name: 'Par', index: 'Par', width: 20, align: "right", editable: true, edittype: 'text', editoptions: { size: 10, maxlength: 15} },
{ name: 'SortPriority', index: 'SortPriority', hidden: true },
{ name: 'LastPurchaseDate', index: 'LastPurchaseDate', width: 50, align: "right" },
{ name: 'ProductId', index: 'ProductId', hidden: true, key: true },
];
here's the grid initialization
favoriteGrid = $('#favoriteGrid');
favoriteGrid.jqGrid({
url: '/xxx/yyy/zzz/',
datatype: 'json',
ajaxGridOptions: { contentType: "application/json" },
jsonReader: {
id: "ProductId",
cell: "",
root: function (obj) { return obj.rows; },
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.rows.length; },
repeatitems: false
},
colNames: col_names,
colModel: col_model,
pager: $('#favoritePager'),
pginput: false,
rowNum: 1000,
autowidth: true,
sortable: true, // enable column sorting
multiselect: true, // enable multiselct
gridview: true,
ignoreCase: true,
loadonce: true, // one ajax call per
loadui: 'block',
loadComplete: function () {
fixGridHeight(favoriteGrid);
},
ondblClickRow: function (rowid, ri, ci) {
},
onSelectRow: function (id) {
if (id && id !== lastSel) {
favoriteGrid.restoreRow(lastSel);
lastSel = id;
}
favoriteGrid.editRow(id, true);
},
gridComplete: function () {
}
}).jqGrid('navGrid', '#favoritePager',
{ add: false, edit: false, del: false, search: true, refresh: false },
{},
{},
{},
{ multipleSearch: true, showQuery: false },
{}).jqGrid('sortableRows').jqGrid('gridDnD');
and finally, the data:
{"rows":[["1",null,"342240"," ","15 AMP, 600V, TIME DELAY, CLASS G","Home Depot - Canada","3.83","EA","1","- 15A, 600V - Class G - Mfg #SC-15","0.02","","0",null,"2977175133"],["1",null,"3573375","NEWPRT","STEAK TOP SIRLOIN CH CC 8OZ","SYSCO","6.875","LB","24 PK","8 OZ","24 LB","","0",null,"1675949601"],["1",null,"201805"," ","GE-HOTPOINT DISHWASHER UPPER RACK","Home Depot - Canada","54.43","EA","1","Dishwasher Upper Rack - Fits Models #HDA2000, HDA2100 And GSD2100 - Mfg #WD28X10011","6.5","","0",null,"2977172115"],["1",null,"286044"," ","GE DISHWASHER SILVERWARE BASKET","Home Depot - Canada","19.19","EA","1","Silverware Basket - Mfg #WD28X265","0.06","","0",null,"2977172688"]]}
I get the right number of rows and the columns but no data is displayed in the grid, if that makes sense.
Just for completeness:
[HandleJsonException]
public JsonResult ProductGroupService(Int64 id = 0)
{
var q = Repository.GetFavoriteProducts(SimpleSessionPersister.User.Id, id).ToArray();
var result = (from fp in q
select new string[]
{
Convert.ToString(fp.Quantity),
fp.ProductAttributes,
fp.ItemNum,
fp.BrandName,
fp.ProducName,
fp.SupplierName,
Convert.ToString(fp.Price),
fp.UOM,
fp.CasePack,
fp.PackageRemarks,
fp.AveWeight,
Convert.ToString(fp.Par),
Convert.ToString(fp.SortPriority),
fp.LastPurchaseDate,
Convert.ToString(fp.ProductId)
}).ToArray();
var jsonData = new
{
rows = result
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Thank you,
Stephen
You main problem is that you used repeatitems: false property of the jsonReader which is wrong for your input.
Moreover you should remove trailing comma at the end of definition of col_model. The error will be ignored by many modern browsers, but not for the old one.
After the changed the grid will be successfully loaded: see the demo.