updateRow does not update rows of grid with rowTemplate

[Dimitris]

Hello,

When rowTemplate is used in a ejs-grid there is no selected row so the following code will not work:

let selectedRow = gridObj.getSelectedRowIndexes()[0];
gridObj.updateRow(selectedRow, data);
gridObj.refresh();

How can a grid row be updated? I have tried the following but it does not work (maybe selectedRow is HTML element?) :

let selectedRowIndex = gridObj.getRowIndexByPrimaryKey(key);
let selectedRow = gridObj.getRowByIndex(selectedRowIndex);
gridObj.updateRow(selectedRow, data);
gridObj.refresh();

I have also tried the following but it does not work (getRowsObject returns undefined even though the index is correct):

let selectedRowIndex = gridObj.getRowIndexByPrimaryKey(key);
let selectedRow = gridObj.getRowsObject()[selectedRowIndex];
gridObj.updateRow(selectedRow, data);
gridObj.refresh();

Any ideas?

[Aishwarya Rameshbabu]

Hi Dimitris,

Greetings from Syncfusion support.

When utilizing the `rowTemplate` feature, Grid rows can be customized using HTML layouts, enabling more adaptable and distinctive designs. However, this level of customization introduces certain constraints. Notably, the selection and editing functionalities are not compatible with the `rowTemplate` feature in the Grid component. This limitation has been comprehensively outlined in our official documentation. For further details, please refer to the link provided below.

Documentation Link: Row-template-limitations

Consequently, methods such as `updateRow` are unsupported when using the `rowTemplate` feature. As an alternative, you can directly update the `dataSource` and refresh the Grid. For additional information, please review the accompanying code example, sample and vide demonstration, which demonstrate how the data in the first row can be updated upon a button click.

<script>

    document.getElementById('btn').addEventListener('click', function () {

        let grid = document.getElementsByClassName('e-grid')[0]?.ej2_instances[0];

        let key = 1

        let data = {

            "EmployeeID": 1,

            "LastName": "Updated LastName",

            "FirstName": "Updated FirstName",

            "Title": "Sales Representative",

            "TitleOfCourtesy": "Ms.",

            "BirthDate": "1948-12-08T05:00:00.000Z",

            "HireDate": "1992-05-01T04:00:00.000Z",

            "Address": "507 - 20th Ave. E.\r\nApt. 2A",

        };

 

        let updatedDataSource = grid.dataSource.map(item =>

            item.EmployeeID === key ? { ...item, ...data } : item

        );

 

        grid.dataSource = updatedDataSource; // Update the new data

        grid.refresh(); // To refresh the Grid

 

    })

</script>

 

Sample and Video demonstration: Please find in the attachment.

Regards,

Aishwarya R

Attachment: 196907SampleAndVideoDemo_3ccc9d2c.zip

[Dimitris]

Thank you for your reply and your solution; it works.

I agree that there is no row selection when rowTemplate is used. And it is logical that methods like  getSelectedRowIndexes() do not work. 

But why  getRowsObject() and  getRowByIndex do not work? They do not seem to depend on row selection...

Can you explain?

[Aishwarya Rameshbabu]

Hi Dimitris,

You are correct that getRowsObject() and getRowByIndex() are not directly dependent on row selection. However, these methods rely on the default row rendering structure provided by the Syncfusion Grid.

When the `rowTemplate` feature is enabled, the Grid deviates from its standard row rendering process. Instead, it employs a fully customized HTML structure defined by the specified template. This approach overrides the Grid's internal rendering logic and affects the “getRowByIndex” method as it relies on the DOM structure to fetch the rows by their specified index.

However, the `getRowsObject()` method continues to return row objects even when the `rowTemplate` feature is enabled in the Grid.

Regards,

Aishwarya R

[Dimitris]

Thank you very much for your prompt replies.

Excellent explanation. I have been using Syncfusion for many, many years and I have always enjoyed your superb support in the community forums. 

[Aishwarya Rameshbabu]

Hi Dimitris,

Thank you so much for your kind feedback!

Please get back to us if you need any other assistance.

Regards,

Aishwarya R