Add new row not working programmatically in grid.

[Vaishnav]

Hi Syncfusion team,

I am trying to add an extra button on the toolbar and have same functionality as that of an 'Add' button in toolbar.

I have parent and child tabs. The grid is placed inside the child tab. My toolbar is:

    editSettings: EditSettingsModel = { allowAdding: true, allowEditing: true, allowDeleting: true, mode: 'Normal' };

toolbar = ['Add', { text: 'Add Group', tooltipText: 'Add Group', prefixIcon: 'e-circle-add', id: 'addGroup', align: 'Left' }, 'Edit', 'Delete', 'Update', 'Cancel'];

    toolbarClick(args) {

        if (args.item.id === 'addGroup') {

console.log(this.dataGrid);

            console.log(this.dataGrid.editModule);

            this.dataGrid.editModule.addRecord();

        }

    }

But, the new row is not getting initialized and 'dataGrid.editModule' is coming as undefined even though console.log(this.dataGrid) shows grid properties.

The same code works if I place the grid in parent tab.

Thanks in advance,

Vaishnav

[Vikram Sundararajan]

Hi Vaishnav,

Greetings from Syncfusion support,

Based on your query you are using parent and child tabs with grid. When addRecord method to add the new row in child tab's grid, new row does not get initialized., we have prepared a sample and checked it, but we were unable to replicate the issue on our end. Please refer he below sample for more reference,

Sample: https://stackblitz.com/edit/angular-uwbezk-e5qcku?file=src%2Fapp.component.html

We recommend using the provided sample as a reference to resolve the issue you mentioned. If you are still experiencing the issue, we recommend attempting to reproduce it using the attached sample. If possible, please provide us with version details and sample of the grid that reproduces the issue. This will assist us in better understanding and validating your query.

Regards,

Vikram S