We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Angular 4: Saving Data from Grid

Hi guys,

I am new to SyncFusion and just trying it out and have successfully integrated SyncFusion into my angular (4) project.

I have also established a grid in my components, it is easy enough to have it display the data based on my data source.

I am trying to work out how i get changes made to the data in the grid i.e. how do i access the batchSave method from my template and tell it to pass the data back to my component.


import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { CustomerModel } from './../../../shared/models/';
import { EJComponents } from 'ej-angular2';

selector: 'mj-customer-list',
templateUrl: './customer-list.component.html',
styleUrls: ['./customer-list.component.scss']
export class CustomerListComponent {

@Input() entityList: CustomerModel[];
@Output() updatedEntity = new EventEmitter<CustomerModel>();

public pageSettings;
public editSettings;
public toolbarItems;
public filterType;
public selectionMode;

constructor() {

this.pageSettings = { pageSize: '10' };
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: 'normal' };
this.toolbarItems = { showToolbar: true, toolbarItems: ['add', 'edit', 'delete', 'update', 'cancel'] };
this.filterType = { filterType: 'menu' };
this.selectionMode = { selectionMode: ['row'] };

onEditEntity(entity: CustomerModel) {



<ej-grid *ngIf="entityList && showTable" id="Grid" [dataSource]="entityList" [allowPaging]="true" [pageSettings]="pageSettings"
[allowFiltering]="true" [filterSettings]="filterType" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" allowSelection="true"
selectionType="multiple" [selectionSettings]="selectionMode">
<e-column field="$key" headerText="ID" width="10" textAlign="left"></e-column>
<e-column field="name" headerText="Name" width="80" textAlign="left"></e-column>
<e-column field="image" headerText="Logo" width="80" textAlign="left"></e-column>

1 Reply

MS Mani Sankar Durai Syncfusion Team July 31, 2017 12:22 PM UTC

HI Craig, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you would like to perform batch/excel like editing in grid and also to get the data before batch save.  Also we found that you have used editMode as “Normal” instead of using as “batch” to perform batchsave. When using Normal edit mode we cannot save multiple rows at a time and it is not feasible. So we suggest you to use the editMode as “batch” so we can save the changed, deleted and added at once. 
Refer the following documentation link. 
To get the value before batch save use beforebatchsave event in grid. 
Event that can be used while using batch editing in grid. 

Please let us know if you need further assistance. 

Manisankar durai. 

Live Chat Icon For mobile
Up arrow icon