@syncfusion/ej2-react-grids 20.3.59 → 20.3.61

package/CHANGELOG.md

@@ -6,6 +6,26 @@
 
 #### Bug Fixes
 
+- `#I408271` - The reference link for the `checkBoxChange` event arguments has been updated in the documentation.
+- `#I420019` - script error for focusing the content after deleting all the records has been fixed.
+
+## 20.3.60 (2022-12-06)
+
+### Grid
+
+#### Bug Fixes
+
+- `#I397543` - Issue with custom toolbar template item in grid has been resolved.
+- `#I418069` - Searching issue when clicking search icon in adaptive mode has been fixed.
+- `#I417934` - Column Reordering was not working properly after hiding the column has been fixed.
+- `#I415585` - When JAWS is running, go to first page and last page buttons are working properly when enter key is pressed after focusing.
+
+## 20.3.59 (2022-11-29)
+
+### Grid
+
+#### Bug Fixes
+
 - `#I397894` - When pressing Tab Key, the first focusable element in the grid is need to be focused, instead of grid container issue has been fixed.
 
 ## 20.3.58 (2022-11-22)

package/README.md

@@ -1,75 +1,151 @@
-# ej2-react-grids
+# React Grid Component
 
-The [React Data Grid](https://www.syncfusion.com/react-ui-components/react-data-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm) component is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated. It will pull data from a data source, such as array of JSON objects, `OData web services`, or [`DataManager`](http://ej2.syncfusion.com/react/documentation/data/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm) binding data fields to columns. Also displaying a column header to identify the field with support for grouped records.
+The [React Data Grid](https://www.syncfusion.com/react-ui-components/react-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) component is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated. It will pull data from a data source, such as array of JSON objects, `OData web services`, or DataManager binding data fields to columns. Also displaying a column header to identify the field with support for grouped records.
 
-![Grid](https://ej2.syncfusion.com/products/grid/readme.gif)
+<p align="center">
+  <a href="https://ej2.syncfusion.com/react/documentation/grid/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm">Getting Started</a>.
+  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/bootstrap5/grid/overview">Online demos</a>.
+  <a href="https://www.syncfusion.com/react-components/react-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm">Learn more</a>.
+</p>
 
-> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).
+![React Grid Component](https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-datagrid.png)
 
-> A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+<p align="center">
+Trusted by the world's leading companies
+  <a href="https://www.syncfusion.com">
+    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Bootstrap logo">
+  </a>
+</p>
 
 ## Setup
 
-To install Grid and its dependent packages, use the following command
+### Create a React Application
+
+You can use [`create-react-app`](https://github.com/facebookincubator/create-react-app) to setup the applications.
+To install **create-react-app** run the following command.
+
+```bash
+npm install -g create-react-app
+```
+
+To setup basic **React** sample, use following commands.
+
+```bash
+create-react-app quickstart --scripts-version=react-scripts-ts
+
+cd quickstart
+
+npm install
 
-```sh
-npm install @syncfusion/ej2-react-grids
 ```
 
-## Resources
+### Adding Syncfusion Grid package
+
+All Syncfusion react packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) registry. To install react grid package, use the following command.
+
+```bash
+npm install @syncfusion/ej2-react-grids --save
+```
 
-* [Getting Started](https://ej2.syncfusion.com/react/documentation/grid/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm)
-* [View Online Demos](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm/#/material/grid/default)
-* [Product Page](https://www.syncfusion.com/react-ui-components/react-data-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm)
+### Adding CSS references for Grid
 
-## Supported Frameworks
+Add CSS references needed for Grid in **src/App.css** from **../node_modules/@syncfusion** package folder.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
+@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-react-grids/styles/material.css";
+```
+
+### Add Grid Component
+
+In **src/App.tsx** file, use the following code snippet to render the Syncfusion React Grid control and import **App.css** to apply styles to the grid:
+
+```typescript
+import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
+import * as React from 'react';
+import './App.css';
+
+function App() {
+    let data = [
+        {'OrderID': 10248,'CustomerID': 'VINET', 'ShipCountry': 'France'},
+        {'OrderID': 10249,'CustomerID': 'TOMSP', 'ShipCountry': 'Germany'},
+        {'OrderID': 10250,'CustomerID': 'HANAR', 'ShipCountry': 'Brazil' },
+        {'OrderID': 10251,'CustomerID': 'VICTE', 'ShipCountry': 'France'}
+        ];
+        
+    return <GridComponent dataSource={data}>
+        <ColumnsDirective>
+            <ColumnDirective field='OrderID' headerText='Order ID'/>
+            <ColumnDirective field='CustomerID' headerText='Customer ID' />
+            <ColumnDirective field='ShipCountry' headerText='Ship Country' />
+        </ColumnsDirective>
+    </GridComponent>
+};
+export default App;
+```
+
+## Supported frameworks
 
 Grid component is also offered in following list of frameworks.
 
-1. [Angular](https://www.syncfusion.com/angular-ui-components/angular-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm)
-2. [VueJS](https://www.syncfusion.com/vue-ui-components/vue-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm)
-3. [JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls/js-data-grid?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm)
-4. [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/grid?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm)
-5. [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/grid?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm)
-
-## Key Features
-
-* [**Data sources**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/local-binding) - Bind the Grid component with an array of JSON objects or DataManager.
-* [**Sorting and grouping**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/grouping) - Supports n levels of sorting and grouping.
-* [**Filtering**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/filtering) - Offers filter UI such as filter bar, menu, excel and checkbox at each column to filter data.
-* [**Paging**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/paging) - Provides the option to easily switch between pages using the pager bar.
-* [**Editing**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=grid#/material/grid/normaledit) - provides the options for create, read, update, and delete operations.
-* **Columns** - The column definitions are used as the dataSource schema in the Grid. This plays a vital role in rendering column values in the required format.
-  * [**Reordering**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/reorder) - Allows you to drag any column and drop it at any position in the Grid’s column header row, allowing columns to be repositioned.
-  * [**Column Chooser**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/column-chooser) - The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly.
-  * [**Resizing**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/column-resizing) - Resizing allows changing column width on the fly by simply dragging the right corner of the column header.
-  * [**Freeze**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/frozen-rows) - Columns and rows can be frozen to allow scrolling and comparing cell values.
-  * [**Cell Spanning**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/column-spanning) - Grid cells can be spanned based on the preferred criteria.
-  * [**Foreign data source**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/foreign-key) - This provides the option to show values from external or lookup data sources in a column based on foreign key/value mapping.
-  * [**Cell Styling**](https://ej2.syncfusion.com/react/documentation/grid/how-to/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#customize-column-styles) - Grid cell styles can be customized either by using CSS or programmatically.
-* [**Selection**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/selection) - Rows or cells can be selected in the grid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.
-* [**Templates**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/column-template) - Templates can be used to create custom user experiences in the grid.
-* [**Aggregation**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/aggregate-default) - Provides the option to easily visualized the Aggregates for column values.
-* [**Context menu**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/context-menu) -The context menu provides a list of actions to be performed in the grid. It appears when a cell, header, or the pager is right-clicked.
-* [**Clipboard**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/clipboard) - Selected rows and cells can be copied from the grid
-* [**Export**](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#/material/grid/default-exporting) - Provides the options to Export the grid data to Excel, PDF, and CSV formats.
-* [**RTL support**](https://ej2.syncfusion.com/react/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#right-to-left---rtl) - Provides a full-fledged right-to-left mode which aligns content in the Grid control from right to left.
-* [**Localization**](https://ej2.syncfusion.com/react/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm#localization)) - Provides inherent support to localize the UI.
+| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/angular.svg"  height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | 
+| :-----: | :-----: | :-----: | :-----: | :-----: |
+
+## Showcase samples
+
+* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/default)
+
+## Key features
+
+* [Data sources](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/local-binding) - Bind the Grid component with an array of JSON objects or DataManager.
+* [Sorting and grouping](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/grouping) - Supports n levels of sorting and grouping.
+* [Filtering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/filtering) - Offers filter UI such as filter bar, menu, excel and checkbox at each column to filter data.
+* [Paging](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/paging) - Provides the option to easily switch between pages using the pager bar.
+* [Editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_campaign=grid#/material/grid/normaledit) - provides the options for create, read, update, and delete operations.
+* Columns - The column definitions are used as the dataSource schema in the Grid. This plays a vital role in rendering column values in the required format.
+  * [Reordering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/reorder) - Allows you to drag any column and drop it at any position in the Grid’s column header row, allowing columns to be repositioned.
+  * [Column chooser](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-chooser) - The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly.
+  * [Resizing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-resizing) - Resizing allows changing column width on the fly by simply dragging the right corner of the column header.
+  * [Freeze](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/frozen-rows) - Columns and rows can be frozen to allow scrolling and comparing cell values.
+  * [Cell spanning](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-spanning) - Grid cells can be spanned based on the preferred criteria.
+  * [Foreign data source](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/foreign-key) - This provides the option to show values from external or lookup data sources in a column based on foreign key/value mapping.
+  * [Cell styling](https://ej2.syncfusion.com/react/documentation/grid/how-to/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#customize-column-styles) - Grid cell styles can be customized either by using CSS or programmatically.
+* [Selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/selection) - Rows or cells can be selected in the grid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.
+* [Templates](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/column-template) - Templates can be used to create custom user experiences in the grid.
+* [Aggregation](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/aggregate-default) - Provides the option to easily visualized the Aggregates for column values.
+* [Context menu](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/context-menu) -The context menu provides a list of actions to be performed in the grid. It appears when a cell, header, or the pager is right-clicked.
+* [Clipboard](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/clipboard) - Selected rows and cells can be copied from the grid
+* [Export](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#/material/grid/default-exporting) - Provides the options to Export the grid data to Excel, PDF, and CSV formats.
+* [RTL support](https://ej2.syncfusion.com/react/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#right-to-left---rtl) - Provides a full-fledged right-to-left mode which aligns content in the Grid component from right to left.
+* [Localization](https://ej2.syncfusion.com/react/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm#localization)) - Provides inherent support to localize the UI.
 
 ## Support
 
-Product support is available for through following mediums.
+Product support is available through following mediums.
 
-* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm) support system or [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm).
-* New [GitHub issue](https://github.com/syncfusion/ej2-react-ui-components/issues/new).
-* Ask your query in Stack Overflow with tag `syncfusion`, `ej2`.
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)
+* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new)
+* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm)
+* Live chat
 
-## License
+## Changelog
 
-Check the license detail [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm).
+Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/grids/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
 
-## Changelog
+## License and copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [React UI controls](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
 
-Check the changelog [here]((https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/grids/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=react-data-grid-npm)
+See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=react-grid-npm) for more info.
 
-© Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
+© Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

package/dist/ej2-react-grids.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-grids.min.js
-*  version : 20.3.59
+*  version : 20.3.61
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ej2-react-grids.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-grids.umd.min.js
-*  version : 20.3.59
+*  version : 20.3.61
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-react-grids@*",
-  "_id": "@syncfusion/ej2-react-grids@20.3.58",
+  "_id": "@syncfusion/ej2-react-grids@20.3.60",
   "_inBundle": false,
-  "_integrity": "sha512-YOPg/zfNga6ZoqJnePCdqwnN/1v+i5ZmUWHTbcHIpdLdhURBJ+X68RfZ8y4+42JM5n3jzJU72T6+F+SIkEG/Cg==",
+  "_integrity": "sha512-0AqypOoEm+fabJHnZ4sWnJv99DIJfymkBWES9V8nKWgtERJF/rqy6DfnZuB15+qXueu0dQCytmlGL5fC6XkY9g==",
   "_location": "/@syncfusion/ej2-react-grids",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-grids/-/ej2-react-grids-20.3.58.tgz",
-  "_shasum": "f8ac96d600b3b78c566c1b3c8ee97aeca205144c",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-grids/-/ej2-react-grids-20.3.60.tgz",
+  "_shasum": "de8e2f8af5af4eba04f8e7d7e6a5905b9c87d766",
   "_spec": "@syncfusion/ej2-react-grids@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -32,7 +32,7 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~20.3.56",
-    "@syncfusion/ej2-grids": "20.3.59",
+    "@syncfusion/ej2-grids": "20.3.61",
     "@syncfusion/ej2-react-base": "~20.3.56"
   },
   "deprecated": false,
@@ -65,6 +65,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "20.3.59",
+  "version": "20.3.61",
   "sideEffects": false
 }

package/styles/bootstrap-dark.css

@@ -1543,6 +1543,13 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
   font-size: 12px;
 }
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
+  background: none;
+  box-shadow: none;
+}
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
+  border: none;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #484848;
@@ -2650,13 +2657,11 @@ li.e-separator.e-menu-item.e-excel-separator {
   font-size: 10px;
   padding: 13px 9px 11px 10px;
   text-decoration: none;
-  text-indent: 11px;
 }
 .e-grid .e-icon-grightarrow {
   font-size: 10px;
   padding: 12px 9px 12px 10px;
   text-decoration: none;
-  text-indent: 11px;
 }
 .e-grid .e-recordplusexpand {
   padding-top: 5px;
@@ -3480,7 +3485,7 @@ li.e-separator.e-menu-item.e-excel-separator {
           user-select: none;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderuparrow {
-  margin-top: -1.5px;
+  margin-top: 0.5px;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
   margin-top: -1.5px;

package/styles/bootstrap.css

@@ -1544,6 +1544,13 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
   font-size: 12px;
 }
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
+  background: none;
+  box-shadow: none;
+}
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
+  border: none;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #ddd;
@@ -2651,13 +2658,11 @@ li.e-separator.e-menu-item.e-excel-separator {
   font-size: 10px;
   padding: 13px 9px 11px 10px;
   text-decoration: none;
-  text-indent: 11px;
 }
 .e-grid .e-icon-grightarrow {
   font-size: 10px;
   padding: 12px 9px 12px 10px;
   text-decoration: none;
-  text-indent: 11px;
 }
 .e-grid .e-recordplusexpand {
   padding-top: 5px;
@@ -3481,7 +3486,7 @@ li.e-separator.e-menu-item.e-excel-separator {
           user-select: none;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderuparrow {
-  margin-top: -1.5px;
+  margin-top: 0.5px;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
   margin-top: -1.5px;

package/styles/bootstrap4.css

@@ -1600,6 +1600,13 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
   font-size: 14px;
 }
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
+  background: none;
+  box-shadow: none;
+}
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
+  border: none;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #dee2e6;
@@ -2709,13 +2716,11 @@ li.e-separator.e-menu-item.e-excel-separator {
   font-size: 10px;
   padding: 13px 9px 11px 10px;
   text-decoration: none;
-  text-indent: 11px;
 }
 .e-grid .e-icon-grightarrow {
   font-size: 10px;
   padding: 12px 9px 12px 10px;
   text-decoration: none;
-  text-indent: 11px;
 }
 .e-grid .e-recordplusexpand {
   padding-top: 5px;
@@ -3540,7 +3545,7 @@ li.e-separator.e-menu-item.e-excel-separator {
           user-select: none;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderuparrow {
-  margin-top: -1px;
+  margin-top: 0;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
   margin-top: -3px;

package/styles/bootstrap5-dark.css

@@ -1606,6 +1606,13 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
   font-size: 14px;
 }
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
+  background: none;
+  box-shadow: none;
+}
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
+  border: none;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #444c54;
@@ -2714,13 +2721,11 @@ li.e-separator.e-menu-item.e-excel-separator {
   font-size: 14px;
   padding: 12px 7px 11px 8px;
   text-decoration: none;
-  text-indent: 11px;
 }
 .e-grid .e-icon-grightarrow {
   font-size: 14px;
   padding: 11px 7px 12px 8px;
   text-decoration: none;
-  text-indent: 11px;
 }
 .e-grid .e-recordplusexpand {
   padding-top: 5px;
@@ -3547,7 +3552,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-top: 0;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
-  margin-top: 0;
+  margin-top: -2px;
 }
 .e-grid.sf-grid .e-masked-cell.e-rowcell .e-virtualcell {
   background-color: rgba(0, 0, 0, 0.1);
@@ -3595,7 +3600,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .e-bigger .e-grid .e-gridheader .e-headercontent .e-reorderuparrow,
 .e-bigger.e-grid .e-gridheader .e-headercontent .e-reorderuparrow {
-  margin-top: -9px;
+  margin-top: -2px;
 }
 .e-bigger .e-grid .e-gridheader thead .e-icons,
 .e-bigger.e-grid .e-gridheader thead .e-icons {

package/styles/bootstrap5.css

@@ -1606,6 +1606,13 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
   font-size: 14px;
 }
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
+  background: none;
+  box-shadow: none;
+}
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
+  border: none;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #dee2e6;
@@ -2714,13 +2721,11 @@ li.e-separator.e-menu-item.e-excel-separator {
   font-size: 14px;
   padding: 12px 7px 11px 8px;
   text-decoration: none;
-  text-indent: 11px;
 }
 .e-grid .e-icon-grightarrow {
   font-size: 14px;
   padding: 11px 7px 12px 8px;
   text-decoration: none;
-  text-indent: 11px;
 }
 .e-grid .e-recordplusexpand {
   padding-top: 5px;
@@ -3547,7 +3552,7 @@ li.e-separator.e-menu-item.e-excel-separator {
   margin-top: 0;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
-  margin-top: 0;
+  margin-top: -2px;
 }
 .e-grid.sf-grid .e-masked-cell.e-rowcell .e-virtualcell {
   background-color: rgba(0, 0, 0, 0.1);
@@ -3595,7 +3600,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 .e-bigger .e-grid .e-gridheader .e-headercontent .e-reorderuparrow,
 .e-bigger.e-grid .e-gridheader .e-headercontent .e-reorderuparrow {
-  margin-top: -9px;
+  margin-top: -2px;
 }
 .e-bigger .e-grid .e-gridheader thead .e-icons,
 .e-bigger.e-grid .e-gridheader thead .e-icons {

package/styles/fabric-dark.css

@@ -1517,6 +1517,13 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
   font-size: 12px;
 }
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
+  background: none;
+  box-shadow: none;
+}
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
+  border: none;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #414040;
@@ -2624,13 +2631,11 @@ li.e-separator.e-menu-item.e-excel-separator {
   font-size: 12px;
   padding: 16px 8px 13px 9px;
   text-decoration: none;
-  text-indent: 8px;
 }
 .e-grid .e-icon-grightarrow {
   font-size: 12px;
   padding: 14px 9px 15px 9px;
   text-decoration: none;
-  text-indent: 8px;
 }
 .e-grid .e-recordplusexpand {
   padding-top: 5px;
@@ -3454,10 +3459,10 @@ li.e-separator.e-menu-item.e-excel-separator {
           user-select: none;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderuparrow {
-  margin-top: 0;
+  margin-top: 1px;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
-  margin-top: 0;
+  margin-top: -1px;
 }
 .e-grid.sf-grid .e-masked-cell.e-rowcell .e-virtualcell {
   background-color: rgba(0, 0, 0, 0.1);

package/styles/fabric.css

@@ -1510,6 +1510,13 @@ li.e-separator.e-menu-item.e-excel-separator {
 .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-sicon.e-clear-icon::before {
   font-size: 12px;
 }
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon), .e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
+  background: none;
+  box-shadow: none;
+}
+.e-grid .e-toolbar-items .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
+  border: none;
+}
 .e-grid .e-res-toolbar {
   border-bottom: 1px solid;
   border-bottom-color: #eaeaea;
@@ -2617,13 +2624,11 @@ li.e-separator.e-menu-item.e-excel-separator {
   font-size: 12px;
   padding: 16px 8px 13px 9px;
   text-decoration: none;
-  text-indent: 8px;
 }
 .e-grid .e-icon-grightarrow {
   font-size: 12px;
   padding: 14px 9px 15px 9px;
   text-decoration: none;
-  text-indent: 8px;
 }
 .e-grid .e-recordplusexpand {
   padding-top: 5px;
@@ -3447,10 +3452,10 @@ li.e-separator.e-menu-item.e-excel-separator {
           user-select: none;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderuparrow {
-  margin-top: 0;
+  margin-top: 1px;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
-  margin-top: 0;
+  margin-top: -1px;
 }
 .e-grid.sf-grid .e-masked-cell.e-rowcell .e-virtualcell {
   background-color: rgba(0, 0, 0, 0.1);