After setData is called, changes made to the row in a rowDataBound callback are not reflected in the UI

[Grant EFive]

I have a `rowDataBound` handler on my grid which updates the classes applied to a data row in my table.

After I call the grids' setRowData method, the rowDataBound callback is triggered as expected, but changes made to the row object are not applied to the rendered grid/row.

This seems to be a bug in the ej2-grids\src\grid\renderer\row-renderer\refresh method, which only sets the innerHTML of the row.

[Rajapandi Ravi]

Hi Grant, 

Greetings from syncfusion support 

Based on your query we have prepared a sample and tried to reproduce the issue. But it was works fine from our end. In this below sample we have created a customcss and add the custom css in the rowDataBound event based on the condition. Then while calling the setRowData method the rowDataBound triggered but maintain the added classlist and display properly in the Grid.  Please refer the below code example and sample for more information. 

Index.ts 

let grid: Grid = new Grid( 

        { 

            dataSource: orderDataSource, 

            rowDataBound: function (args) { 

              if ((args.data as any).ShipCountry === "Brazil") { 

                args.row.classList.add('customcss'); 

              } 

            }, 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' }, 

            allowPaging: true, 

            pageSettings: { pageCount: 5 }, 

            toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'], 

            columns: [ 

                .  .  .  .  .  . 

                .  .  .  .  .  . 

             ], 

        }); 

    grid.appendTo('#Grid'); 

    document.getElementById('button').addEventListener("click", function (args) { 

      var grid = (document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0]; 

      var obj = {OrderID: 10248, CustomerID: "Edge", Freight: 22.38, ShipCountry: "USA"}; 

      grid.setRowData(10248, obj); 

    }) 

 

 

Index.html 

<style> 

            body{ 

                touch-action:none; 

            } 

            .e-grid .e-gridcontent tr.e-row.customcss{          //customcss 

              font-weight: bold; 

              } 

        </style> 

 

 

Sample: https://stackblitz.com/edit/ijbs6u?file=index.ts 

If you still face the issue, Please share the below details that will be helpful for us to provide better solution 

1. Reproduce the issue with our above attached sample. 

2. Please share the issue in video demonstration. 

3. Please share your Grid rendering code 

Regards 

Rajapandi R

[Grant EFive]

The sample you supplied does not correctly capture the issue.

I forked your sample in order to demonstrate: https://stackblitz.com/edit/ijbs6u-2id7gc?file=index.ts

Expected result: after clicking the 'SetRowData' button, the row with ID 10250 should no longer have the 'customcss' class applied

[Rajapandi Ravi]

Hi Grant, 

Thanks for the update 

We are trying to reproduce the issue with your provided sample. But its works fine in your sample. In rowdatabound event, initially we have added the customcss for the Grid row elements based on condition. After clicking the setRowData button the added class was persist and it also present in the TR elements. Please refer the below screenshot and video for more information. 

Screenshot: 

 

Sample: https://stackblitz.com/edit/ijbs6u-vwktyp?file=index.ts 

Video demo: https://www.syncfusion.com/downloads/support/forum/153055/ze/153055-1622686754.zip 

If you still face the issue, please share the below details that will be helpful for us to provide better solution 

1. Please share the issue scenario in video demonstration.
2. Share the pictorial representation of the issue.

Regards, 

Rajapandi R 

[Grant EFive]

Don't think you understand: the customcss class SHOULD NOT be 'persisted': as it is removed (from the 'row' object) in the call back. 

NOTE: the classList.toggle method is able to dynamically add and remove classes based on the second parameter

Put another way: You should be seeing that the customcss class is removed from the rendered row as it is removed from the 'row' object in the call back.

[Rajapandi Ravi]

Hi Grant, 

 

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.  

 

https://www.syncfusion.com/account/login 

 

 

Regards, 

Rajapandi R