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.
Component
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { CustomerModel } from './../../../shared/models/';
import { EJComponents } from 'ej-angular2';
@Component({
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) {
this.isNew.emit(false);
this.updatedEntity.emit(entity);
}
}
Template
<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-columns>
<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>
</e-columns>
</ej-grid>
SIGN IN To post a reply.
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.
Regards,
Manisankar durai.
SIGN IN To post a reply.
- 1 Reply
- 2 Participants
-
CC Craig Cocker
- Jul 29, 2017 12:17 PM UTC
- Jul 31, 2017 12:22 PM UTC
