@progress/kendo-angular-grid 15.2.0 → 15.3.0-develop.3

package/common/provider.service.d.ts

@@ -6,6 +6,7 @@ import { Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import type { GridComponent } from '../grid.component';
 import { GridToolbarNavigationService } from '../rendering/toolbar/toolbar-navigation.service';
+import type { GroupBindingDirective } from '../grouping/group-scroll-binding.directive';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -23,6 +24,7 @@ export declare class ContextService {
     topToolbarNavigation: GridToolbarNavigationService;
     bottomToolbarNavigation: GridToolbarNavigationService;
     navigable: boolean;
+    groupBindingDirective: GroupBindingDirective;
     constructor(renderer: Renderer2, localization: LocalizationService);
     static ɵfac: i0.ɵɵFactoryDeclaration<ContextService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ContextService>;

package/esm2020/common/error-messages.mjs

@@ -6,16 +6,21 @@
  * @hidden
  */
 export const ColumnMenuErrorMessages = {
-    autoSizeColumn: 'The auto size column does not work with enabled virtual columns',
-    autoSizeAllColumns: 'The auto size all columns does not work with enabled virtual columns',
-    serviceInput: 'The service input of the predefined column menu components is mandatory.'
+    autoSizeColumn: `The auto size column does not work with enabled virtual columns.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu/#toc-autosize-column-item.`,
+    autoSizeAllColumns: `The auto size all columns does not work with enabled virtual columns.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu/#toc-autosize-all-columns-item.`,
+    serviceInput: `The service input of the predefined column menu components is mandatory.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu/#toc-customizing-the-content.`
 };
 /**
  * @hidden
  */
 export const ClipboardErrorMessages = {
-    activeCellNavigable: 'Grid must be navigable to use "activeCell" as clipboard target type.',
-    selectionSelectable: 'Grid must be selectable to use "selection" as clipboard target type.'
+    activeCellNavigable: `Grid must be navigable to use "activeCell" as clipboard target type.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/clipboard/#toc-active-cell.`,
+    selectionSelectable: `Grid must be selectable to use "selection" as clipboard target type.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/clipboard/#toc-current-selection.`
 };
 /**
  * @hidden
@@ -26,8 +31,10 @@ export const ColumnConfigurationErrorMessages = {
         Please use only valid identifier names to ensure error-free operation.`,
     width: (value, parsedValue) => `Expected numeric value for column width, but got a string "${value}". Treating as ${parsedValue}px.`,
     invalidColumn: (column) => `Invalid column ${column}.`,
-    requiredWidth: (columnType) => `${columnType} columns feature requires all columns to have set width.`,
-    requiredScroll: (columnType) => `${columnType} columns are only supported when scrolling is enabled.`,
+    requiredWidth: (columnType) => `${columnType} columns feature requires all columns to have set width.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/columns/${columnType.toLowerCase()}.`,
+    requiredScroll: (columnType) => `${columnType} columns are only supported when scrolling is enabled.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/columns/${columnType.toLowerCase()}/`,
     groupColumnContent: 'ColumnGroupComponent should contain ColumnComponent or CommandColumnComponent.',
     lockedParent: 'Locked child columns require their parent columns to be locked.',
     columnNested: 'Columns can be nested only inside ColumnGroupComponent',
@@ -39,14 +46,16 @@ export const ColumnConfigurationErrorMessages = {
 export const GridConfigurationErrorMessages = {
     functionType: (propName, fn) => `${propName} must be a function, but received ${JSON.stringify(fn)}.`,
     incompatibleFeatures: (feat1Name, feat2Name) => `'Having both ${feat1Name} and ${feat2Name} is not supported.'`,
-    nonLockedColumnPresent: 'There should be at least one non-locked column',
-    rowHeightVirtual: 'Row height and detail row height settings require virtual scrolling mode to be enabled.',
-    focusNavigable: 'The Grid should be configured as navigable to control focus',
+    nonLockedColumnPresent: 'There should be at least one non-locked column. See https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/#toc-known-limitations',
+    rowHeightVirtual: `The virtual scrolling functionality requires setting the rowHeight (and detailRowHeight when there are detail rows).
+        Row height and detail row height settings should be set only when virtual scrolling mode is enabled.
+        See https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-getting-started.`,
+    focusNavigable: 'The Grid should be configured as navigable to control focus. See https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation/.',
     expandCollapseMethods: (expandMethodName, collapseMethodName, directiveName, callbackName) => `The ${expandMethodName} and ${collapseMethodName} methods should not be called
         when using the ${directiveName} directive or the ${callbackName} callback.
         These methods are provided only for backwards compatibility with legacy versions.`,
     requiredEditService: `The default edit service of the editing directives works only when binding to plain array.
-        Please provide an editService.`,
+        Please provide an editService. See https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-directives/#toc-custom-editing-service.`,
     requiredModule: (exportedType, moduleName, componentSelector) => `Creating ${exportedType} requires including the ${moduleName} and adding the ${componentSelector} component.`,
     groupBindingDirectives: `Using the "kendoGridGroupBinding" directive in combination with the "kendoGridExpandGroupBy" directive
         or the "isGroupExpanded" callback is not supported. To use grouping with the "kendoGridGroupBinding" directive,

package/esm2020/grid.component.mjs

@@ -131,7 +131,7 @@ const validateColumnsField = (columns) => expandColumns(columns.toArray())
     .filter(isColumnComponent)
     .filter(({ field }) => !isValidFieldName(field))
     .forEach(({ field }) => console.warn(ColumnConfigurationErrorMessages.fieldName(field)));
-const handleExpandCollapseGroupsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ group }) => isPresent(group)))
+const handleExpandCollapseGroupsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ group, emit }) => emit && isPresent(group)))
     .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
 const handleExpandCollapseDetailsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ dataItem }) => isPresent(dataItem)))
     .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
@@ -965,8 +965,6 @@ export class GridComponent {
      * This method is provided only for backwards-compatibility with legacy versions.
      * These versions tracked the expanded group state internally using the hierarchical group index.
      *
-     * The `expandGroup` method is not supported when you use the [kendoGridGroupBinding]({% slug api_grid_groupbindingdirective %}) directive.
-     *
      * 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.
@@ -981,8 +979,6 @@ export class GridComponent {
      * This method is provided only for backwards-compatibility with legacy versions.
      * These versions tracked the expanded group state internally using the hierarchical group index.
      *
-     * The `collapseGroup` method is not supported when you use the [kendoGridGroupBinding]({% slug api_grid_groupbindingdirective %}) directive.
-     *
      * 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.
@@ -996,12 +992,6 @@ export class GridComponent {
     resetGroupsState() {
         this.groupsService.reset();
     }
-    /**
-     * @hidden
-     */
-    expandGroupChildren(groupIndex) {
-        this.groupsService.expandChildren(groupIndex);
-    }
     /**
      * @hidden
      */
@@ -1070,7 +1060,6 @@ export class GridComponent {
         this.attachElementEventHandlers();
         this.updateNavigationMetadata();
         this.applyAutoSize();
-        // this.sizingService.changes.next(this.size);
     }
     ngAfterContentChecked() {
         this.columnsContainer.refresh();
@@ -1426,7 +1415,13 @@ export class GridComponent {
      * Scrolls to the specified row and column ([see example]({% slug scrollmmodes_grid %}#toc-scrolling-to-a-specific-row-and-column-index)).
      */
     scrollTo(request) {
-        this.scrollRequestService.scrollTo(request);
+        this.scrollRequestService.scrollTo(request, false);
+    }
+    /**
+     * Scrolls to the specified data item and column ([see example]({% slug scrollmmodes_grid %}#toc-scrolling-to-a-specific-row-and-column-index)).
+     */
+    scrollToItem(request) {
+        this.scrollRequestService.scrollToItem(request);
     }
     /**
      * Changes the position of the specified column.
@@ -1655,16 +1650,19 @@ export class GridComponent {
                 throw new Error(GridConfigurationErrorMessages.incompatibleFeatures('detail template', 'sticky columns'));
             }
             if (this.lockedLeafColumns.length && !this.nonLockedLeafColumns.length) {
-                throw new Error(GridConfigurationErrorMessages.nonLockedColumnPresent);
+                console.warn(GridConfigurationErrorMessages.nonLockedColumnPresent);
             }
             if ((locked || this.virtualColumns) && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
-                throw new Error(ColumnConfigurationErrorMessages.requiredWidth(locked ? 'Locked' : 'Virtual'));
+                console.warn(ColumnConfigurationErrorMessages.requiredWidth(locked ? 'Locked' : 'Virtual'));
             }
             if (locked && !this.isScrollable) {
-                throw new Error(ColumnConfigurationErrorMessages.requiredScroll('Locked'));
+                console.warn(ColumnConfigurationErrorMessages.requiredScroll('Locked'));
             }
             if (stickyColumns && !this.isScrollable) {
-                throw new Error(ColumnConfigurationErrorMessages.requiredScroll('Sticky'));
+                console.warn(ColumnConfigurationErrorMessages.requiredScroll('Sticky'));
+            }
+            if (this.virtualColumns && !this.isScrollable) {
+                console.warn(ColumnConfigurationErrorMessages.requiredScroll('Virtual'));
             }
             if (this.columnList.filter(isColumnGroupComponent).filter((x) => !x.hasChildren).length) {
                 throw new Error(ColumnConfigurationErrorMessages.groupColumnContent);
@@ -1673,10 +1671,16 @@ export class GridComponent {
                 throw new Error(ColumnConfigurationErrorMessages.lockedParent);
             }
             if ((this.rowHeight || this.detailRowHeight) && !this.isVirtual) {
-                throw new Error(GridConfigurationErrorMessages.rowHeightVirtual);
+                console.warn(GridConfigurationErrorMessages.rowHeightVirtual);
+            }
+            if (!this.rowHeight && this.isVirtual) {
+                console.warn(GridConfigurationErrorMessages.rowHeightVirtual);
+            }
+            if (!this.detailRowHeight && this.isVirtual && this.detailTemplate) {
+                console.warn(GridConfigurationErrorMessages.rowHeightVirtual);
             }
             if (stickyColumns && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
-                throw new Error(ColumnConfigurationErrorMessages.requiredWidth('Sticky'));
+                console.warn(ColumnConfigurationErrorMessages.requiredWidth('Sticky'));
             }
             if (stickyColumns && this.virtualColumns) {
                 throw new Error(GridConfigurationErrorMessages.incompatibleFeatures('sticky columns', 'column virtualization'));
@@ -1974,7 +1978,10 @@ export class GridComponent {
             return;
         }
         if (this.groupsService.isExpanded({ groupIndex: index }) !== expand) {
-            this.groupsService.toggleRow({ index });
+            this.groupsService.toggleRow({ index }, false);
+            if (this.ctx.groupBindingDirective) {
+                this.ctx.groupBindingDirective[`group${expand ? 'Expand' : 'Collapse'}`]({ groupIndex: index });
+            }
         }
     }
     shouldResetSelection(selectableChanges) {

package/esm2020/grouping/group-scroll-binding.directive.mjs

@@ -4,15 +4,18 @@
 *-------------------------------------------------------------------------------------------*/
 import { Directive, Input, ChangeDetectorRef, isDevMode } from '@angular/core';
 import { DataBindingDirective } from "../databinding.directive";
-import { GridComponent } from "../grid.component";
 import { filterBy, process } from "@progress/kendo-data-query";
 import { isPresent, isArray } from "../utils";
 import { diffFilters, cloneFilters } from "../common/filter-descriptor-differ";
 import { LocalDataChangesService } from "../editing/local-data-changes.service";
 import { GridConfigurationErrorMessages } from '../common/error-messages';
+import { ContextService } from '../common/provider.service';
+import { GroupsService } from './groups.service';
+import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
-import * as i1 from "../grid.component";
-import * as i2 from "../editing/local-data-changes.service";
+import * as i1 from "../editing/local-data-changes.service";
+import * as i2 from "../common/provider.service";
+import * as i3 from "./groups.service";
 const hasGroups = (items) => items && items.length && items[0].field && items[0].items;
 const groupDescriptorsPresent = (descriptors) => isPresent(descriptors) && descriptors.length > 0;
 const processGroups = (data, state) => process(data, state).data;
@@ -54,6 +57,10 @@ export const count = (groups, includeFooters = false) => (groups.reduce((acc, gr
     }
     return acc;
 }, 0));
+/**
+ * @hidden
+ */
+export const noDescriptors = (descriptors) => !isPresent(descriptors) || !descriptors.length;
 /**
  * @hidden
  */
@@ -129,8 +136,11 @@ const skippedHeaders = (groupItem) => {
  * A directive which encapsulates the in-memory handling of grouping with virtual scrolling.
  */
 export class GroupBindingDirective extends DataBindingDirective {
-    constructor(grid, changeDetector, localDataChangesService) {
-        super(grid, changeDetector, localDataChangesService);
+    constructor(changeDetector, localDataChangesService, ctxService, groupsService) {
+        super(ctxService.grid, changeDetector, localDataChangesService);
+        this.groupsService = groupsService;
+        this.gridSubs = new Subscription();
+        ctxService.groupBindingDirective = this;
     }
     /**
      * The array of data which will be used to populate the Grid.
@@ -151,7 +161,9 @@ export class GroupBindingDirective extends DataBindingDirective {
      * Defines the descriptors by which the data will be sorted.
      */
     set sort(value) {
-        const clear = this.state.sort !== value;
+        const noCurrentDescriptors = noDescriptors(this.state.sort);
+        const noIncomingDescriptors = noDescriptors(value);
+        const clear = this.state.sort !== value && !(noCurrentDescriptors && noIncomingDescriptors);
         this.grid.sort = this.state.sort = value;
         if (clear) {
             this.groups = null;
@@ -184,22 +196,65 @@ export class GroupBindingDirective extends DataBindingDirective {
             this.skip = 0;
         }
     }
-    /**
-     * @hidden
-     */
     ngOnInit() {
         super.ngOnInit();
-        this.grid.groupExpand.subscribe(this.groupExpand.bind(this));
-        this.grid.groupCollapse.subscribe(this.groupCollapse.bind(this));
+        this.gridSubs.add(this.grid.groupExpand.subscribe(this.groupExpand.bind(this)));
+        this.gridSubs.add(this.grid.groupCollapse.subscribe(this.groupCollapse.bind(this)));
     }
     ngAfterContentInit() {
         if (isDevMode() && this.grid.isGroupExpanded) {
             throw new Error(GridConfigurationErrorMessages.groupBindingDirectives);
         }
     }
+    ngOnDestroy() {
+        this.gridSubs.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    toggleAll(expand) {
+        this.skip = 0;
+        this.grid.scrollTo({ row: 0, column: 0 });
+        this.groups.forEach((gr, idx) => {
+            const expanded = this.groupsService.isExpanded({
+                group: gr,
+                groupIndex: idx.toString(),
+                parentGroup: undefined
+            });
+            const performToggle = (expand && !expanded) || (!expand && expanded);
+            if (performToggle) {
+                this.grid.groupsService.toggleRow({
+                    type: 'group',
+                    data: gr,
+                    index: idx.toString(),
+                    level: 0,
+                    parentGroup: undefined
+                });
+                this[expand ? 'groupExpand' : 'groupCollapse']({ groupIndex: idx.toString() });
+            }
+        });
+    }
+    /**
+     * Collapses all expanded root level groups.
+     */
+    collapseAll() {
+        this.toggleAll(false);
+    }
+    /**
+     * Expands all expanded root level groups.
+     */
+    expandAll() {
+        this.toggleAll(true);
+    }
+    /**
+     * @hidden
+     */
     groupExpand({ groupIndex }) {
-        this.grid.expandGroupChildren(groupIndex);
         const { group, parents } = findGroup(groupIndex, this.groups);
+        if (!group) {
+            return;
+        }
+        this.groupsService.expandChildren(groupIndex);
         if (!group.items.length) {
             const descriptors = this.state.group.filter(removeParentDescriptors(parents, group));
             const children = findChildren(this.originalData, parents.concat(group));
@@ -211,11 +266,17 @@ export class GroupBindingDirective extends DataBindingDirective {
         }
         this.grid.data = this.dataResult(this.state.skip, this.state.take);
     }
+    /**
+     * @hidden
+     */
     groupCollapse({ groupIndex }) {
         const { group } = findGroup(groupIndex, this.groups);
         if (group) {
             group.items = [];
         }
+        else {
+            return;
+        }
         this.grid.data = this.dataResult(this.state.skip, this.state.take);
     }
     process(state) {
@@ -255,12 +316,15 @@ export class GroupBindingDirective extends DataBindingDirective {
         this.filter = filter;
     }
 }
-GroupBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupBindingDirective, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
-GroupBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GroupBindingDirective, selector: "[kendoGridGroupBinding]", inputs: { kendoGridGroupBinding: "kendoGridGroupBinding", sort: "sort", filter: "filter", group: "group" }, usesInheritance: true, ngImport: i0 });
+GroupBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupBindingDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalDataChangesService }, { token: i2.ContextService }, { token: i3.GroupsService }], target: i0.ɵɵFactoryTarget.Directive });
+GroupBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GroupBindingDirective, selector: "[kendoGridGroupBinding]", inputs: { kendoGridGroupBinding: "kendoGridGroupBinding", sort: "sort", filter: "filter", group: "group" }, exportAs: ["kendoGridGroupBinding"], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupBindingDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[kendoGridGroupBinding]' }]
-        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalDataChangesService }]; }, propDecorators: { kendoGridGroupBinding: [{
+            args: [{
+                    selector: '[kendoGridGroupBinding]',
+                    exportAs: 'kendoGridGroupBinding'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.LocalDataChangesService }, { type: i2.ContextService }, { type: i3.GroupsService }]; }, propDecorators: { kendoGridGroupBinding: [{
                 type: Input,
                 args: ["kendoGridGroupBinding"]
             }], sort: [{

package/esm2020/grouping/groups.service.mjs

@@ -6,7 +6,12 @@ import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 import { getGroupRowArgs } from './utils';
 import * as i0 from "@angular/core";
-const isChildIndex = (targetIndex, parentIndex) => parentIndex !== targetIndex && targetIndex.startsWith(parentIndex);
+const isChildIndex = (targetIndex, parentIndex) => {
+    const sameIndex = parentIndex === targetIndex;
+    const lastSeparatorIndex = targetIndex.lastIndexOf('_');
+    const sameSubGroupIndex = targetIndex.substring(0, lastSeparatorIndex) === parentIndex;
+    return !sameIndex && sameSubGroupIndex;
+};
 /**
  * @hidden
  */
@@ -39,10 +44,10 @@ export class GroupsService {
         }
         return expanded;
     }
-    toggleRow(groupItem) {
+    toggleRow(groupItem, emit = true) {
         const parentGroup = getGroupRowArgs(groupItem.parentGroup);
         const expand = !this.isExpanded({ group: groupItem.data, groupIndex: groupItem.index, parentGroup });
-        this.changes.next({ group: groupItem.data, expand, groupIndex: groupItem.index, parentGroup });
+        this.changes.next({ group: groupItem.data, expand, groupIndex: groupItem.index, parentGroup, emit });
         // if usercallback is given, the rowState should be ignored
         if (this.userCallback) {
             return;

package/esm2020/navigation/navigation.service.mjs

@@ -152,8 +152,7 @@ export class NavigationService {
             this.zone.onStable.pipe(take(1), map(() => args), ...operators);
         const onStable = onStableSubscriber();
         this.subs = new Subscription();
-        this.subs.add(this.cursor.changes
-            .subscribe(args => this.onCursorChanges(args)));
+        this.subs.add(this.cursor.changes.subscribe(args => this.onCursorChanges(args)));
         this.subs.add(this.domEvents.focus.pipe(switchMap(onStable))
             .subscribe((args) => this.navigateTo(args.target)));
         this.subs.add(this.domEvents.focusOut.pipe(filter(() => this.mode !== 0 /* Standby */), switchMap(onStableSubscriber(takeUntil(this.domEvents.focus))))

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1710342300,
-    version: '15.2.0',
+    publishDate: 1710360642,
+    version: '15.3.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/rendering/list.component.mjs

@@ -10,7 +10,7 @@ import { ScrollerService, PageAction, ScrollAction, ScrollBottomAction } from '.
 import { ScrollRequestService } from '../scrolling/scroll-request.service';
 import { ColumnBase } from '../columns/column-base';
 import { DetailTemplateDirective } from './details/detail-template.directive';
-import { isChanged, isPresent, isUniversal, anyChanged, isNumber, requestAnimationFrame, cancelAnimationFrame } from '../utils';
+import { isChanged, isPresent, isUniversal, anyChanged, isNumber, requestAnimationFrame, cancelAnimationFrame, recursiveFlatMap } from '../utils';
 import { DetailsService } from './details/details.service';
 import { ColumnsContainer } from '../columns/columns-container';
 import { ChangeNotificationService } from '../data/change-notification.service';
@@ -65,7 +65,7 @@ const elementAt = (index, elements, elementOffset) => {
         elementIdx += offset;
     }
 };
-const rowAt = (index, rows) => elementAt(index, rows, row => row.hasAttribute('data-kendo-grid-item-index') ? 1 : 0);
+const rowAt = (index, rows) => elementAt(index, rows, () => 1);
 const cellAt = (index, cells) => elementAt(index, cells, cell => !hasClasses(cell, NON_DATA_CELL_CLASSES) ? parseInt(cell.getAttribute('colSpan'), 10) || 1 : 0);
 const EMPTY_OBJECT = {};
 /**
@@ -142,7 +142,7 @@ export class ListComponent {
         this.rtl = false;
         this.scroller = scrollerFactory(this.dispatcher);
         this.subscriptions = detailsService.changes.subscribe(x => this.detailExpand(x));
-        this.subscriptions.add(scrollRequestService.requests.subscribe(x => this.scrollTo(x)));
+        this.subscriptions.add(scrollRequestService.requests.subscribe(req => isPresent(req.adjustIndex) ? this.scrollTo(req.request, req.adjustIndex) : this.scrollToItem(req.request)));
     }
     get showFooter() {
         return this.groupable && this.groupable.showFooter;
@@ -385,21 +385,21 @@ export class ListComponent {
             }
         });
     }
-    scrollToVirtualRow(itemIndex) {
+    scrollToVirtualRow(itemIndex, adjustIndexForDetailTemplate = true) {
         if (!isDocumentAvailable()) {
             return;
         }
-        if (isPresent(this.detailTemplate)) {
+        if (isPresent(this.detailTemplate) && adjustIndexForDetailTemplate) {
             itemIndex = Math.floor(itemIndex / 2);
         }
-        const offset = this.rowHeightService.offset(itemIndex);
+        const offset = this.rowHeightService.offset(itemIndex, !adjustIndexForDetailTemplate);
         this.container.nativeElement.scrollTop = offset;
         this.resetNavigationViewport();
     }
-    scrollTo({ row, column }) {
+    scrollTo({ row, column }, adjustIndex = false) {
         if (isNumber(row)) {
             if (this.isVirtual) {
-                this.scrollToVirtualRow(row);
+                this.scrollToVirtualRow(row, adjustIndex);
             }
             else {
                 const element = rowAt(row, this.table.nativeElement.rows);
@@ -433,6 +433,23 @@ export class ListComponent {
             }
         }
     }
+    scrollToItem(item) {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const data = this.ctx.grid.data;
+        const gridData = Array.isArray(data) ? data : data.data;
+        const gridDataItems = gridData.flatMap(recursiveFlatMap);
+        const dataItemIndex = gridDataItems.findIndex(dataItem => dataItem[item.idField] === item.id);
+        if (dataItemIndex !== -1) {
+            const row = Array.from(this.table.nativeElement.rows).find((r) => {
+                const dataAttribute = r.getAttribute('data-kendo-grid-item-index');
+                return dataAttribute && +dataAttribute === this.ctx.grid.skip + dataItemIndex;
+            });
+            row && row.scrollIntoView();
+            this.isVirtual && this.resetNavigationViewport();
+        }
+    }
     resetNavigationViewport() {
         if (!isDocumentAvailable) {
             return;

package/esm2020/rendering/table-body.component.mjs

@@ -458,7 +458,6 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             </ng-container>
         </td>
     </tr>
-
     <ng-container *ngFor="let item of data; trackBy: trackByWrapper; let rowIndex = index;">
         <tr *ngIf="isGroup(item) && isParentGroupExpanded($any(item)) && showGroupHeader(item)"
             kendoGridGroupHeader
@@ -688,7 +687,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </ng-container>
         </td>
     </tr>
-
     <ng-container *ngFor="let item of data; trackBy: trackByWrapper; let rowIndex = index;">
         <tr *ngIf="isGroup(item) && isParentGroupExpanded($any(item)) && showGroupHeader(item)"
             kendoGridGroupHeader

package/esm2020/scrolling/row-height.service.mjs

@@ -60,7 +60,26 @@ export class RowHeightService {
         }, undefined);
         return result === undefined ? this.total - 1 : result;
     }
-    offset(rowIndex) {
+    offset(rowIndex, adjustIndex = false) {
+        if (adjustIndex) {
+            let targetOffset = 0;
+            let targetIndex = 0;
+            for (let i = 0; i < rowIndex; i++) {
+                targetOffset += this.rowHeight;
+                targetIndex++;
+                if (targetIndex === rowIndex) {
+                    return targetOffset;
+                }
+                if (this.isExpanded(i)) {
+                    targetOffset += this.detailRowHeight;
+                    targetIndex++;
+                    if (targetIndex === rowIndex) {
+                        return targetOffset;
+                    }
+                }
+            }
+            return targetOffset;
+        }
         return this.offsets[rowIndex];
     }
     totalHeight() {

package/esm2020/scrolling/scroll-request.service.mjs

@@ -12,8 +12,11 @@ export class ScrollRequestService {
     constructor() {
         this.requests = new Subject();
     }
-    scrollTo(request) {
-        this.requests.next(request);
+    scrollTo(request, adjustIndex = true) {
+        this.requests.next({ request, adjustIndex });
+    }
+    scrollToItem(request) {
+        this.requests.next({ request });
     }
 }
 ScrollRequestService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollRequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });