Add Column/cell values dynamically on row data bound event.

[Remya Pillai]

I have created this grid in syncfusion ej2 es5.

Im trying to add the 3, 4, and 5th column dynamically on row data bound event. Initially I am hiding these columns. I want to add the column and its values on row data bound event after performing some operations as shown below.

I am able to show the column header on the said event. But I am not able to set its value.

Kindly suggest.

data = [

{ WorksId: 1, WorksName: 'Name1', Certificates: [{ Cert1: 'C11' }, { Cert2: null }, { Cert3: 'C13'}]},

{ WorksId: 2, WorksName: 'Name2', Certificates: [{ Cert1: 'C21' }, { Cert2: 'C22' }, { Cert3: 'C23' }]},

{ WorksId: 3, WorksName: 'Name3', Certificates: [{ Cert1: null }, { Cert2: 'C32' }, { Cert3: null }]},

{ WorksId: 4, WorksName: 'Name4', Certificates: [{ Cert1: 'C41' }, { Cert2: null }, { Cert3: 'C43' }]},

{ WorksId: 5, WorksName: 'Name5', Certificates: [{ Cert1: null }, { Cert2: 'C52' }, { Cert3: 'C53' }]},

]

var grid = new ej.grids.Grid({

dataSource: data,

enableHover: false,

allowSelection: false,

columns: [

{ field: 'WorksId', headerText: 'Works Id', width: 100 },

{ field: 'WorksName', headerText: 'Works Name', width: 120 },

{ headerText: 'Cert1', field: 'Cert1', width: 120, visible: false },

{ headerText: 'Cert2', field: 'Cert2', width: 120, visible: false },

{ headerText: 'Cert3', field: 'Cert3', width: 120, visible: false },

],

rowDataBound: rowBound,

height: 280

});

grid.appendTo('#Grid');

function rowBound(args) {

var addData;

var items = args.data.Certificates;

items.forEach(function (item) {

var key = Object.keys(item);

var result = item[key];

if (result != null) {

addData = 'Y';

}

else {

addData = 'N';

}

grid.showColumns(key); // Im able to show the column headers

grid.updateCell(1, a, addData) // Not able to bind the value to the cell of that column. Not sure //how to get the correct rowindex/columnindex and update the cell correctly with the addData value.

// And this should repeat for all the rows. ie, column header should be created only once. But cell data //must get added for all the rows.

});

}

}

Please provide some inputs.

[Hemanthkumar S]

Hi Remya Pillai,

Query: Add Column/cell values dynamically on row data bound event

Please find the below functionalities of the grid events and methods.

rowDataBound - This event triggers every time before the row element is appended to the Grid element.

dataBound - This event triggers when the data source is populated in the Grid.

showColumns - This method helps to show a column by its column name (headerText).

updateCell - This method helps To update the specified cell by a given value without changing into an edited state.

From your shared information we identified that you are trying to show the grid columns in the rowDataBound event, which leads to showing the same columns many times which is equal to the rowDataBound event trigger times and also identified that you are trying to update the cell value with the help of updateCell method but updateCell method works if the row already appended to the Grid but at the time of rowDataBound event, the row is now only going to append and also updateCell method need allowEditing property as true in the editSettings property. So we recommend that you invoke the showColumns and updateCell method in the dataBound event of the grid.

For more information please refer to the below documentation.

rowDataBound Documentation: https://ej2.syncfusion.com/documentation/api/grid#rowdatabound

dataBound Documentation: https://ej2.syncfusion.com/documentation/api/grid#databound

showColumns Documentation: https://ej2.syncfusion.com/documentation/api/grid#showcolumns

updateCell Documentation: https://ej2.syncfusion.com/documentation/api/grid#updatecell

editSettings Documentation: https://ej2.syncfusion.com/documentation/api/grid#editsettings

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Hemanth Kumar S

[Remya Pillai]

Thanks for the help.

As per the suggestion, Im trying to update grid on dataBound event after showing the columns.

Still I am not able to update my cell with new value.

                      var CheckListData = data;

                       grid = new ej.grids.Grid({

                        // dataSource: data,  datasource is added on the ajax function of page load.....

                        toolbar: ['Search'],

                        columns: CheckListData,

                        cssClass: 'checkListItem',

                        frozenColumns: 1,

                        editSettings: { allowEditing: true },

                        dataBound: loadRowData,

                    });

                    grid.appendTo('#Grid');

                    function loadRowData(args) {

                   // certificateTypeIndexOnLoad gives the index of columns to be loaded...

                       certificateTypeIndexOnLoad.forEach(function (item) {

                            grid.showColumns([CheckListData[item].headerText]);

                        });

                        let data = this.getCurrentViewRecords();

                        for (let i = 0, len = data.length; i < len; i++) {

                            var keys = Object.keys(data[i]);

                            for (var j = 0; j < keys.length; j++) {

                                var keyName = keys[j];

                                var rowIndex = i;

                                grid.updateCell(rowIndex, keyName,"Y");

                            }

                        }

                    }

    Here, my grid is getting populated with the value appended to the data source. But I want to change the data to "N" for null column value and "Y" for non-null values. And I tried it in data bound event, by updatecell after showing columns. Still not working. Could you please guide me on this.        

[Hemanthkumar S]

Hi Remya Pillai,

Query: not able to update my cell with new value

From your response identified that you are using normal edit mode. The updateCell method only works with Batch Edit mode. The setCellValue method updates particular cell values based on the given primary key value. Based on your update we prepared a sample and recommend that you use the setCellValue method if you want to update the cell value only in the UI.

Please refer to the below code example, documentation, and sample for more information.

[index.js]

function loadRowData(args) {

  this.setCellValue(1, 'WorksName', 'VINET');

  this.setCellValue(1, 'Certificates.1.Cert2', 'N');

}

 

Sample Link: https://stackblitz.com/edit/rm9lyk-uee66y?file=index.js

Documentation Link: https://ej2.syncfusion.com/documentation/api/grid/#setcellvalue

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Hemanth Kumar S

[Remya Pillai]

Thanks for the response. 

I want to update cell without make the cell editable.

I have achieved it in rowDataBound event by writing below function

  function loadRowData(args) {

                        if (args.row.children.length > 1) {

                            for (var i = 0; i < grid.columns.length - 1; i++) {

                                if (args.row.children[i].innerText == "") {

                                    args.row.children[i].innerHTML = "<strong class='text-danger'>N</strong>";

                                }

                                else {

                                    args.row.children[i].innerHTML = "<a rel='nofollow' href='#' class='text-success'> <strong>Y</strong></a>";

                                }

                            }

                        }

                    }

Thanks for all the inputs.

[Hemanthkumar S]

Hi Remya Pillai,

From your shared information we identified that you are changing the data in the UI only and it will not update the data in the grid data source. Based on your update we prepared a sample and recommend that you set the updated data to the grid data source with the help of the data object obtain in the rowDataBound event.

Please refer to the below code example, and sample for more information.

[index.js]

function rowDataBound(args) {

  if (args.row.children.length > 1) {

    for (var i = 0; i < grid.columns.length - 1; i++) {

      if (args.row.children[i].innerText == '') {

        updateDataSource(args.data, grid.columns[i], 'N');

        args.row.children[i].innerHTML =

          "<strong class='text-danger'>N</strong>";

      } else {

        updateDataSource(args.data, grid.columns[i], 'Y');

        args.row.children[i].innerHTML =

          "<a rel='nofollow' href='#' class='text-success'> <strong>Y</strong></a>";

      }

    }

  }

}

 

function updateDataSource(data, column, newValue) {

  if (!column.isPrimaryKey) {

    var fields = column.field.split('.');

    if (fields.length > 1) {

      data[fields[0]][fields[1]][fields[2]] = newValue;

    } else {

      data[fields[0]] = newValue;

    }

  }

}

 

Sample Link: https://stackblitz.com/edit/rm9lyk-ruwmxd?file=index.js

If you require further assistance, please do not hesitate to contact us. We are always here to help you.

Regards,

Hemanth Kumar S

[Remya Pillai]

Thanks a lot for the information.

[Suganya Gopinath]

Hi Remya, 

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.