documentation(EJ2-000): source update from ej2-grid-docs

src/grid/grid/edit.md

@@ -367,7 +367,7 @@ grid.appendTo('#Grid');
 
 You can prevent the CRUD operations of the Grid by using condition in the [`actionBegin`](../api/grid/#actionbegin) event with requestType as `beginEdit` for editing, `add` for adding and `delete` for deleting actions.
 
-In the below demo, we prevent the CRUD operation based on the `Role` column value. If the Role Column is ‘employee’, we are unable to edit/delete that row.
+In the below demo, we prevent the CRUD operation based on the `Role` column value. If the Role Column is `Employee`, we are unable to edit/delete that row.
 
 {% tab template="grid/grid",es5Template="canceleditinline" %}
 
@@ -663,6 +663,68 @@ grid.cellEdit= function(args){
 
 {% endtab %}
 
+#### Cancel edit based on condition in Batch mode
+
+You can prevent the CRUD operations of the Batch edit Grid by using condition in the [`cellEdit`](../api/grid/#cellEdit), [`beforeBatchAdd`](../api/grid/#beforeBatchAdd) and [`beforeBatchDelete`](../api/grid/#beforeBatchDelete) events for Edit, Add and Delete actions respectively.
+
+In the below demo, we prevent the CRUD operation based on the `Role` column value. If the Role Column is `Employee`, we are unable to edit/delete that row.
+
+{% tab template="grid/grid",es5Template="canceleditbatch" %}
+
+```typescript
+import { Grid, Edit, Toolbar } from '@syncfusion/ej2-grids';
+import { data } from './datasource.ts';
+
+Grid.Inject(Edit, Toolbar);
+
+let isAddable: boolean = true;
+let grid: Grid = new Grid({
+    dataSource: data,
+    toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
+    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
+    columns: [
+        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
+        { field: 'Role', headerText: 'Role', width: 120, },
+        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
+        { field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150 }
+    ],
+    cellEdit: cellEdit,
+    beforeBatchAdd: beforeBatchAdd,
+    beforeBatchDelete: beforeBatchDelete,  
+    height: 240
+});
+grid.appendTo('#Grid');
+
+function cellEdit(args) {
+  if (args.rowData['Role'] == 'Employee') {
+    args.cancel = true;
+  }
+}
+function beforeBatchAdd(args) {
+  if (!isAddable) {
+    args.cancel = true;
+  }
+}
+function beforeBatchDelete(args) {
+  if (args.rowData['Role'] == 'Employee') {
+    args.cancel = true;
+  }
+}
+
+var button = document.createElement('button');
+button.innerText = 'Grid is Addable';
+document.body.insertBefore(button, document.body.children[0]);
+button.addEventListener('click', btnClick.bind(this));
+
+function btnClick(args) {
+  args.target.innerText == 'Grid is Addable' ? (args.target.innerText = 'Grid is Not Addable') : (args.target.innerText = 'Grid is Addable');
+  isAddable = !isAddable;
+}
+
+```
+
+{% endtab %}
+
 ## Dialog/Inline template
 
 The dialog/inline template editing provides an option to customize the default behavior of dialog editing. Using the dialog template, you can render your own editors by defining the [`editSettings.mode`](../api/grid/editSettings/#mode) as `Dialog/Inline` and [`editSetting.template`](../api/grid/editSettings/#template) as SCRIPT element ID or HTML string which holds the template.

src/grid/grid/how-to/open-pop-up-while-focusing-the-drop-down-edit-cell.md

@@ -0,0 +1,41 @@
+---
+title: "Open popup while focusing the dropdown edit cell"
+component: "Grid"
+description: "Learn how to open the popup list while focusing the dropdownedit cell."
+---
+
+# Open popup while focusing the dropdown edit cell
+
+You can open the DropDownList popup while focusing the cell by invoking the [`showPopup`](../../api/drop-down-list/#showpopup) method inside the ['focus'](../../api/drop-down-list/#focus) event of DropDownList component.
+
+In the below demo, we have bound the focus event for the edit DropDownList using the [`columns.edit.params`](../api/grid/column/#edit) property.
+
+{% tab template="grid/grid",es5Template="openPopup" %}
+
+```typescript
+import { Grid, Edit, Toolbar, EJ2Intance } from '@syncfusion/ej2-grids';
+import { data } from './datasource.ts';
+
+Grid.Inject(Edit, Toolbar);
+
+let grid: Grid = new Grid({
+    dataSource: data,
+    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
+    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
+    columns: [
+        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
+        { field: 'CustomerID', headerText: 'Customer ID', width: 120 },
+        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', editType: 'numericedit', width: 120, format: 'C2' },
+        { field: 'ShipCountry', headerText: 'Ship Country',  edit: { params: { focus: ddFocus } }, editType: 'dropdownedit', width: 150 }
+    ],
+    height: 265
+});
+grid.appendTo('#Grid');
+
+function ddFocus(e: {event: MouseEvent | KeyboardEvent | TouchEvent}): void {
+  ((e.event.target as HTMLElement).querySelector('.e-dropdownlist') as EJ2Intance).ej2_instances[0].showPopup();
+}
+
+```
+
+{% endtab %}

src/grid/grid/scrolling.md

@@ -177,4 +177,4 @@ grid.appendTo('#Grid');
 
 ```
 
-{% endtab %}
+{% endtab %}

src/grid/grid/searching.md

@@ -218,4 +218,58 @@ grid.appendTo('#Grid');
 
 ```
 
-{% endtab %}
+{% endtab %}
+
+## Highlight the search text
+
+You can highlight the search text in the Grid content by adding the style inside the [`queryCellInfo`](../api/grid/#querycellinfo) event. you can get the search keyword from the [`actionBegin`](../api/grid/#actionbegin) event.
+
+{% tab template="grid/column-search", es5Template="highlight" %}
+
+```typescript
+import { Grid, Search, Toolbar, QueryCellInfoEventArgs, SearchEventArgs } from '@syncfusion/ej2-grids';
+import { data } from './datasource.ts';
+
+Grid.Inject(Search, Toolbar);
+
+let key: string = '';
+let grid: Grid = new Grid({
+    dataSource: data,
+    toolbar: ['Search'],
+    columns: [
+        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
+        { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
+        { field: 'ShipCity', headerText: 'Ship City', width: 150 },
+        { field: 'ShipName', headerText: 'Ship Name', width: 150 }
+    ],
+    height: 272,
+    actionBegin: (args: SearchEventArgs) => {
+    if (args.requestType === 'searching') {
+      key = args.searchString.toLowerCase();
+    }
+  },
+  queryCellInfo: (args: QueryCellInfoEventArgs) => {
+    if (key != '') {
+      let cellContent: string = args.data[args.column.field];
+      let parsedContent: string = cellContent.toString().toLowerCase();
+      if (parsedContent.includes(key.toLowerCase())) {
+        let i: number = 0;
+        let searchStr: string = '';
+        while (i < key.length) {
+          let index: number = parsedContent.indexOf(key[i]);
+          searchStr = searchStr + cellContent.toString()[index];
+          i++;
+        }
+        args.cell.innerHTML = args.cell.innerText.replaceAll(
+          searchStr,
+          "<span class='customcss'>" + searchStr + '</span>'
+        );
+      }
+    }
+  }
+});
+grid.appendTo('#Grid');
+
+```
+
+{% endtab %}

src/grid/grid/summary.md

@@ -73,4 +73,5 @@
 * [Focus the double clicked column](grid/how-to/focus.md)
 * [Add a title when using Grid print function](grid/how-to/grid-print.md)
 * [How to Change the hierarchy grid icons](grid/how-to/change-hierarchy-grid-icon.md)
-* [Show the count of distinct values in aggregate row](grid/how-to/show-the-count-of-distinct-value-in-aggregate.md)
+* [Show the count of distinct values in aggregate row](grid/how-to/show-the-count-of-distinct-value-in-aggregate.md)
+* [Open popup while focusing the edit dropdown list](grid/how-to/open-pop-up-while-focusing-the-drop-down-edit-cell.md)

src/grid/grid/tool-bar.md

@@ -246,6 +246,33 @@ function clickHandler(args: ClickEventArgs): void {
 
 {% endtab %}
 
+## Add Toolbar at the bottom of Grid
+
+You can add the Grid toolbar component at the bottom of Grid using the ['created'](../api/grid/#created) event.
+
+{% tab template="grid/grid", es5Template="bottom-toolbar" %}
+
+```typescript
+var grid = new ej.grids.Grid({
+    dataSource: data.slice(0,8),
+    toolbar: ['Print', 'Search'],
+    columns: [
+        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
+        { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
+        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
+        { field: 'OrderDate', headerText: 'Order Date', textAlign: 'Right', width: 140, format: 'yMd' }
+    ],
+    height: 200,
+    created: () => {
+    var toolbar = grid.element.querySelector('.e-toolbar');
+    grid.element.appendChild(toolbar);
+  }
+});
+grid.appendTo('#Grid');
+```
+
+{% endtab %}
+
 ## See Also
 
 * [Define your own toolbar](./how-to/create-custom-tool-bar-with-drop-down-list)