ParamQuery grid support forum
General Category => ParamQuery Pro Evaluation Support => Topic started by: freighttechsed@gmail.com on May 15, 2024, 07:25:11 pm
-
Hi Team,
I have a pqgrid that I would like to update in the following way:
1. I manually select few rows, by selecting check-boxes.
2. Above grid there are 'Assign Commodity Code' button and 'Save changes' button.
3. I pick a value from a modal pop-up by clicking the 'Assign Commodity Code' button
4. Selected rows got new value.
The problem is, that the pqgrid does not acknowledges any change.Red triangles are not visible and
var isDirty = gridD.isDirty(); returns 'false' and
var changes = gridD.getChanges({ format: "byVal" }); returns 0,0,0 objects and
var changes2 = gridD.getChanges(); returns 0,0,0 objects.
But when I type something into cell, triangles are there.
I have added the below code as weel,
grid.updateRow({ rowIndx: 0, newRow: { commodityCode: _commodityCode }, track: true });
Method for getting and updating the value through pop-up:
$("#btnAssign").click(function () {
var grid = pq.grid("#invoiceLineItemGrid", obj);
var test = checked
var data = grid.pageData();
for (var i = 0; i < test.length; i++) {
for (var j = 0; j < data.length;j++){
if (test.lineItemId == data[j].lineItemId) {
//var rowData = $("#invoiceLineItemGrid").pqGrid("getRowData", { rowIndx: j });
var row = grid.getRowData({ rowIndx: 0 });
row['commodityCode'] = $('#CommoditySearchBox').val();
var _commodityCode = $('#CommoditySearchBox').val();
grid.updateRow({ rowIndx: 0, newRow: { commodityCode: _commodityCode }, track: true });
grid.refreshCell({ rowIndx: 0, dataIndx: 'commodityCode' });
}
}
}
obj.dataModel = {
recIndx: "lineItemId",
data: data
},
pq.grid("#invoiceLineItemGrid", obj);
grid.refreshDataAndView();
$("#commodityCodeSearchModal").modal('hide');
});
Grid object and column definition:
var colModel = [
{
title: "LineItemId", //title of column.
width: 10, //initial width of column
dataType: "integer", //data type of column
dataIndx: "lineItemId",
hidden: true
},
{
dataIndx: "lineItemChkBox", maxWidth: 30, minWidth: 30, align: "center", resizable: false,
title: "",
menuIcon: false,
type: 'checkBoxSelection', cls: 'ui-state-default', sortable: false, editor: false,
dataType: 'bool',
cb: {
all: false, //checkbox selection in the header affect current page only.
header: true //show checkbox in header.
}
},
{
title: "Line Item#",
width: 20,
dataType: "string",
dataIndx: "itemNumber"
},
{
title: "Description", //title of column.
width: 350, //initial width of column
dataType: "string", //data type of column
dataIndx: "description" //should match one of the keys in row data.
},
{
title: "Quantity",
width: 35,
dataType: "string",
align: "left",
dataIndx: "quantity"
},
{
title: "Weight",
width: 35,
dataType: "string",
align: "left",
dataIndx: "weight"
},
{
title: "Unit Price",
width: 35,
dataType: "string",
align: "left",
dataIndx: "unitPrice"
},
{
title: "Total Price",
width: 35,
dataType: "string",
align: "left",
dataIndx: "totalPrice",
},
{
title: "Commodity Code",
width: 300,
dataIndx: "commodityCode",
align: "left",
render: function (ui) {
var type = ui.rowData.typeEditor, option;
return {
cls: {
autocomplete: 'pq-drop-icon pq-side-icon',
}[type],
text: option ? option.text : undefined
}
},
editor: {
type: "textbox",
attr: "autocomplete='off'",
init: autoCompleteEditor('Invoice/SearchScheduleBData')
},
}
];
var obj = {
hwrap: false,
//autoRow: false,
rowHt: 32,
rowBorders: false,
trackModel: { on: true }, //to turn on the track changes.
width: "100%",
height: 800,
resizable: true,
scrollModel: { autoFit: true },
title: "Invoice Line Items",
colModel: colModel,
numberCell: { resizable: true, width: 40, minWidth: 25 },
pageModel: { type: "local", rPP: 20 },
swipeModel: { on: false },
editor: {
select: true
},
editModel: {
clicksToEdit: 1
},
cellSave: function (evt, ui) {
this.refreshRow(ui);
},
};
-
Your code looks incorrect as you've called updateRow method with same parameters inside 2 loops.
Please check the APi docs on how to use updateRow method without a loop ( multiple rows and cells can be updated all at once ) and the data shouldn't be updated directly in row when updateRow is used and there is no need to use refreshCell.
-
I have added the updateRow method outside the loop, still that the pqgrid does not acknowledges any change.Red triangles are not visible and var isDirty = gridD.isDirty(); returns 'false'
$("#btnAssign").click(function () {
var grid = pq.grid("#invoiceLineItemGrid", obj);
var test = checked
var data = grid.pageData();
var _commodityCode;
for (var i = 0; i < test.length; i++) {
for (var j = 0; j < data.length;j++){
if (test.lineItemId == data[j].lineItemId) {
//var rowData = $("#invoiceLineItemGrid").pqGrid("getRowData", { rowIndx: j });
var row = grid.getRowData({ rowIndx: 0 });
row['commodityCode'] = $('#CommoditySearchBox').val();
_commodityCode = $('#CommoditySearchBox').val();
}
}
}
grid.updateRow({ rowIndx: 0, newRow: { commodityCode: _commodityCode }, track: true });
$("#commodityCodeSearchModal").modal('hide');
});
-
It's still not right.
Remove the following code.
var row = grid.getRowData({ rowIndx: 0 });
row['commodityCode'] = $('#CommoditySearchBox').val();
and pass rowList param to updateRow to update multiple rows like this
grid.updateRow( {
rowList: [
{ rowIndx: 2, newRow: { 'ProductName': 'Cheese', 'UnitPrice': 30 }},
{ rowIndx: 5, newRow: { 'ProductName': 'Butter', 'UnitPrice': 25 }}
]
});
https://paramquery.com/pro/api#method-updateRow