How to get list data of grid after edit(mode:batch) without updating in toolbars

[Nguyen Van Quang]

Team,

I have grid(ejs-grid) with editSetting: {mode:'Batch'} and a button. 

How when I press the button, I will get all of data in grid after editing without having to press update button in toolbars

I think the idea will be after clicking the button => call update in toolbar => get data in grid. But I don't know how to call the update function in the toolbar

Thanks!

[Manivel Sellamuthu]

Hi Nguyen, 

Greetings from Syncfusion support. 

From your query we can understand that you want to perform the action of the update toolbar programmatically in a button click. For this requirement you can batchSave method of the Grid EditModule. 

Based on this requirement, we have prepared a sample. Please refer the below code example and sample for more information. 

[App.component.html] 

<div class="control-section"> 

    <button ejs-button (click)="buttonClick()" [isPrimary]="true">Update and get Data</button> 

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

            <e-columns> 

                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 

                <e-column field='CustomerID' headerText='Customer ID' width='120' [validationRules]='customeridrules'></e-column> 

                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column> 

                <e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' editType='datepickeredit' textAlign='Right'></e-column> 

                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column> 

            </e-columns> 

        </ejs-grid> 

 

</div> 

[App.component.ts] 

 

export class AppComponent { 

 

    @ViewChild('batchgrid',{static: true}) 

    public grid: GridComponent; 

    public orderidrules: Object; 

 

    public ngOnInit(): void { 

        this.data = orderData; 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true,showConfirmDialog : false 

, mode: 'Batch' }; 

        this.toolbar = ['Add', 'Delete', 'Update', 'Cancel']; 

        this.orderidrules = { required: true, number: true }; 

        this.customeridrules = { required: true }; 

        this.freightrules =  { required: true }; 

        this.editparams = { params: { popupHeight: '300px' }}; 

        this.pageSettings = {pageCount: 5}; 

    } 

 

    buttonClick (args) { 

// to perform the action of the update toolbar programmatically 

      this.grid.editModule.batchSave(); 

     console.log(this.grid.getCurrentViewRecords()); 

    } 

} 

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

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

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Nguyen Van Quang]

It worked
Thanks for your help

[Manivel Sellamuthu]

Hi Nguyen, 

Thanks for your update. 

We are glad that the provided solution helped. 

Please let us know, if you need further assistance. 

Regards, 

Manivel