@syncfusion/ej2-angular-grids 20.3.60-ngcc → 20.3.61-ngcc

package/CHANGELOG.md

@@ -6,6 +6,15 @@
 
 #### 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.

package/README.md

@@ -1,81 +1,172 @@
-# ej2-angular-grids
+# Angular Grid Component
 
-The [Angular Data Grid](https://www.syncfusion.com/angular-ui-components/angular-grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/documentation/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm) binding data fields to columns. Also displaying a column header to identify the field with support for grouped records.
+The [Angular Data Grid](https://www.syncfusion.com/angular-ui-components/angular-grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/documentation/grid/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm">Getting Started</a>.
+  <a href="https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/over-view">Online demos</a>.
+  <a href="https://www.syncfusion.com/angular-components/angular-grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-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).
+![Angular Grid Component](https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/angular/angular-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 an Angular Application
 
-```sh
-npm install @syncfusion/ej2-angular-grids
+You can use [Angular CLI](https://github.com/angular/angular-cli) to setup your Angular applications. To install Angular CLI use the following command.
+
+```bash
+npm install -g @angular/cli
+```
+
+Create a new Angular application using below Angular CLI command.
+
+```bash
+ng new my-app
+cd my-app
+```
+
+### Adding Syncfusion Grid package
+
+All Syncfusion angular packages are published in [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry. To install angular grid package, use the following command.
+
+```bash
+npm install @syncfusion/ej2-angular-grids --save
+```
+
+### Registering Grid Module
+
+Import Grid module into **src/app/app.module.ts** in Angular application from **@syncfusion/ej2-angular-grids** package.
+
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+// import the GridModule for the Grid component
+import { GridModule } from '@syncfusion/ej2-angular-grids';
+import { AppComponent }  from './app.component';
+
+@NgModule({
+  //declaration of ej2-angular-grids module into NgModule
+  imports:      [ BrowserModule, GridModule ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
 ```
 
-## Resources
+### Adding CSS references for Grid
 
-* [Getting Started](https://ej2.syncfusion.com/angular/documentation/grid/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm)
-* [View Online Demos](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/over-view)
-* [Product Page](https://www.syncfusion.com/angular-ui-components/angular-grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm)
+Add CSS references needed for Grid in **src/styles.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-angular-grids/styles/material.css';
+```
 
-## Supported Frameworks
+### Add Grid Component
+
+In **src/app/app.component.ts**, use `<ejs-grid>` selector in `template` attribute of  `@Component` directive to render the Syncfusion Angular Grid component.
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-root',
+    template: `<ejs-grid [dataSource]='data'>
+                <e-columns>
+                    <e-column field='OrderID' headerText='Order ID'></e-column>
+                    <e-column field='CustomerID' headerText='Customer ID'></e-column>
+                    <e-column field='ShipCountry' headerText='Ship Country'></e-column>
+                </e-columns>
+                </ejs-grid>`
+})
+export class AppComponent implements OnInit {
+
+    public data: object[];
+
+    ngOnInit(): void {
+        this.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'}
+		];
+    }
+}
+```
+		
+## Supported frameworks
 
 Grid component is also offered in following list of frameworks.
 
-1. [React](https://www.syncfusion.com/react-ui-components/react-data-grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm)
-2. [VueJS](https://www.syncfusion.com/vue-ui-components/vue-grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm)
-3. [JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls/js-data-grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm)
-4. [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm)
-5. [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/grid?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm)
+| [<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/react.svg"  height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-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
 
-* Expanse Tracker ([Source](https://github.com/syncfusion/ej2-showcase-angular-expensetracker?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm), [Live Demo](https://ej2.syncfusion.com/showcase/angular/expensetracker/#/dashboard?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm))
-* Loan Calculator ([Source](https://github.com/syncfusion/ej2-sample-ng-loancalculator?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm), [Live Demo](https://ej2.syncfusion.com/showcase/angular/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm))
-
-## Key Features
-
-* [**Data sources**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/local-data) - Bind the Grid component with an array of JSON objects or DataManager.
-* [**Async pipe**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/async-pipe) - Bind the Grid component with `RxJS.Observable` using `async` pipe.
-* [**Sorting and grouping**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/grouping) - Supports n levels of sorting and grouping.
-* [**Filtering**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/paging) - Provides the option to easily switch between pages using the pager bar.
-* [**Editing**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/normal-edit) - 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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/column/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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/column/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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/column/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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/column/column-spanning) - Grid cells can be spanned based on the preferred criteria.
-  * [**Foreign data source**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/column/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/angular/documentation/grid/how-to/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#customize-column-styles) - Grid cell styles can be customized either by using CSS or programmatically.
-* [**Selection**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/column-template) - Templates can be used to create custom user experiences in the grid.
-* [**Aggregation**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/aggregate-default) - Provides the option to easily visualized the Aggregates for column values.
-* [**Context menu**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#/material/grid/clipboard) - Selected rows and cells can be copied from the grid
-* [**Export**](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm#localization) - Provides inherent support to localize the UI.
+* Expense Tracker - [Source](https://github.com/syncfusion/ej2-showcase-angular-expensetracker?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm), [Live Demo](https://ej2.syncfusion.com/showcase/angular/expensetracker/#/dashboard?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm)
+* Loan Calculator - [Source](https://github.com/syncfusion/ej2-sample-ng-loancalculator?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm), [Live Demo](https://ej2.syncfusion.com/showcase/angular/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm)
+
+## Key features
+
+* [Data sources](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/local-data) - Bind the Grid component with an array of JSON objects or DataManager.
+* [Async pipe](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/async-pipe) - Bind the Grid component with `RxJS.Observable` using `async` pipe.
+* [Sorting and grouping](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/grouping) - Supports n levels of sorting and grouping.
+* [Filtering](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/paging) - Provides the option to easily switch between pages using the pager bar.
+* [Editing](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/normal-edit) - 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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/column/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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/column/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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/column/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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/column/column-spanning) - Grid cells can be spanned based on the preferred criteria.
+  * [Foreign data source](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/column/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/angular/documentation/grid/how-to/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#customize-column-styles) - Grid cell styles can be customized either by using CSS or programmatically.
+* [Selection](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/column-template) - Templates can be used to create custom user experiences in the grid.
+* [Aggregation](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/aggregate-default) - Provides the option to easily visualized the Aggregates for column values.
+* [Context menu](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm#/material/grid/clipboard) - Selected rows and cells can be copied from the grid
+* [Export](https://ej2.syncfusion.com/angular/demos/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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/angular/documentation/grid/global-local/?utm_source=npm&utm_medium=listing&utm_campaign=angular-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=angular-data-grid-npm) support system or [Community forum](https://www.syncfusion.com/forums/angular-js2?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm).
-* New [GitHub issue](https://github.com/syncfusion/ej2-angular-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/angular-js2?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm)
+* [GitHub issues](https://github.com/syncfusion/ej2-angular-ui-components/issues/new)
+* [Request feature or report bug](https://www.syncfusion.com/feedback/angular?utm_source=npm&utm_medium=listing&utm_campaign=angular-grid-npm)
+* Live chat
 
-## License
+## Changelog
 
-Check the license detail [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm).
+Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/components/grids/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=angular-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+ [Angular UI controls](https://www.syncfusion.com/angular-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-angular-ui-components/blob/master/components/grids/CHANGELOG.md?utm_source=npm&utm_medium=listing&utm_campaign=angular-data-grid-npm)
+See [LICENSE FILE](https://github.com/syncfusion/ej2-angular-ui-components/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=angular-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-angular-grids.umd.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-angular-grids.umd.js
-*  version : 20.3.60
+*  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-angular-grids.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-angular-grids.umd.min.js
-*  version : 20.3.60
+*  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-angular-grids@*",
-  "_id": "@syncfusion/ej2-angular-grids@20.3.59",
+  "_id": "@syncfusion/ej2-angular-grids@20.3.60",
   "_inBundle": false,
-  "_integrity": "sha512-2WD2adTdhxB44jFmwTfdMcRg+gwStv2n3LisJN+jCGjlBeVdG73GIvwjYv8tIex1pECf0Z0TANhjTA1cWgcsig==",
+  "_integrity": "sha512-Uo6YSqGrbZtDktjV0QrzjuRr2zoQvFORqAMy8wfdRwy/7Vn1lP9t/tcU/+r/U1sWn/nvb5ii9RMyVYAcWEyNVg==",
   "_location": "/@syncfusion/ej2-angular-grids",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-angular-grids/-/ej2-angular-grids-20.3.59.tgz",
-  "_shasum": "0d68a92e101c995ac921783c939be269ccdd21ce",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-angular-grids/-/ej2-angular-grids-20.3.60.tgz",
+  "_shasum": "abb495929262b89ce722b0b87c282cdca202e646",
   "_spec": "@syncfusion/ej2-angular-grids@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -33,7 +33,7 @@
   "dependencies": {
     "@syncfusion/ej2-angular-base": "~20.3.56",
     "@syncfusion/ej2-base": "~20.3.56",
-    "@syncfusion/ej2-grids": "20.3.60"
+    "@syncfusion/ej2-grids": "20.3.61"
   },
   "deprecated": false,
   "description": "Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel. for Angular",
@@ -69,5 +69,5 @@
   "schematics": "./schematics/collection.json",
   "sideEffects": false,
   "typings": "ej2-angular-grids.d.ts",
-  "version": "20.3.60-ngcc"
+  "version": "20.3.61-ngcc"
 }

package/schematics/utils/lib-details.d.ts

@@ -1,4 +1,4 @@
 export declare const pkgName = "@syncfusion/ej2-angular-grids";
-export declare const pkgVer = "^20.3.59";
+export declare const pkgVer = "^20.3.60";
 export declare const moduleName = "GridModule, PagerModule";
-export declare const themeVer = "~20.3.59";
+export declare const themeVer = "~20.3.60";

package/schematics/utils/lib-details.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pkgName = '@syncfusion/ej2-angular-grids';
-exports.pkgVer = '^20.3.60';
+exports.pkgVer = '^20.3.61';
 exports.moduleName = 'GridModule, PagerModule';
-exports.themeVer = '~20.3.60';
+exports.themeVer = '~20.3.61';

package/schematics/utils/lib-details.ts

@@ -1,4 +1,4 @@
 export const pkgName = '@syncfusion/ej2-angular-grids';
-export const pkgVer = '^20.3.60';
+export const pkgVer = '^20.3.61';
 export const moduleName = 'GridModule, PagerModule';
-export const themeVer = '~20.3.60';
+export const themeVer = '~20.3.61';

package/styles/bootstrap-dark.css

@@ -3485,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

@@ -3486,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

@@ -3545,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

@@ -3552,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);
@@ -3600,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

@@ -3552,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);
@@ -3600,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

@@ -3459,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

@@ -3452,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);

package/styles/fluent-dark.css

@@ -3568,7 +3568,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: -1px;
 }
 .e-grid.sf-grid .e-masked-cell.e-rowcell .e-virtualcell {
   background-color: rgba(0, 0, 0, 0.1);
@@ -3616,7 +3616,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/fluent.css

@@ -3568,7 +3568,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: -1px;
 }
 .e-grid.sf-grid .e-masked-cell.e-rowcell .e-virtualcell {
   background-color: rgba(0, 0, 0, 0.1);
@@ -3616,7 +3616,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/grid/bootstrap-dark.css

@@ -3073,7 +3073,7 @@
           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/grid/bootstrap.css

@@ -3074,7 +3074,7 @@
           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/grid/bootstrap4.css

@@ -3122,7 +3122,7 @@
           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/grid/bootstrap5-dark.css

@@ -3137,7 +3137,7 @@
   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);
@@ -3185,7 +3185,7 @@
 }
 .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/grid/bootstrap5.css

@@ -3137,7 +3137,7 @@
   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);
@@ -3185,7 +3185,7 @@
 }
 .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/grid/fabric-dark.css

@@ -3047,10 +3047,10 @@
           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/grid/fabric.css

@@ -3040,10 +3040,10 @@
           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/grid/fluent-dark.css

@@ -3153,7 +3153,7 @@
   margin-top: 0;
 }
 .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);
@@ -3201,7 +3201,7 @@
 }
 .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/grid/fluent.css

@@ -3153,7 +3153,7 @@
   margin-top: 0;
 }
 .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);
@@ -3201,7 +3201,7 @@
 }
 .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/grid/highcontrast.css

@@ -3044,10 +3044,10 @@
           user-select: none;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderuparrow {
-  margin-top: 0;
+  margin-top: 2px;
 }
 .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/grid/material-dark.css

@@ -3088,10 +3088,10 @@
           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/grid/material.css

@@ -3122,10 +3122,10 @@
           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/grid/tailwind-dark.css

@@ -3158,10 +3158,10 @@
           user-select: none;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderuparrow {
-  margin-top: -11px;
+  margin-top: -4px;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
-  margin-top: 1px;
+  margin-top: -5px;
 }
 .e-grid.sf-grid .e-masked-cell.e-rowcell .e-virtualcell {
   background-color: rgba(0, 0, 0, 0.1);

package/styles/grid/tailwind.css

@@ -3158,10 +3158,10 @@
           user-select: none;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderuparrow {
-  margin-top: -11px;
+  margin-top: -4px;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
-  margin-top: 1px;
+  margin-top: -5px;
 }
 .e-grid.sf-grid .e-masked-cell.e-rowcell .e-virtualcell {
   background-color: rgba(0, 0, 0, 0.1);

package/styles/highcontrast.css

@@ -3456,10 +3456,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: 2px;
 }
 .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/material-dark.css

@@ -3506,10 +3506,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/material.css

@@ -3548,10 +3548,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/tailwind-dark.css

@@ -3574,10 +3574,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: -11px;
+  margin-top: -4px;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
-  margin-top: 1px;
+  margin-top: -5px;
 }
 .e-grid.sf-grid .e-masked-cell.e-rowcell .e-virtualcell {
   background-color: rgba(0, 0, 0, 0.1);

package/styles/tailwind.css

@@ -3574,10 +3574,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: -11px;
+  margin-top: -4px;
 }
 .e-grid.sf-grid .e-gridheader .e-headercontent .e-reorderdownarrow {
-  margin-top: 1px;
+  margin-top: -5px;
 }
 .e-grid.sf-grid .e-masked-cell.e-rowcell .e-virtualcell {
   background-color: rgba(0, 0, 0, 0.1);