feature(EJ2-3951): Editing samples added.

Author: pipeline

src/grid/batch-editing-plnkr.json

@@ -5,12 +5,28 @@
 </div>
 
 <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/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/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/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>
     <p style="font-weight: 500">Injecting Module</p>
     <p>
         Grid features are segregated into individual feature-wise modules. To use editing feature, we need to inject

src/grid/batch-editing.html

@@ -13,7 +13,7 @@ this.default = (): void => {
             editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'batch' },
             allowPaging: true,
             pageSettings: {pageCount: 5},
-            toolbar: ['add', 'edit', 'delete', 'update', 'cancel'],
+            toolbar: ['add', 'delete', 'update', 'cancel'],
             columns: [
                 {
                     field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'right',

src/grid/batch-editing.ts

@@ -5,11 +5,23 @@
 </div>
 
 <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/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/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>
     <p style="font-weight: 500">Injecting Module</p>
     <p>
         Grid features are segregated into individual feature-wise modules. To use editing feature, we need to inject

src/grid/dialog-editing-plnkr.json

@@ -12,7 +12,7 @@ this.default = (): void => {
             editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'dialog' },
             allowPaging: true,
             pageSettings: {pageCount: 5},
-            toolbar: ['add', 'edit', 'delete', 'update', 'cancel'],
+            toolbar: ['add', 'edit', 'delete'],
             columns: [
                 {
                     field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'right',

src/grid/dialog-editing.html

@@ -6,13 +6,22 @@
 </div>
 
 <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/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>
-
     <p style="font-weight: 500">Injecting Module</p>
     <p>
         Grid features are segregated into individual feature-wise modules. To use editing feature, we need to inject