@progress/kendo-angular-grid 19.1.2-develop.4 → 19.1.2-develop.6

package/esm2022/grid.component.mjs

@@ -146,10 +146,37 @@ const NOTIFY_DELAY = 500;
 /**
  * Represents the Kendo UI for Angular Data Grid component.
  *
+ * Use the `kendo-grid` component to display and manage tabular data.
+ *
  * @example
  * ```html
  * <kendo-grid [data]="gridData"></kendo-grid>
  * ```
+ *
+ * @remarks
+ * Supported children components are:
+ * {@link CheckboxColumnComponent},
+ * {@link ColumnChooserComponent},
+ * {@link ColumnComponent},
+ * {@link ColumnGroupComponent},
+ * {@link ColumnMenuAutoSizeAllColumnsComponent},
+ * {@link ColumnMenuAutoSizeColumnComponent},
+ * {@link ColumnMenuChooserComponent},
+ * {@link ColumnMenuComponent},
+ * {@link ColumnMenuFilterComponent},
+ * {@link ColumnMenuItemComponent},
+ * {@link ColumnMenuLockComponent},
+ * {@link ColumnMenuPositionComponent},
+ * {@link ColumnMenuSortComponent},
+ * {@link ColumnMenuStickComponent},
+ * {@link CommandColumnComponent},
+ * {@link CustomMessagesComponent},
+ * {@link ExcelComponent},
+ * {@link GridSpacerComponent},
+ * {@link PDFComponent},
+ * {@link RowReorderColumnComponent},
+ * {@link SpanColumnComponent},
+ * {@link ToolBarComponent}.
  */
 export class GridComponent {
     supportService;
@@ -183,7 +210,7 @@ export class GridComponent {
     adaptiveGridService;
     rowReorderService;
     /**
-     * Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count
+     * Sets the data of the Grid. If you provide an array, the Grid gets the total count automatically.
      * ([more information and example]({% slug binding_grid %})).
      */
     set data(value) {
@@ -233,34 +260,35 @@ export class GridComponent {
     }
     /**
      * Defines the page size used by the Grid pager.
-     * Required by the [paging]({% slug paging_grid %}) functionality.
+     * Required for the [`paging`]({% slug paging_grid %}) feature.
      */
     pageSize;
     /**
-     * Defines the height (in pixels) that is used when the `scrollable` option of the Grid is set.
-     * To set the height of the Grid, you can also use `style.height`. The `style.height`
-     * option supports units such as `px`, `%`, `em`, `rem`, and others.
+     * Defines the height in pixels for the Grid when `scrollable` is set.
+     * You can also set the height using `style.height` with units like `px`, `%`, `em`, or `rem`.
      */
     height;
     /**
-     * Represent the actual height of each Grid row (`tr`) element in the DOM.
-     * Required by the [virtual scrolling functionality]({% slug scrollmmodes_grid %}).
-     * Set the `rowHeight` option to the exact pixels as the height of the `tr` element appears in the DOM.
+     * Represents the row height in pixels for each Grid row (`tr`) element.
+     * Required for [virtual scrolling]({% slug scrollmmodes_grid %}).
+     * Set `rowHeight` to match the actual DOM row height. The property does not change the height of the rows in the UI.
      */
     rowHeight;
     /**
-     * Enables or disables the adaptive mode. By default, adaptive rendering is disabled.
+     * Enables or disables adaptive mode. Adaptive rendering is off by default.
+     *
+     * @default 'none'
      */
     adaptiveMode = 'none';
     /**
-     * Represent the actual height of each Grid detail row (`tr`) element in the DOM.
-     * Required by the [virtual scrolling functionality]({% slug scrollmmodes_grid %}).
-     * Set the `detailRowHeight` option to the exact pixels as the height of the detail Grid `tr` element appears in the DOM.
+     * Represents the height in pixels for each Grid detail row (`tr`) element.
+     * Required for [virtual scrolling]({% slug scrollmmodes_grid %}).
+     * Set `detailRowHeight` to match the actual DOM detail row height. The property does not change the height of the rows in the UI.
      */
     detailRowHeight;
     /**
-     * Defines the number of records to be skipped by the pager.
-     * Required by the [paging]({% slug paging_grid %}) functionality.
+     * Defines the number of records to skip in the pager.
+     * Required for the [`paging`]({% slug paging_grid %}) feature.
      */
     get skip() {
         return this._skip;
@@ -271,19 +299,20 @@ export class GridComponent {
         }
     }
     /**
-     * Defines the scroll mode used by the Grid.
+     * Defines the scroll mode for the Grid.
      *
      * @default 'scrollable'
      */
     scrollable = 'scrollable';
     /**
-     * Enables the [single-row selection](slug:grid_row_selection) of the Grid.
+     * Enables the selection feature of the Grid. The `selectable` property can be set to `true`, `false`, or an object with additional settings.
+     * [See example](slug:grid_row_selection).
      *
      * @default false
      */
     selectable = false;
     /**
-     * The descriptors by which the data will be sorted ([see example]({% slug sorting_grid %})).
+     * Sets the descriptors for sorting the data ([see example]({% slug sorting_grid %})).
      */
     set sort(value) {
         if (isArray(value)) {
@@ -294,7 +323,8 @@ export class GridComponent {
         return this._sort;
     }
     /**
-     * Specifies the sizing of various Grid building blocks (e.g. tables, buttons, inputs, dropdowns, etc.)
+     * Specifies the sizing for Grid elements like tables, buttons, and inputs.
+     *
      * @default 'medium'
      */
     set size(size) {
@@ -311,15 +341,15 @@ export class GridComponent {
      * A function that defines how to track changes for the data rows.
      * By default, the Grid tracks changes by the index of the data item.
      * Edited rows are tracked by reference.
-     * [See example](slug:track_changes_grid)
+     * [See example](slug:track_changes_grid).
      */
     trackBy = defaultTrackBy;
     /**
-     * The descriptor by which the data will be filtered ([see examples]({% slug filtering_grid %})).
+     * Sets the filter descriptor for the data ([see examples]({% slug filtering_grid %})).
      */
     filter;
     /**
-     * The descriptors by which the data will be grouped ([see example]({% slug grouping_grid %})).
+     * Sets the descriptors for grouping the data ([see example]({% slug grouping_grid %})).
      */
     set group(value) {
         if (isArray(value)) {
@@ -330,7 +360,8 @@ export class GridComponent {
         return this._group;
     }
     /**
-     * If set to `true`, the grid will render only the columns in the current viewport.
+     * If `true`, renders only columns in the current viewport.
+     *
      * @default false
      */
     virtualColumns = false;
@@ -421,17 +452,18 @@ export class GridComponent {
      */
     gridData = () => { return this.flatData; };
     /**
-     * Enables the [filtering]({% slug filtering_grid %}) of the Grid columns that have their `field` option set.
+     * Enables the [filtering](slug:filtering_grid) feature of the Grid for columns with a `field` option.
+     *
      * @default false
      */
     filterable = false;
     /**
-     * Enables the [sorting]({% slug sorting_grid %}) of the Grid columns that have their `field` option set.
+     * Enables [sorting]({% slug sorting_grid %}) feature of the Grid for columns with a `field` option.
      * @default false
      */
     sortable = false;
     /**
-     * Configures the pager of the Grid ([see example](slug:paging_grid_settings)).
+     * Configures the Grid pager ([see example](slug:paging_grid_settings)).
      * @default false
      */
     pageable = false;
@@ -439,17 +471,20 @@ export class GridComponent {
         return normalize(this.pageable);
     }
     /**
-     * If set to `true`, the user can group the Grid by dragging the column header cells ([see example]({% slug grouping_grid %})).
+     * If `true`, allows grouping by dragging column headers ([see example]({% slug grouping_grid %})).
+     *
      * @default false
      */
     groupable = false;
     /**
-     * Determines whether the Grid can be resized.
+     * Determines if the Grid can be resized.
+     *
      * @default false
      */
     gridResizable = false;
     /**
-     * Enables the [row reordering]({% slug reordering_rows_grid %}) of the Grid.
+     * Enables row reordering feature of the Grid ([see example]({% slug reordering_rows_grid %})).
+     *
      * @default false
      */
     set rowReorderable(value) {
@@ -469,9 +504,8 @@ export class GridComponent {
         return this._rowReorderable;
     }
     /**
-     * When the keyboard navigation is enabled, the user can use dedicated shortcuts to interact with the Grid.
-     * By default, navigation is enabled. To disable it altogether, and include the Grid content in the normal tab sequence, set the property to `false`.
-     * To enable navigation through separate Grid sections only, provide a [`GridNavigableSection`]({% slug api_grid_gridnavigablesection %}) array.
+     * By default, navigation is enabled. To disable, set to `false`.
+     * To enable navigation for specific sections, provide a [`GridNavigableSection`](slug:api_grid_gridnavigablesection).
      */
     set navigable(value) {
         if (typeof value === 'boolean') {
@@ -488,17 +522,15 @@ export class GridComponent {
         return this._navigable;
     }
     /**
-     * Indicates whether the Grid columns will be resized during initialization so that
-     * they fit their headers and row content.
+     * If `true`, resizes columns during initialization to fit headers and content.
      * Columns with `autoSize` set to `false` are excluded.
-     * To dynamically update the column width to match the new content,
-     * refer to [this example]({% slug resizing_columns_grid %}).
+     * [See example](slug:resizing_columns_grid).
+     *
      * @default false
      */
     autoSize = false;
     /**
-     * Defines a function that is executed for every data row in the component
-     * ([see example](slug:styling_grid_rows)).
+     * Sets a function to apply custom CSS classes to each data row ([see example](slug:styling_grid_rows)).
      */
     set rowClass(fn) {
         if (isDevMode() && typeof fn !== 'function') {
@@ -510,8 +542,7 @@ export class GridComponent {
         return this._rowClass;
     }
     /**
-     * Defines a function that is executed for every data row in the component,
-     * and determines whether the row will be sticky, i.e. always visible after scrolling.
+     * Sets a function to determine if a data row is sticky (always visible after scrolling).
      */
     set rowSticky(fn) {
         if (isDevMode() && isPresent(fn) && typeof fn !== 'function') {
@@ -525,9 +556,7 @@ export class GridComponent {
         return this._rowSticky;
     }
     /**
-     * Defines a Boolean function that is executed for each data row in the component
-     * ([see example]({% slug grid_selection_custom %}#toc-setting-the-selected-rows)).
-     * Determines whether the row will be selected.
+     * Sets a function to determine if a data row is selected ([see example]({% slug grid_selection_custom %}#toc-setting-the-selected-rows)).
      */
     set rowSelected(fn) {
         if (isDevMode() && typeof fn !== 'function') {
@@ -539,8 +568,7 @@ export class GridComponent {
         return this._rowSelected;
     }
     /**
-     * Defines a Boolean function that is executed for each data row in the component.
-     * Determines whether the row will be selectable.
+     * Sets a function to determine if a data row is selectable.
      */
     set isRowSelectable(fn) {
         if (isDevMode() && typeof fn !== 'function') {
@@ -552,12 +580,8 @@ export class GridComponent {
         return this._isRowSelectable;
     }
     /**
-     * Defines a function that determines the selected state of a data cell.
-     * Returns an object with `selected` and `item` properties.
-     * The cell is marked as selected only if the `selected` property equals `true`.
-     *
-     * The function is executed for each data cell and may be called more than once
-     * as part of a change detection cycle. ([see example]({% slug grid_selection_custom %}#toc-setting-the-selected-cells))
+     * Sets a function to determine if a data cell is selected.
+     * The function returns an object with `selected` and `item` properties ([see example]({% slug grid_selection_custom %}#toc-setting-the-selected-cells)).
      */
     set cellSelected(fn) {
         if (isDevMode() && typeof fn !== 'function') {
@@ -591,8 +615,8 @@ export class GridComponent {
             [];
     }
     /**
-     * The current Grid `GridState` objects. Contains the information about data operations and column state, required
-     * to store and restore the Grid state.
+     * Gets the current `GridState`, including data operations and column state.
+     * Use this to store and restore the Grid state.
      */
     get currentState() {
         return {
@@ -606,21 +630,19 @@ export class GridComponent {
         };
     }
     /**
-     * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells
-     * ([see example]({% slug resizing_columns_grid %})).
+     * If `true`, allows resizing columns by dragging header cell edges ([see example]({% slug resizing_columns_grid %})).
      *
      * @default false
      */
     resizable = false;
     /**
-     * If set to `true`, the user can reorder columns by dragging their header cells
-     * ([see example]({% slug reordering_columns_grid %})).
+     * If `true`, allows reordering columns by dragging header cells ([see example]({% slug reordering_columns_grid %})).
      *
      * @default false
      */
     reorderable = false;
     /**
-     * Specifies if the loading indicator of the Grid will be displayed ([see example]({% slug binding_grid %})).
+     * If `true`, displays the Grid loading indicator ([see example]({% slug binding_grid %})).
      *
      * @default false
      */
@@ -632,14 +654,15 @@ export class GridComponent {
         return this._loading;
     }
     /**
-     * Specifies if the column menu of the columns will be displayed ([see example]({% slug columnmenu_grid %})).
+     * If `true`, displays the column menu for columns ([see example]({% slug columnmenu_grid %})).
      *
      * @default false
      */
     columnMenu = false;
     /**
-     * Specifies if the header of the grid will be hidden. The header is visible by default.
+     * If `true`, hides the Grid header. The header is visible by default.
      * The header includes column headers and the [filter row](slug:filter_row).
+     *
      * @default false
      */
     hideHeader = false;
@@ -650,7 +673,7 @@ export class GridComponent {
      */
     showInactiveTools = false;
     /**
-     * A function which determines if a specific row is expanded.
+     * Sets a function to determine if a specific row is expanded.
      */
     set isDetailExpanded(callback) {
         this.detailsService.userCallback = callback;
@@ -659,7 +682,7 @@ export class GridComponent {
         return this.detailsService.userCallback;
     }
     /**
-     * A function which determines if a specific group row is expanded.
+     * Sets a function to determine if a specific group row is expanded.
      */
     set isGroupExpanded(callback) {
         this.groupsService.userCallback = callback;
@@ -669,31 +692,27 @@ export class GridComponent {
         return this.groupsService.userCallback;
     }
     /**
-     * Fires when the Grid filter is modified through the UI.
-     * You have to handle the event yourself and filter the data.
+     * Fires when the Grid data is filtered through the UI and the filter descriptor changes.
      */
     filterChange = new EventEmitter();
     /**
-     * Fires when the page of the Grid is changed ([see example]({% slug paging_grid %})).
-     * You have to handle the event yourself and page the data.
+     * Fires when the page is changed through the UI ([see example]({% slug paging_grid %})).
      */
     pageChange = new EventEmitter();
     /**
-     * Fires when the grouping of the Grid is changed.
-     * You have to handle the event yourself and group the data ([see example]({% slug grouping_grid %})).
+     * Fires when the Grid data is grouped through the UI and the group descriptors change ([see example]({% slug grouping_grid %})).
      */
     groupChange;
     /**
-     * Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid %})).
-     * You have to handle the event yourself and sort the data.
+     * Fires when the Grid data is sorted through the UI and the sort descriptors change ([see example]({% slug sorting_grid %})).
      */
     sortChange = new EventEmitter();
     /**
-     * Fires when the user selects a Grid row.
+     * Fires when the Grid selection changes through the UI.
      */
     selectionChange = new EventEmitter();
     /**
-     * Fires when the user drops the dragged row and reordering is performed.
+     * Fires when a row is reordered through the UI.
      */
     rowReorder = new EventEmitter();
     /**
@@ -705,91 +724,84 @@ export class GridComponent {
      */
     gridStateChange = new EventEmitter();
     /**
-     * Fires when the user expands a group header.
+     * Fires when a group is expanded through the UI.
      */
     groupExpand = new EventEmitter();
     /**
-     * Fires when the user collapses a group header.
+     * Fires when a group is collapsed through the UI.
      */
     groupCollapse = new EventEmitter();
     /**
-     * Fires when the user expands a master row.
+     * Fires when a detail row is expanded through the UI.
      */
     detailExpand = new EventEmitter();
     /**
-     * Fires when the user collapses a master row.
+     * Fires when a detail row is collapsed through the UI.
      */
     detailCollapse = new EventEmitter();
     /**
-     * Fires when the user clicks the **Edit** command button to edit a row
-     * ([see example](slug:inline_editing_grid#editing-records-1)).
+     * Fires when a row enters edit mode ([see example](slug:inline_editing_grid#editing-records-1)).
      */
     edit = new EventEmitter();
     /**
-     * Fires when the user clicks the **Cancel** command button to close a row
-     * ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
+     * Fires when editing is canceled by clicking the **Cancel** command button ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
      */
     cancel = new EventEmitter();
     /**
-     * Fires when the user clicks the **Save** command button to save changes in a row
-     * ([see example]({% slug inline_editing_grid %}#toc-saving-records-1)).
+     * Fires when a row is saved by clicking the **Save** command button ([see example]({% slug inline_editing_grid %}#toc-saving-records-1)).
      */
     save = new EventEmitter();
     /**
-     * Fires when the user clicks the **Remove** command button to remove a row
-     * ([see example]({% slug inline_editing_grid %}#toc-removing-records-1)).
+     * Fires when a row is removed by clicking the **Remove** command button ([see example]({% slug inline_editing_grid %}#toc-removing-records-1)).
      */
     remove = new EventEmitter();
     /**
-     * Fires when the user clicks the **Add** command button to add a new row
-     * ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).
+     * Fires when a new row is added by clicking the **Add** command button ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).
      */
     add = new EventEmitter();
     /**
-     * Fires when the user leaves an edited cell ([see example](slug:editing_incell_grid)).
+     * Fires when a cell edit is closed ([see example](slug:editing_incell_grid)).
      */
     cellClose = new EventEmitter();
     /**
-     * Fires when the user clicks a cell ([see example](slug:editing_incell_grid)).
+     * Fires when a cell is clicked ([see example](slug:editing_incell_grid)).
      */
     cellClick;
     /**
-     * Fires when the user clicks the **Export to PDF** command button.
+     * Fires when the PDF export command is triggered.
      */
     pdfExport = new EventEmitter();
     /**
-     * Fires when the user clicks the **Export to Excel** command button.
+     * Fires when the Excel export command is triggered.
      */
     excelExport = new EventEmitter();
     /**
-     * Fires when the user completes the resizing of the column.
+     * Fires when columns are resized.
      */
     columnResize;
     /**
-     * Fires when the user completes the reordering of the column.
+     * Fires when columns are reordered.
      */
     columnReorder = new EventEmitter();
     /**
-     * Fires when the user changes the visibility of the columns from the column menu or column chooser.
+     * Fires when column visibility changes.
      */
     columnVisibilityChange = new EventEmitter();
     /**
-     * Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.
+     * Fires when columns are locked or unlocked.
      */
     columnLockedChange = new EventEmitter();
     /**
-     * Fires when the user changes the sticky state of the columns from the column menu.
+     * Fires when columns are made sticky or unsticky.
      */
     columnStickyChange = new EventEmitter();
     /**
-     * Fires when the user scrolls to the last record on the page and enables endless scrolling
-     * ([see example]({% slug scrollmmodes_grid %}#toc-endless-scrolling)).
-     * You have to handle the event yourself and page the data.
+     * Fires when the last record is scrolled into view ([see example]({% slug scrollmmodes_grid %}#toc-endless-scrolling)).
      */
     scrollBottom = new EventEmitter();
     /**
      * Fires when the grid content is scrolled.
-     * For performance reasons, the event is triggered outside the Angular zone. Enter the Angular zone if you make any changes that require change detection.
+     * The event is triggered outside the Angular zone for performance. Enter the Angular zone if you make changes that require change detection.
      */
     contentScroll = new EventEmitter();
     /**
@@ -1205,59 +1217,47 @@ export class GridComponent {
         this.columnRangeChangeSubscription = this.columnInfoService.columnRangeChange.subscribe(this.onColumnRangeChange.bind(this));
     }
     /**
-     * Expands the specified master row ([see example]({% slug hierarchy_grid %})).
-     *
-     * This method is provided only for backwards-compatibility with legacy versions.
-     * These versions tracked the expanded state internally using the data row index.
+     * Expands the master row at the specified data row index ([see example]({% slug hierarchy_grid %})).
      *
-     * For new development, use the [kendoGridDetailsExpandBy directive]({% slug api_grid_expanddetailsdirective %})
-     * or provide an isDetailExpanded callback. See [Controlling the Expanded State]({% slug master_detail_expanded_state_grid %})
-     * for examples on how to control the expanded state.
+     * This method is for backwards compatibility with legacy versions that track expanded state by row index.
+     * For new development, use the [`kendoGridDetailsExpandBy` directive]({% slug api_grid_expanddetailsdirective %})
+     * or provide an `isDetailExpanded` callback. See [Controlling the Expanded State]({% slug master_detail_expanded_state_grid %}) for examples.
      *
-     * @param index - The data row index of the master row.
+     * @param index The data row index of the master row.
      */
     expandRow(index) {
         this.toggleDetailRowLegacy(index, true);
     }
     /**
-     * Collapses the specified master row ([see example]({% slug hierarchy_grid %})).
-     *
-     * This method is provided only for backwards-compatibility with legacy versions.
-     * These versions tracked the expanded state internally using the data row index.
+     * Collapses the master row at the specified data row index ([see example]({% slug hierarchy_grid %})).
      *
-     * For new development, use the [kendoGridDetailsExpandBy directive]({% slug api_grid_expanddetailsdirective %})
-     * or provide an isDetailExpanded callback. See [Controlling the Expanded State]({% slug master_detail_expanded_state_grid %})
-     * for examples on how to control the expanded state.
+     * This method is for backwards compatibility with legacy versions that track expanded state by row index.
+     * For new development, use the [`kendoGridDetailsExpandBy` directive]({% slug api_grid_expanddetailsdirective %})
+     * or provide an `isDetailExpanded` callback. See [Controlling the Expanded State]({% slug master_detail_expanded_state_grid %}) for examples.
      *
-     * @param index - The data row index of the master row.
+     * @param index The data row index of the master row.
      */
     collapseRow(index) {
         this.toggleDetailRowLegacy(index, false);
     }
     /**
-     * Expands a group header item for the given index. For example,
-     * `0_1` expands the second inner group of the first master group.
+     * Expands a group header at the given hierarchical index, such as `0_1` for the second inner group of the first master group.
      *
-     * This method is provided only for backwards-compatibility with legacy versions.
-     * These versions tracked the expanded group state internally using the hierarchical group index.
+     * This method is for backwards compatibility with legacy versions that track expanded group state by hierarchical group index.
+     * If the Grid is pageable, the group indexes are offset by the current Grid [skip]({% slug api_grid_gridcomponent %}#toc-skip).
      *
-     * When a Grid is pageable, the indexes of the groups are offset by the current Grid [skip]({% slug api_grid_gridcomponent %}#toc-skip).
-     *
-     * @param {string} index - The underscore separated hierarchical index of the group.
+     * @param {string} index The underscore-separated hierarchical index of the group.
      */
     expandGroup(index) {
         this.toggleGroupRowLegacy(index, true);
     }
     /**
-     * Collapses a group header item for the given index. For example,
-     * `0_1` collapses the second inner group of the first master group.
-     *
-     * This method is provided only for backwards-compatibility with legacy versions.
-     * These versions tracked the expanded group state internally using the hierarchical group index.
+     * Collapses a group header at the given hierarchical index, such as `0_1` for the second inner group of the first master group.
      *
-     * When a Grid is pageable, the indexes of the groups are offset by the current Grid [skip]({% slug api_grid_gridcomponent %}#toc-skip).
+     * This method is for backwards compatibility with legacy versions that track expanded group state by hierarchical group index.
+     * If the Grid is pageable, the group indexes are offset by the current Grid [skip]({% slug api_grid_gridcomponent %}#toc-skip).
      *
-     * @param {string} index - The underscore separated hierarchical index of the group.
+     * @param {string} index The underscore-separated hierarchical index of the group.
      */
     collapseGroup(index) {
         this.toggleGroupRowLegacy(index, false);
@@ -1472,12 +1472,11 @@ export class GridComponent {
      */
     messageFor = token => this.localization.get(token);
     /**
-     * Switches the specified table row in the edit mode ([see example]({% slug inline_editing_grid %}#toc-editing-records-1)).
+     * Switches the specified table row to edit mode ([see example]({% slug inline_editing_grid %}#toc-editing-records-1)).
      *
-     * @param rowIndex - The data row index that will be switched in the edit mode.
-     * @param group - The [FormGroup](link:site.data.urls.angular['formgroupapi'])
-     * that describes the edit form.
-     * @param options - Additional options configuring the focus target once the editor opens.
+     * @param rowIndex The data row index to switch to edit mode.
+     * @param group The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that describes the edit form.
+     * @param options Additional options to configure the focus target when the editor opens.
      */
     editRow(rowIndex, group, options) {
         this.editService.editRow(rowIndex, group);
@@ -1496,10 +1495,9 @@ export class GridComponent {
         this.rowReorderService[evType](ev);
     }
     /**
-     * Closes the editor for a given row ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
+     * Closes the editor for the specified row ([see example]({% slug inline_editing_grid %}#toc-canceling-editing-1)).
      *
-     * @param {number} index - The row index that will be switched out of the edit mode. If no index is provided, it is assumed
-     * that the new item editor will be closed.
+     * @param {number} index The row index to switch out of edit mode. If you do not provide an index, the new item editor closes.
      */
     closeRow(index) {
         this.editService.close(index);
@@ -1507,8 +1505,7 @@ export class GridComponent {
     /**
      * Creates a new row editor ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).
      *
-     * @param {FormGroup} group - The [FormGroup](link:site.data.urls.angular['formgroupapi']) that describes
-     * the edit form. If called with a data item, it will build the `FormGroup` from the data item fields.
+     * @param {FormGroup} group The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that describes the edit form. If you pass a data item, the method builds the `FormGroup` from the data item fields.
      */
     addRow(group) {
         const isFormGroup = group instanceof FormGroup;
@@ -1520,12 +1517,11 @@ export class GridComponent {
         this.focusEditElement('.k-grid-add-row');
     }
     /**
-     * Puts the cell that is specified by the table row and column in edit mode ([see example](slug:editing_incell_grid)).
+     * Puts the specified cell in edit mode ([see example](slug:editing_incell_grid)).
      *
-     * @param {number} rowIndex - The data row index that will be switched in the edit mode.
-     * @param {number|string|any} column - The leaf column index, or the field name or the column instance that should be edited.
-     * @param {FormGroup} group - The [FormGroup](link:site.data.urls.angular['formgroupapi'])
-     * that describes the edit form.
+     * @param {number} rowIndex The data row index to switch to edit mode.
+     * @param {number|string|any} column The leaf column index, field name, or column instance to edit.
+     * @param {FormGroup} group The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that describes the edit form.
      */
     editCell(rowIndex, column, group) {
         const instance = this.columnInstance(column);
@@ -1533,12 +1529,9 @@ export class GridComponent {
         this.focusEditElement('.k-grid-edit-cell');
     }
     /**
-     * Closes the current cell in edit mode and fires
-     * the [cellClose]({% slug api_grid_gridcomponent %}#toc-cellclose) event.
+     * Closes the current cell in edit mode and fires the [`cellClose`]({% slug api_grid_gridcomponent %}#toc-cellclose) event.
      *
-     * @return {boolean} Indicates whether the edited cell was closed.
-     * A `false` value indicates that the
-     * [cellClose]({% slug api_grid_gridcomponent %}#toc-cellclose) event was prevented.
+     * @returns {boolean} `true` if the cell closed. Returns `false` if the [`cellClose`]({% slug api_grid_gridcomponent %}#toc-cellclose) event was prevented.
      */
     closeCell() {
         return !this.editService.closeCell();
@@ -1550,17 +1543,17 @@ export class GridComponent {
         this.editService.cancelCell();
     }
     /**
-     * Returns a flag which indicates if a row or a cell is currently edited.
+     * Returns `true` if a row or cell is currently edited.
      *
-     * @return {boolean} A flag which indicates if a row or a cell is currently edited.
+     * @returns {boolean} `true` if a row or cell is currently edited.
      */
     isEditing() {
         return this.editService.isEditing();
     }
     /**
-     * Returns a flag which indicates if a cell is currently edited.
+     * Returns `true` if a cell is currently edited.
      *
-     * @return {boolean} A flag which indicates if a cell is currently being edited.
+     * @returns {boolean} `true` if a cell is currently being edited.
      */
     isEditingCell() {
         return this.editService.isEditingCell();
@@ -1572,10 +1565,10 @@ export class GridComponent {
         this.pdfService.save(this);
     }
     /**
-     * Exports the Grid element to a Drawing [Group]({% slug api_kendo-drawing_group %}) by using the `kendo-grid-pdf` component options.
+     * Exports the Grid element to a Drawing [Group]({% slug api_kendo-drawing_group %}) using the `kendo-grid-pdf` component options
      * ([see example]({% slug pdfexport_grid %}#toc-exporting-multiple-grids-to-the-same-pdf)).
      *
-     * @return {Promise} A promise that will be resolved with the Drawing `Group`.
+     * @returns {Promise} A promise that resolves with the Drawing `Group`.
      */
     drawPDF() {
         const promise = createPromise();
@@ -1589,7 +1582,7 @@ export class GridComponent {
         this.excelService.save(this);
     }
     /**
-     * Applies the provided `GridState` object to the Grid.
+     * Applies the given `GridState` object to the Grid.
      */
     loadState(state) {
         if (state.columnsState) {
@@ -1627,10 +1620,8 @@ export class GridComponent {
         });
     }
     /**
-     * Applies the minimum possible width for the specified column,
-     * so that the whole text fits without wrapping. This method expects the Grid
-     * to be [resizable](slug:resizing_columns_grid). The method must be executed
-     * after the Grid is already populated with data.
+     * Applies the minimum possible width for the specified column so the whole text fits without wrapping.
+     * This method expects the Grid to be [`resizable`](slug:resizing_columns_grid). Run this method after the Grid is populated with data.
      * [See example](slug:resizing_columns_grid#toc-auto-fitting-the-content)
      */
     autoFitColumn(column) {
@@ -1638,10 +1629,8 @@ export class GridComponent {
     }
     /**
      * Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping.
-     * If no columns are specified, `autoFitColumns` is applied to all columns.The method must be executed
-     * after the Grid is already populated with data.
+     * If you do not specify columns, `autoFitColumns` applies to all columns. Run this method after the Grid is populated with data.
      * [See example](slug:resizing_columns_grid#toc-auto-fitting-the-content)
-     *
      */
     autoFitColumns(columns = this.columns) {
         let cols;
@@ -1716,8 +1705,8 @@ export class GridComponent {
      * If the Grid is configured for scrolling, including virtual scrolling, the scroll position will be updated.
      * If the row is not present on the current page, the method will have no effect.
      *
-     * @param rowIndex - The logical row index to focus. The top header row has an index 0.
-     * @param colIndex - The column index to focus.
+     * @param rowIndex The logical row index to focus. The top header row has an index 0.
+     * @param colIndex The column index to focus.
      * @returns {NavigationCell} The focused cell.
      *
      */
@@ -1728,7 +1717,7 @@ export class GridComponent {
     /**
      * Focuses the next cell, optionally wrapping to the next row.
      *
-     * @param wrap - A Boolean value which indicates if the focus will move to the next row. Defaults to `true`.
+     * @param wrap A Boolean value which indicates if the focus will move to the next row. Defaults to `true`.
      * @returns {NavigationCell} The focused cell. If the focus is already on the last cell, returns `null`.
      */
     focusNextCell(wrap = true) {
@@ -1759,15 +1748,12 @@ export class GridComponent {
     }
     /**
      * Changes the position of the specified column.
-     * The reordering of columns operates only on the level
-     * which is inferred by the source column.
-     * For the `reorderColumn` method to work properly,
-     * the `source` column has to be visible.
-     *
-     * @param {ColumnBase} source - The column whose position will be changed.
-     * @param {number} destIndex - The new position of the column.
-     * @param {ColumnReorderConfig} options - Additional options.
+     * The reordering of columns operates only on the level inferred by the source column.
+     * For this method to work, the `source` column must be visible.
      *
+     * @param {ColumnBase} source The column to move.
+     * @param {number} destIndex The new position of the column.
+     * @param {ColumnReorderConfig} options Additional options.
      */
     reorderColumn(source, destIndex, options = { before: false }) {
         const columnsForLevel = sortColumns(this.allColumnsForLevel(source.level));
@@ -3006,6 +2992,7 @@ export class GridComponent {
                     [style.table-layout]="resizable ? 'fixed' : null"
                     kendoGridTable
                     kendoGridResizableTable
+                    class="k-grid-table"
                     role="presentation"
                     [size]="size">
                     <colgroup kendoGridColGroup
@@ -3042,6 +3029,8 @@ export class GridComponent {
                         [data]="$any(view)"
                         [skip]="skip"
                         [columns]="$any(leafColumns)"
+                        [totalColumnsCount]="leafColumns.length"
+                        [totalColumns]="columnsContainer"
                         [selectable]="selectable"
                         [filterable]="filterable"
                         [noRecordsTemplate]="noRecordsTemplate"
@@ -3829,6 +3818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [style.table-layout]="resizable ? 'fixed' : null"
                     kendoGridTable
                     kendoGridResizableTable
+                    class="k-grid-table"
                     role="presentation"
                     [size]="size">
                     <colgroup kendoGridColGroup
@@ -3865,6 +3855,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [data]="$any(view)"
                         [skip]="skip"
                         [columns]="$any(leafColumns)"
+                        [totalColumnsCount]="leafColumns.length"
+                        [totalColumns]="columnsContainer"
                         [selectable]="selectable"
                         [filterable]="filterable"
                         [noRecordsTemplate]="noRecordsTemplate"