jQuery UI Widgets Forums Getting Started Jqx Grid – child grid cell value is not update

This topic contains 3 replies, has 3 voices, and was last updated by  admin 1 week, 2 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • dineshp
    Participant

    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

    • This topic was modified 3 weeks ago by  dineshp.

    Martin
    Participant

    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/


    dineshp
    Participant

    Thanks Matin

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


    admin
    Keymaster

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.