Common Save Button

[Sagar]

Hi,

 I have three grid on same page.

Want to create custom one save button for these three grids for batch save?

and also how to keep only add, delete button for these grids in batch edit mode?

[Rajapandiyan Settu]

Hi Sagar, 

Thanks for contacting us. 

Query 1: Want to create custom one save button for these three grids for batch save? 

              

You can achieve your requirement by using  `batchSave` method in the grid. In the below sample we have used `batchSave` method to save the edited and deleted records in three grids by button click event.  

Query 2: how to keep only add, delete button for these grids in batch edit mode? 

We suggest you to keep `Add`, `Delete` Items only in the toolbar to achieve your requirement. please refer the below code and sample for more information.  

Component.ts 

import { Component, OnInit,ViewChild } from '@angular/core'; 

import { orderData } from './data'; 

import { EditService, ToolbarService, PageService,GridComponent } from '@syncfusion/ej2-angular-grids'; 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html', 

    providers: [ToolbarService, EditService, PageService] 

}) 

export class AppComponent { 

    public data: Object[]; 

    public editSettings: Object; 

    public toolbar: string[], 

    public pageSettings: Object; 

    @ViewChild("Batchgrid1",{static:true}) 

    public grid1:GridComponent; 

    @ViewChild("Batchgrid2",{static:true}) 

    public grid2:GridComponent; 

    @ViewChild("Batchgrid3",{static:true}) 

    public grid3:GridComponent; 

    public ngOnInit(): void { 

        this.data = orderData; 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' }; 

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

        this.pageSettings = {pageCount: 5}; 

    } 

    public Save():void{ 

      this.grid1.editModule.batchSave(); 

      this.grid2.editModule.batchSave(); 

      this.grid3.editModule.batchSave(); 

    } 

} 

Sample: https://stackblitz.com/edit/angular-1efxsy?file=app.component.html 

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

Please get back to us, if you need further assistance. 

Regards, 

Rajapandiyan S.