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);
},
};
