How to add/update a new row programmatically in Angular Grid

[Shounak]

I want to get a new row on click of a button, in which user will give input in different colums as text box inputs, and after that the data source should be updated as the input the user gives.Kindly let me know how to implement this

[Pavithra Subramaniyam]

Hi Shounak, 

 

Thanks for contacting Syncfusion support. 

 

From your query,  We suspect that you want to programmatically add a new row in Grid and update it. If yes you can achieve your requirement by using the “addRecord” method and “endEdit” methods of Grid edit module. Please refer to the below code example, documentation link and sample link for more information. 

 

[component.html] 

<button (click)="add($event)" >Add</button>  // for adding a new row with input box 

       <button (click)="update($event)" >Update</button>  // updating the added row 

        <ejs-grid #grid id='Normalgrid' [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

              .   .   . 

            </e-columns> 

        </ejs-grid> 

 

[component.ts] 

public add(e: any): void { 

        this.grid.editModule.addRecord(); 

    } 

public update(e: any): void { 

       this.grid.editModule.endEdit(); 

    } 

 

Sample               : https://stackblitz.com/edit/angular-fzhxzk-uauco6?file=app.component.ts 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#addrecord 

                               https://ej2.syncfusion.com/angular/documentation/api/grid/edit/#endedit 

 

Please get back to us if you need any further assistance on this. 

 

Regards, 

Pavithra S.