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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular 4: Saving Data from Grid

Thread ID:





131831 Jul 29,2017 12:17 PM UTC Jul 31,2017 12:22 PM UTC JavaScript 1
Tags: ejGrid
Craig Cocker
Asked On July 29, 2017 12:17 PM UTC

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>

Mani Sankar Durai [Syncfusion]
Replied On 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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon