Jqx Grid – child grid cell value is not update

[dineshpParticipant]

Hello,

I have used nested Grid with angular 7, I would like to update child grid cell value and color cell of columns (‘dispatchQty’ and ‘dispatchAlternateQty’) while ‘isDispatch’ checkbox column checked, I have written code in cell end event and it’s not working

please refer my code and screenshot for more

Thanks,
Dinesh Patel

——————————————–
<jqxGrid #FormGrid [theme]=”‘imms'” [width]=”‘100%'” [autoheight]=”true” [height]=”500″ [enabletooltips]=”true”
[source]=”addlistDataAdapter” [columns]=”addlistcolumns” (onCellendedit)=”onGridCellEndedit($event)”
[rowdetails]=”true” [rowsheight]=”35″ [initrowdetails]=”initRowDetails”
[rowdetailstemplate]=”rowdetailstemplate” >
</jqxGrid>

——————————————–
initRowDetails(index: number, parentElement: any, gridElement: any, record: any): void {
let self = this;
var cellClassNameChildGrid = (row: any, column: any, value: any, rowData: any): string => {

if (rowData.dispatchQty < rowData.orderQty) {
return ‘lessorder’;
}
else if (rowData.stockQuantity === 0) {
return ‘negativezero’;
}
else if (rowData.isFree) {
return ‘advscheme’;
}
else if (rowData.isReplFree) {
return ‘replfree’;
}
else {
return ”;
}
}

var decimalRounding =(value, digits) : any =>{

if(!digits){
digits = 2;
}
value = value * Math.pow(10, digits);
value = Math.round(value);
value = value / Math.pow(10, digits);
return value.toFixed(digits);
}

if (record !== undefined) {
let id = record.custid.toString();
let nestedGridContainer = parentElement.children[0];

let tmp = record.child.map(x => ({
…x, ialiase: x.itemCode, iname: x.itemName, orderbook: x.orderBook, orderQty: x.quantity,
unit: x.kg ? x.kg.trim() : ‘kg’, orderAlternateQty: x.altQuantity, pkt: x.pkt ? x.pkt.trim() : ‘kg’, rowstatus: x.rowStatus,
custid: id, custname: ”, parentUniqueId: x.trSalesOrderId, isDispatch: x.isDispatch, daybook: x.dayBookId,
dispatchOldQty: x.dispatchQty, dispatchOldAlternateQty: x.dispatchAlternateQty
// dispatchQty : x.stockQuantity > 0 ? x. dispatchOldQty: 0 ,
//dispatchAlternateQty :x.stockQuantity > 0 ? x. dispatchOldAlternateQty: 0
}));

let ordersSource = {
datafields: [
{ name: ‘id’ },
{ name: ‘custid’, type: ‘string’ },
{ name: ‘parentUniqueId’ },
{ name: ‘daybook’ },
{ name: ‘dayBookName’ },
{ name: ‘custname’, type: ‘string’ },
{ name: ‘ialiase’, type: ‘string’ },
//{ name: ‘itemaction’ },
//{ name: ‘itemNotes’, type: ‘string’ },
{ name: ‘iname’, type: ‘string’ },
{ name: ‘orderbook’, type: ‘string’ },
{ name: ‘isDispatch’, type: ‘bool’ },
{ name: ‘stockQuantity’, type: ‘number’ },
{ name: ‘dispatchQty’, type: ‘number’ },
{ name: ‘dispatchOldQty’, type: ‘number’ },
{ name: ‘orderQty’, type: ‘number’ },
{ name: ‘unit’, type: ‘string’ },
{ name: ‘dispatchAlternateQty’, type: ‘number’ },
{ name: ‘dispatchOldAlternateQty’, type: ‘number’ },
{ name: ‘orderAlternateQty’, type: ‘number’ },
{ name: ‘pkt’, type: ‘string’ },
{ name: ‘genBook’, type: ‘string’ },
{ name: ‘orderNo’, type: ‘string’ },
{ name: ‘date’, type: ‘date’ },
{ name: ‘cFactor’, type: ‘number’ },
{ name: ‘isAllowBaseUnit’, type: ‘bool’ },
{ name: ‘isAllowBaseAltUnit’, type: ‘bool’ },
{ name: ‘baseNoOfDecimal’, type: ‘number’ },
{ name: ‘altNoOfDecimal’, type: ‘number’ },
{ name: ‘hasAltUnit’, type: ‘bool’ },
{ name: ‘relation’, type: ‘string’ },
{ name: ‘rowstatus’, type: ‘string’ },
{ name: ‘isFree’, type: ‘bool’ },
{ name: ‘isReplFree’, type: ‘bool’ },
{ name: ‘isChanged’, type: ‘bool’ },
{ name: ‘isError’, type: ‘bool’ }
],
id: ‘ialiase’,
localdata: tmp //ordersbyid
}
let nestedGridAdapter = new jqx.dataAdapter(ordersSource);
var columns = [
{ text: ‘Id’, datafield: ‘id’, hidden: true },
{ text: ‘Id’, datafield: ‘parentUniqueId’, hidden: true },
{ text: ‘Daybook’, datafield: ‘daybook’, hidden: true },
{ text: ‘Daybook’, datafield: ‘dayBookName’, hidden: true },
{
text: ‘Distributor’, datafield: ‘custname’, editable: false, hidden: true,
cellclassname: cellClassNameChildGrid
},
{ text: ‘Distributor’, datafield: ‘custid’, editable: false, hidden: true },

{
text: ‘Item Alias’, datafield: ‘iname’, editable: false,
cellclassname: cellClassNameChildGrid
},

{ text: ‘Item Name’, datafield: ‘ialias’, width: ‘350’, hidden: true },
{
text: ‘Order Book’, datafield: ‘orderbook’, width: ‘100’, editable: false,
createEditor: (row: any, cellvalue: any, editor: any, cellText: any, width: any, height: any): void => {
editor.jqxNumberInput({ decimalDigits: 2, digits: 13, width: width, height: height });
},
cellclassname: cellClassNameChildGrid,
validation: (cell: any, value: any): any => {
let rowData = record.child[cell.row];
rowData.isError = false;
if (value === ” || value === null || value == undefined) {
rowData.isError = true;
return {
message: this.resourceModel.accounts_transaction_salesorderentry_quantity + ‘ ‘ + this.commonResourceModel.requiredKey,
result: false
};
}
return true;
}
},
{
text: ”, datafield: ‘isDispatch’, columntype: ‘checkbox’, type: ‘bool’, editable: !record.isView,
cellbeginedit: (row: number, datafield: string, columntype: any, value: any, rowdata: any): void | boolean => {
let data = record.child[row];
if (data.isInvGenerated) {
return false;
}
return true;
},
cellclassname: cellClassNameChildGrid
},
{ text: ”, datafield: ‘stockQuantity’, width: ’70’, hidden: true },
{
text: ‘Disp. Qty.’, datafield: ‘dispatchQty’, width: ‘120’, columntype: ‘numberinput’,
editable: !record.isView, cellsalign: ‘right’,
cellbeginedit: (row: number, datafield: string, columntype: any, value: any, rowdata: any): void | boolean => {
let data = record.child[row];
if (data.rowStatus === GridStatusEnum.Deleted || data.isInvGenerated) {
return false;
}
return data.isAllowBaseUnit;
},
cellsrenderer: (row, columnfield, value, defaulthtml, columnproperties, rowdata) => {

return ‘<div class=”jqx-grid-cell-right-align” style=”margin-top: 8.5px;”>’ + decimalRounding(value,rowdata.baseNoOfDecimal) + ‘</div>’;
},
initEditor: async (row: number, cellvalue: any, editor: any): Promise<void> => {
let rowData = record.child[row];
editor.jqxNumberInput({ decimalDigits: rowData.baseNoOfDecimal, digits: 13, max: 9999999999999.999, min: 0, spinButtonsStep: 0 });
if (!cellvalue) { cellvalue = 0; }
editor.jqxNumberInput(‘val’, cellvalue);
editor.jqxNumberInput(‘focus’);
},
validation: (cell: any, value: any): any => {
let rowData = record.child[cell.row];//self.FormGrid.getrowdata(cell.row);
rowData.isError = false;
if (rowData && rowData.hasAltUnit) {
if (value > 0) {
if (value > rowData.orderQty) {
//this.isValidError = true;
rowData.isError = true;
return {
message: ‘Disp. Qty.should be greater than Ord. Qty’,
result: false
};
}

let cFactor = Number(rowData.cFactor);

if (value && cFactor) {
if (value === 0 || cFactor === 0)
return false
if (rowData.relation == “No Link” || rowData.relation == “Loose Link”)
return true
if (rowData.altNoOfDecimal == 0) {
if (Number.isInteger(Number(decimalRounding((Number(value) / Number(cFactor)),3))))
return true
else {
rowData.isError = true;
return {
message: this.commonResourceModel.qtynotvalid,
result: false
};
}
}
else
return true
}
}
}
return true;
},
cellclassname: cellClassNameChildGrid
},
{ text: ”, datafield: ‘dispatchOldQty’, hidden: true },

{
text: ‘Ord. Qty.’, datafield: ‘orderQty’, width: ‘120’, editable: false,
columntype: ‘numberinput’,
cellsrenderer: (row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
return ‘<div class=”jqx-grid-cell-right-align” style=”margin-top: 8.5px;”>’ + decimalRounding(value,rowdata.baseNoOfDecimal) + ‘</div>’;
},
createEditor: (row: any, cellvalue: any, editor: any, cellText: any, width: any, height: any): void => {
editor.jqxNumberInput({ decimalDigits: 2, digits: 13, width: width, height: height });
},
cellclassname: cellClassNameChildGrid,
validation: (cell: any, value: any): any => {
let rowData = record.child[cell.row];
rowData.isError = false;
if (value === ” || value === null || value == undefined) {
rowData.isError = true;
return {
message: this.resourceModel.accounts_transaction_salesorderentry_quantity + ‘ ‘ + this.commonResourceModel.requiredKey,
result: false
};
}
return true;
}
},
{ text: ‘Unit’, datafield: ‘unit’, hidden: false, width: ’60’, editable: false, cellclassname: cellClassNameChildGrid },
{
text: ‘Disp. A. Qty.’, datafield: ‘dispatchAlternateQty’, width: ‘120’,
columntype: ‘numberinput’, editable: !record.isView,
cellbeginedit: (row: number, datafield: string, columntype: any, value: any, rowdata: any): void | boolean => {
let data = record.child[row];
if (data.rowStatus === GridStatusEnum.Deleted || data.isInvGenerated) {
return false;
}
if (data.relation == “No Link”)
return false;
return data.isAllowBaseAltUnit;
},
cellsrenderer: (row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
return ‘<div class=”jqx-grid-cell-right-align” style=”margin-top: 8.5px;”>’ + decimalRounding(value,rowdata.altNoOfDecimal) + ‘</div>’;
},
initEditor: async (row: number, cellvalue: any, editor: any): Promise<void> => {
//let rowData = self.FormGrid.getrowdata(row);
let rowData = record.child[row];
//let itemdetails = this.itemList.find(x => x.itemCode == rowData.itemCode);
// if (itemdetails != undefined) {
editor.jqxNumberInput({ decimalDigits: rowData.altNoOfDecimal, digits: 13, max: 9999999999999.999, min: 0, spinButtonsStep: 0 });
if (!cellvalue) { cellvalue = 0; }
editor.jqxNumberInput(‘val’, cellvalue);
editor.jqxNumberInput(‘focus’);
// }
},
validation: (cell: any, value: any): any => {
let rowData = record.child[cell.row];
rowData.isError = false;
if (value > 0) {
// let rowData = self.FormGrid.getrowdata(cell.row);
let cFactor = Number(rowData.cFactor);

if (value > rowData.orderAlternateQty) {
rowData.isError = true;
return {
message: ‘Disp. A. Qty.should be greater than Ord. A. Qty.’,
result: false
};
}

if (value && cFactor) {
if (value === 0 || cFactor === 0)
return false
if (rowData.relation == “No Link” || rowData.relation == “Loose Link”)
return true

if (rowData.baseNoOfDecimal == 0) {
if (Number.isInteger(Number(decimalRounding((Number(value) * Number(cFactor)),3))))
return true
else {
rowData.isError = true;
return {
message: this.commonResourceModel.altqtynotvalid,
result: false
};
}
}
else
return true
}

}
return true;
},
cellclassname: cellClassNameChildGrid
},
{ text: ”, datafield: ‘dispatchOldAlternateQty’, hidden: true },
{
text: ‘Ord. A. Qty.’, datafield: ‘orderAlternateQty’, width: ‘120’, editable: false,
columntype: ‘numberinput’,
cellsrenderer: (row, columnfield, value, defaulthtml, columnproperties, rowdata) => {
return ‘<div class=”jqx-grid-cell-right-align” style=”margin-top: 8.5px;”>’ + decimalRounding(value,rowdata.altNoOfDecimal) + ‘</div>’;
},
createEditor: (row: any, cellvalue: any, editor: any, cellText: any, width: any, height: any): void => {
editor.jqxNumberInput({ decimalDigits: 2, digits: 13 });
},
cellclassname: cellClassNameChildGrid,
validation: (cell: any, value: any): any => {
let rowData = record.child[cell.row];
rowData.isError = false;
if (value === ” || value === null || value == undefined) {
rowData.isError = true;
return {
message: this.resourceModel.accounts_transaction_salesorderentry_quantity + ‘ ‘ + this.commonResourceModel.requiredKey,
result: false
};
}
return true;
}
},
{ text: ‘Pkt.’, datafield: ‘pkt’, hidden: false, width: ’60’, editable: false, cellclassname: cellClassNameChildGrid },
{
text: ‘Gen. Book’, datafield: ‘genBook’, width: ‘120’, editable: false,
createEditor: (row: any, cellvalue: any, editor: any, cellText: any, width: any, height: any): void => {
editor.jqxNumberInput({ decimalDigits: 2, digits: 13, width: width, height: height });
},
cellclassname: cellClassNameChildGrid,
validation: (cell: any, value: any): any => {
let rowData = record.child[cell.row];
rowData.isError = false;
if (value === ” || value === null || value == undefined) {
rowData.isError = true;
return {
message: this.resourceModel.accounts_transaction_salesorderentry_quantity + ‘ ‘ + this.commonResourceModel.requiredKey,
result: false
};
}
return true;
}
},
{
text: ‘Order No’, datafield: ‘orderNo’, editable: false,
cellclassname: cellClassNameChildGrid
},
{
text: ‘Order Date’, datafield: ‘date’, editable: false,cellsformat: ‘dd/MM/yyyy’,
cellclassname: cellClassNameChildGrid
},
{ text: ”, datafield: ‘cFactor’, hidden: true },
{ text: ”, datafield: ‘isAllowBaseUnit’, hidden: true },
{ text: ”, datafield: ‘isAllowBaseAltUnit’, hidden: true },
{ text: ”, datafield: ‘baseNoOfDecimal’, hidden: true },
{ text: ”, datafield: ‘altNoOfDecimal’, hidden: true },
{ text: ”, datafield: ‘hasAltUnit’, hidden: true },
{ text: ”, datafield: ‘relation’, hidden: true },
{ text: ‘rowstatus’, datafield: ‘rowstatus’, hidden: true, width: ‘150’ },
{ text: ‘IsChanged’, datafield: ‘isChanged’, hidden: true },
{ text: ”, datafield: ‘isFree’, hidden: true },
{ text: ”, datafield: ‘isReplFree’, hidden: true },
{ text: ”, datafield: ‘isError’, hidden: true }

];

if (nestedGridContainer != null) {
let settings = {
width: ‘100%’,
height: 200,
editable: true,
selectionmode: ‘singlecell’,
source: nestedGridAdapter,
columns: columns
};
let grid = jqwidgets.createInstance(#${nestedGridContainer.id}, ‘jqxGrid’, settings);

console.log(nestedGridContainer);
grid.addEventHandler(‘cellselect’, (event): void => {
console.log(event);
});

}
}

}

—————————
Grid Endedit Event

onGridCellEndedit(event) {

if (event.args.datafield == ‘isDispatch’) {
var rowdata = event.args.row;
rowdata.isDispatch = event.args.value;
let rootlist = this.FormGrid.getrows();
var row = rootlist.find(d => d.custid == rowdata.custid);
var index = rootlist.findIndex(d => d.custid == rowdata.custid);
row.child[event.args.rowindex].isDispatch = event.args.value;
rowdata.isDispatch = event.args.value;

if (!event.args.value) {
// row.dispatchQty = row.dispatchQty-rowdata.dispatchQty;
rowdata.dispatchQty = 0;
row.child[event.args.rowindex].quantity = 0;
row.child[event.args.rowindex].dispatchQty = 0;

rowdata.dispatchAlternateQty = 0;
row.child[event.args.rowindex].altQuantity = 0;
row.child[event.args.rowindex].dispatchAlternateQty = 0;
}
else {
//row.dispatchQty = row.dispatchQty+rowdata.dispatchQty;
rowdata.dispatchQty = rowdata.dispatchOldQty;
row.child[event.args.rowindex].quantity = rowdata.dispatchOldQty;
row.child[event.args.rowindex].dispatchQty = rowdata.dispatchOldQty;

rowdata.dispatchAlternateQty = rowdata.dispatchOldAlternateQty;
row.child[event.args.rowindex].altQuantity = rowdata.dispatchOldAlternateQty;
row.child[event.args.rowindex].dispatchAlternateQty = rowdata.dispatchOldAlternateQty;
}
this.FormGrid.begincelledit(index, ‘dispatchQty’);
this.FormGrid.endcelledit(index, ‘dispatchQty’, true);
this.FormGrid.updatebounddata(‘cells’);
this.FormGrid.endupdate();
}
if (event.args.datafield == ‘isDispatch’ || event.args.datafield == ‘dispatchAlternateQty’
|| event.args.datafield == ‘dispatchQty’) {
if(row.child)
{
var totaldispatchQty = row.child.filter(d => d.isDispatch == 1).reduce((a, b) => {
return (Number(a) + Number(b.dispatchQty))
}, 0);

var totaldispatchAltQty = row.child.filter(d => d.isDispatch == 1).reduce((a, b) => {
return (Number(a) + Number(b.dispatchAlternateQty))
}, 0);

this.FormGrid.setcellvalue(index, ‘dispatchQty’, totaldispatchQty);
this.FormGrid.setcellvalue(index, ‘dispatchAlternateQty’, totaldispatchAltQty);
}
}
}

image url https://ibb.co/DfKqXXd

[MartinParticipant]

Hello dineshp,

We do not have the practice to revise such an amount of source code.
It would be better if you could provide a simpler example.
You can take a look of how a cell of the child grid is updated in this Example.

Best Regards,
Martin

jQWidgets Team
https://www.jqwidgets.com/

[dineshpParticipant]

Thanks Matin

it’s working for me
I just used this line $(this.nestedGrids[index]).jqxGrid(‘setcellvalue’, childindex, columnNmae, value).

[adminKeymaster]

Hello dineshp,

Thank you for the update and for the community help as your post may help other users, too.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts