ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: pranit@srcomsec on November 10, 2022, 08:27:08 pm
-
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.
-
Please share a jsfiddle of the issue.
-
We have multiple girds on the same page. The add row functionality is working fine with the below code, the only issue is with an update.
Add row code:
$("#gridfilter1").pqGrid("addRow",
{
rowIndx: 0,
newRow: {
'inRowIndex': loTickDataJS[i].inRowIndex,
'Exchange': loTickDataJS[i].Exchange,
'Symbol': loTickDataJS[i].Symbol,
'OrderType': loTickDataJS[i].OrderType,
'BuySell': loTickDataJS[i].BuySell,
'Qty': loTickDataJS[i].Qty,
'QtyRemaining': loTickDataJS[i].QtyRemaining,
'OrderPrice': loTickDataJS[i].OrderPrice,
'OrderStatus': loTickDataJS[i].OrderStatus,
'stOrderStatus': loTickDataJS[i].stOrderStatus,
'stCreationTime': loTickDataJS[i].stCreationTime,
'OrderUID': loTickDataJS[i].OrderUID
},
checkEditable: false
});
Update row code:
$("#gridfilter1").pqGrid("updateRow", {
rowIndx: liRowIndex,
newRow: {
'inRowIndex': loTickDataJS[i].inRowIndex,
'Exchange': loTickDataJS[i].Exchange,
'Symbol': loTickDataJS[i].Symbol,
'OrderType': loTickDataJS[i].OrderType,
'BuySell': loTickDataJS[i].BuySell,
'Qty': loTickDataJS[i].Qty,
'QtyRemaining': loTickDataJS[i].QtyRemaining,
'OrderPrice': loTickDataJS[i].OrderPrice,
'OrderStatus': loTickDataJS[i].OrderStatus,
'stOrderStatus': loTickDataJS[i].stOrderStatus,
'stCreationTime': loTickDataJS[i].stCreationTime
},
checkEditable: false
});
Can you advise a fix based on the javascript error below?
pqgrid.min.js:9 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%205:2265:76)
at Function.each (jquery.js:385:19)
If we delete and add row for updaterow function then it is working. There is only issue with update.
-
Debug your code and find the value of liRowIndex when error occurs.
-
There is an issue with any row update.
We are getting a proper table row index & that's why deleting and adding rows is working fine.
-
Please share a jsfiddle.
-
We have set up the code in jsfiddle but there is an error to load data in the grid.
https://jsfiddle.net/pranit0405/kj3rp942/14/
To load data, please refer to the code for line #934 (method name: loadMarketWatch).
To update data, please refer to the code for line # (method name: getTickerDataAll). We are calling this method every second and update data. You need to comment delete/add code and uncomment update row code to fix the updateRow issue.
kindly request to review the code and fix the loading data issue & then advise the solution for updateRow issue.
-
Please make a small test case with reproducible issue only in jsfiddle, not your entire code.
-
Thank you for your response.
We tried with the sample page and it's working. We are getting an issue with the development page where we use the Golden Layout.
Can you please suggest what could be wrong as per the javascript error and the line #code which we ask to review?
Any suggestions will be appreciated. This will help us to investigate and fix this issue.
-
We have changed the placement of the javascript (JQuery, Golden Layout, Paramquery) reference and updaterow is working now.
Thank you for your help.