feature(EJ2-3951): Editing samples added.

Author: pipeline

src/grid/batch-editing-plnkr.json

@@ -20,7 +20,7 @@ export class BatchEditComponent implements OnInit {
     public ngOnInit(): void {
         this.data = orderDatas;
         this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'batch' };
-        this.toolbar = ['add', 'edit', 'delete', 'update', 'cancel'];
+        this.toolbar = ['add', 'delete', 'update', 'cancel'];
         this.orderidrules = { required: true };
         this.customeridrules = { required: true };
         this.freightrules =  { required: true };

src/grid/batch-editing.component.ts

@@ -5,17 +5,32 @@
             <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-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' [edit]='editparams'></e-column>
         </e-columns>
     </ej-grid>
     <div id="description">
+        <p> The Grid supports CRUD operations. This CRUD operations can be configured in Grid using
+            <code><a target="_blank" class="code" href="http://ej2.syncfusion.com/angular/documentation/grid/api-editSettings.html">
+            editSettings</a></code>. Also, It has different modes to manipulate the datasource.
+        </p>
+        <p>The available modes are,</p>
+        <ul>
+            <li><code>Inline</code></li>
+            <li><code>Dialog</code></li>
+            <li><code>Batch</code></li>
+        </ul>
         <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.
+            In this demo, Batch mode is enabled for Editing by defining <code><a target="_blank" class="code"
+            href="http://ej2.syncfusion.com/angular/documentation/grid/api-editSettings.html#mode-string">
+            editSettings.mode
+            </a></code> as <code>batch</code>. You can start editing by double clicking a cell and can change cell value.
+            The edited cell will be highlighted while navigating to a new cell, so that you know which cells had been edited.
+            You can bulk save the edited data to datasource by click on the toolbar's <code>update</code> button or by externally
+            invoking the <code><a target="_blank" class="code"
+            href="http://ej2.syncfusion.com/angular/documentation/grid/api-edit.html#batchsave">
+            batchSave
+            </a></code> method.
         </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

src/grid/batch-editing.html

@@ -20,7 +20,7 @@ export class DialogEditComponent implements OnInit {
     public ngOnInit(): void {
         this.data = orderDatas;
         this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'dialog' };
-        this.toolbar = ['add', 'edit', 'delete', 'update', 'cancel'];
+        this.toolbar = ['add', 'edit', 'delete'];
         this.orderidrules = { required: true };
         this.customeridrules = { required: true };
         this.freightrules =  { required: true };

src/grid/dialog-editing-plnkr.json

@@ -9,12 +9,23 @@
         </e-columns>
     </ej-grid>
     <div id="description">
+        <p> The Grid supports CRUD operations. This CRUD operations can be configured in Grid using
+            <code><a target="_blank" class="code" href="http://ej2.syncfusion.com/angular/documentation/grid/api-editSettings.html">
+            editSettings</a></code>. Also, It has different modes to manipulate the datasource.
+        </p>
+        <p>The available modes are,</p>
+        <ul>
+            <li><code>Inline</code></li>
+            <li><code>Dialog</code></li>
+            <li><code>Batch</code></li>
+        </ul>
         <p>
-            Dialog Editing is used to edit rows through dialog component. You can start editing by double clicking a row or toolbar `Edit`
-            button and then you can change the row values.
+            In this demo, Dialog mode is enabled for Editing by defining <code><a target="_blank" class="code"
+            href="http://ej2.syncfusion.com/angular/documentation/grid/api-editSettings.html#mode-string">
+            editSettings.mode
+            </a></code> as <code>dialog</code>. You can start editing by double clicking a row or click on toolbar's <code>Edit</code>            button, then the currently selected row will be shown on a dialog and you can change the row values and save
+            edited data to the datasource.
         </p>
-        <p>In this demo, dialog editing is enabled by defining mode as `dialog`.</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

src/grid/dialog-editing.component.ts

@@ -19,7 +19,7 @@ export class NormalEditComponent implements OnInit {
 
     public ngOnInit(): void {
         this.data = orderDatas;
-        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'normal' };
+        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
         this.toolbar = ['add', 'edit', 'delete', 'update', 'cancel'];
         this.orderidrules = { required: true };
         this.customeridrules = { required: true };

src/grid/dialog-editing.html

@@ -9,13 +9,21 @@
         </e-columns>
     </ej-grid>
     <div id="description">
+        <p> The Grid supports CRUD operations. This CRUD operations can be configured in Grid using
+            <code><a target="_blank" class="code" href="http://ej2.syncfusion.com/angular/documentation/grid/api-editSettings.html">
+            editSettings</a></code>. Also, It has different modes to manipulate the datasource.
+        </p>
+        <p>The available modes are,</p>
+        <ul>
+            <li><code>Inline</code></li>
+            <li><code>Dialog</code></li>
+            <li><code>Batch</code></li>
+        </ul>
         <p>
-            Inline Editing is used to handle CRUD opertions. In Inline Editing mode the row itself is changed as edited row. You can
-            start editing by double clicking a row or toolbar `Edit` button and then you can change the row values.
+            In this demo, Inline mode is enabled for Editing. You can start edit any row by double clicking on it or click on toolbar’s
+            <code>Edit</code> button, then the currently selected row will be changed to edited state. You can change the row values
+            and save edited data to datasource.
         </p>
-
-        <p>In this demo, inline editing is enabled by defining mode as `normal`.</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