My grid Javascript code:
var obj =
{
width: "auto",
//maxWidth: '100%',
//height: 'flex',
//flex: { one: true },
numberCell: { width: 60, show: true },
//title: "Background loading of data",
resizable: true,
//columnTemplate: { resizable: true },
filterModel: { header: true, type: 'local', menuIcon: true }, //on: true,
//menuIcon: true,
//hoverMode: 'row',
selectionModel: { type: 'row', mode: 'block' },
editable: false,
//scrollModel: { autoFit: true },
//scrollModel: { lastColumn: null },
toolbar: {
items: [
{
type: 'button',
label: 'Toggle filter row',
listener: function () {
this.option('filterModel.header', !this.option('filterModel.header'));
this.refresh();
}
},
{
type: 'button',
label: 'Toggle filter row condition dropdown',
listener: function () {
this.option('filterModel.menuIcon', !this.option('filterModel.menuIcon'));
this.refresh();
}
},
{
type: 'button',
label: 'Reset filters',
listener: function () {
this.reset({ filter: true });
}
}
]
},
pageModel: { rPP: 50 },
columnTemplate: {
filter: {
crules: [{ condition: 'contain' }]
}
/*resizable: true*/
},
colModel: fsTableHeaders,
rowInit: function (ui)
{
if (ui.rowData.OrderPrice > 1000) {
return {
style: { "background": "yellow" } //can also return attr (for attributes) and cls (for css classes) properties.
};
}
else if (ui.rowData.OrderPrice > 500) {
return {
style: { "background": "aqua" } //can also return attr (for attributes) and cls (for css classes) properties.
};
}
},
cellSave: function (evt, ui) {
this.refreshRow({ rowIndx: ui.rowIndx });
},
create: function ()
{
var lsParamQueryGridState = $("#hfParamQueryGridState" + fiTableIndex).val();
$("#gridfilter" + fiTableIndex).pqGrid("loadState", { state: lsParamQueryGridState, refresh: false });
}
};
var loData = "fbAllOrders=true"; //"fiExchange=1&fsSymbol=&fiStatus=0&fiLastRawIndex=0";
obj.dataModel =
{
method: "GET",
location: "remote",
//contentType: "application/json; charset=utf-8",
beforeSend: function (jqXHR, settings) {
jqXHR.setRequestHeader("Content-Type", "application/json");
},
getUrl: function () {
//alert("1a");
return {
//url: "jquerygrid.aspx/GetCustomers", data: "cur_page=" + this.curPage + "&records_per_page=" + this.rPP + "&sortBy=" + sort[this.sortIndx] + "&dir=" + sortDir
url: "/src-tick-watch-by-filter-v10.aspx/getOrders",
data: loData
};
},
getData: function (response) {
console.log("getData calling...");
var loOrderJS = $.parseJSON(response.d);
data = loOrderJS; // loOrderJS.OrdersByFilter;
return { data: data }
},
error: function (jqXHR, textStatus, errorThrown) {
//debugger;
alert(jqXHR.responseText);
}
};
var grid = pq.grid("#gridfilter" + fiTableIndex, obj);
grid.one('lazyProgress', function () {
this.flex();
});
grid.on("beforeCellKeyDown", function (event, ui) {
console.log(event.key);
if (event.key == "Delete") {
console.log(grid.SelectRow().getSelection());
this.deleteRow({
rowList: grid.SelectRow().getSelection()
})
return false; //to prevent default behaviour.
}
});
row update code (We are getting proper rowindex in "liRowIndex" field)
$("#gridfilter1").pqGrid("updateRow", {
rowIndx: liRowIndex,
newRow: {
'inRowIndex': loTickDataJS[i].RowNo,
'Exchange': loTickDataJS[i].Exchange,
'Symbol': loTickDataJS[i].Symbol,
'BuyQty': loTickDataJS[i].BuyQty,
'BuyValue': loTickDataJS[i].BuyValue,
'BuyAvgPrice': loTickDataJS[i].BuyAvgPrice,
'SellQty': loTickDataJS[i].SellQty,
'SellValue': loTickDataJS[i].SellValue,
'SellAvgPrice': loTickDataJS[i].SellAvgPrice,
'NetQty': loTickDataJS[i].NetQty,
'NetValue': loTickDataJS[i].NetValue,
'NetPrice': loTickDataJS[i].NetPrice
},
checkEditable: false
Console error
Uncaught TypeError: Cannot read properties of undefined (reading 'dataIndx')
at A.saveCell (pqgrid.min.js:9:43689)
at A._digestUpdate (pqgrid.min.js:9:65996)
at A._digestData (pqgrid.min.js:9:65568)
at e.updateRow (pqgrid.min.js:9:163189)
at HTMLDivElement.<anonymous> (jquery-ui.min.js:6:2133)
at Function.each (jquery.js:385:19)
at jQuery.fn.init.each (jquery.js:207:17)
at V.fn.<computed> [as pqGrid] (jquery-ui.min.js:6:1951)
at Object.<anonymous> (src-tick-watch-by-filter-v10.aspx?tid=1&ws=SRC%20TEST%204:2263:76)
at Function.each (jquery.js:385:19)
Please advise a solution to fix the console error and update the row in the grid.
