feature(EJ2-3757): Batch editing sample added.

Author: pipeline

src/grid/aggregatedefault-plnkr.json

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { orderDatas } from './data';
+import { EditService, ToolbarService, PageService } from '@syncfusion/ej2-ng-grids';
+
+@Component({
+    selector: 'ej-gridbatchedit',
+    templateUrl: 'batch-editing.html',
+    providers: [ToolbarService, EditService, PageService]
+})
+export class BatchEditComponent implements OnInit {
+    public data: Object[];
+    public editSettings: Object;
+    public toolbar: string[];
+    public orderidrules: Object;
+    public customeridrules: Object;
+    public freightrules: Object;
+    public editparams: Object;
+    public pageSettings: Object;
+
+    public ngOnInit(): void {
+        this.data = orderDatas;
+        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'batch' };
+        this.toolbar = ['add', 'edit', 'delete', 'update', 'cancel'];
+        this.orderidrules = { required: true };
+        this.customeridrules = { required: true };
+        this.freightrules =  { required: true };
+        this.editparams = { params: { popupHeight: '300px' }};
+        this.pageSettings = {pageCount: 5};
+    }
+}

src/grid/aggregategroup-plnkr.json

@@ -0,0 +1,28 @@
+<div class="control-section">
+    <ej-grid [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' textAlign="right" [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='ShipName' headerText='Ship Name' width='170'></e-column>
+            <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams' ></e-column>
+        </e-columns>
+    </ej-grid>
+    <div id="description">
+        <p>
+            Batch editing mode is used to send bulk request (add, update and delete) to Grid. You can start editing by double clicking
+            a cell and can change cell value. Edited cell will be highlighted while navigating to next cell or any other
+            row, so that you know which fields or cells has been edited.
+        </p>
+        <p>In this demo, batch editing is enabled by defining mode as `batch`.</p>
+        <br>
+        <p style="font-weight: 500">Injecting Module</p>
+        <p>
+            Grid component features are segregated into individual feature-wise modules. To use editing feature, we need to inject
+            <code><a target="_blank" class="code"
+                href="http://ej2.syncfusion.com/angular/documentation/grid/api-edit.html">
+                EditService
+                </a></code> into the <code>@NgModule.providers</code> section.
+        </p>
+    </div>
+</div>

src/grid/batch-editing-plnkr.json

@@ -12,6 +12,6 @@ export class ColumnChooserComponent implements OnInit {
     public toolbar: string[];
     ngOnInit(): void {
          this.data = data;
-          this.toolbar = ['columnchooser'];
+         this.toolbar = ['columnchooser'];
     }
 }