setCellData for calculated columns Causes issues in editing another cell

Posted by: unnati.k26 on 18 May 2021, 8:17 pm EST

  • Posted 18 May 2021, 8:17 pm EST

    I am using the below script to update the "Column3" data based on "Column1" and "Column2". If I do not use the "setCellData" then the "Column3" data doesn't get its grand total in the bottom row and also the export will not have any data populated for it.

    So to resolve the issue I used "setCellData" and the two issues are fixed. But now I am not able to edit "Column1" or "Column2" properly as these columns are getting flickered. You can check the behavior at
    https://unnati-khanorkar.outsystemscloud.com/DataGridIssue/Entry1.aspx

    Adding the code snippet used -
    //Add Grand total row at the end
    var addSumRow = function(gridId){
    var gObj = GridOS.ComponentUtils.getGridObjectById(gridId);
    var grid = gObj.grid;
    grid.columnFooters.rows.push(new wijmo.grid.GroupRow());
    grid.bottomLeftCells.setCellData(0, 0, 'Total');
    };



    // custom cell calculation
    var calculateGridColumn = function(gridId){
    var gObj = GridOS.ComponentUtils.getGridObjectById(gridId);
    var grid = gObj.grid;
    grid.formatItem.removeAllHandlers();
    // wijmo.grid.xlsx.FlexGridXlsxConverter.save(grid,{formatItem:exportFormatItem},"Grid.xlsx");
    grid.formatItem.addHandler(function (s, e) {
    //
    // cells and column footer panels only
    if (e.panel == s.cells) {
    //
    // get row, column, and data item (or group description)
    var r = s.rows[e.row];
    var c = s.columns[e.col];
    var item = s.rows[e.row].dataItem;
    var group = r instanceof wijmo.grid.GroupRow ? item : null;
    // assume value is not negative
    var negative = false;
    //
    // calculate
    if (c.binding == 'Column3') {
    var column3Data = group ? group.getAggregate('Sum', 'Column1') + group.getAggregate('Sum', 'Column2')
    : item.Column1 + item.Column2;
    var column3Data = isNaN(column3Data)?0:column3Data;
    e.cell.textContent = wijmo.Globalize.format(column3Data, c.format);
    e.cell.innerHTML = wijmo.Globalize.format(column3Data, c.format);

    e.panel.setCellData(e.row,e.col,wijmo.Globalize.format(column3Data, c.format));
    // s.invalidate();
    //
    negative = column3Data < 0;
    }


    //
    // update 'negative' class on cell
    wijmo.toggleClass(e.cell, 'negative', negative);
    }

    });

    grid.invalidate();
    };

    Please let me know how can I fix the issue as I am not able to edit the column1 and column 2 data.
  • Marked as Answer

    Replied 19 May 2021, 10:10 pm EST

    Hi Unnati,

    The issue occurs because the grid gets invalidated every time the setCellData() method is called, to resolve you need to pass the false parameter in the setCellData() at invalidate and also set the innerHTML of the current cell to the text so that it is displayed also without having to refresh the grid. Please refer to the API:https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#setcelldata
    e.panel.setCellData(e.row, e.col, wijmo.Globalize.format(column3Data, c.format),true,false);
    e.cell.innerHTML = wijmo.Globalize.format(column3Data, c.format);

    As a suggestion, I would recommend you use calcultedFields property of collectionView to do the calculation, which will be a lot easier. For using calcultedFields please make sure you have wijmo build 5.20203.748 and above.

    Demo: https://www.grapecity.com/wijmo/demos/Core/CollectionView/CalculatedFields/purejs

    Regards.
  • Replied 23 May 2021, 3:22 pm EST

    Thanks a lot Ashwin. It worked!
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels