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

package/fesm2020/progress-kendo-angular-grid.mjs

@@ -1344,7 +1344,12 @@ const getGroupRowArgs = (groupItem) => {
     return { group: groupItem.data, groupIndex: groupItem.index, parentGroup: getGroupRowArgs(groupItem.parentGroup) };
 };
 
-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
  */
@@ -1377,10 +1382,10 @@ 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;
@@ -1515,8 +1520,11 @@ 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 });
@@ -1648,8 +1656,7 @@ 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))))
@@ -2255,16 +2262,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 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
  */
 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
@@ -2275,8 +2287,10 @@ 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',
@@ -2288,14 +2302,16 @@ const ColumnConfigurationErrorMessages = {
 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,
@@ -4518,8 +4534,8 @@ 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/'
 };
 
@@ -16697,7 +16713,26 @@ 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() {
@@ -18007,7 +18042,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
@@ -18237,7 +18271,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
@@ -18695,7 +18728,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 = {};
 /**
@@ -18772,7 +18805,7 @@ 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;
@@ -19015,21 +19048,21 @@ 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);
@@ -19063,6 +19096,23 @@ 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;
@@ -19996,7 +20046,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))));
@@ -20830,8 +20880,6 @@ 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.
@@ -20846,8 +20894,6 @@ 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.
@@ -20861,12 +20907,6 @@ class GridComponent {
     resetGroupsState() {
         this.groupsService.reset();
     }
-    /**
-     * @hidden
-     */
-    expandGroupChildren(groupIndex) {
-        this.groupsService.expandChildren(groupIndex);
-    }
     /**
      * @hidden
      */
@@ -20935,7 +20975,6 @@ class GridComponent {
         this.attachElementEventHandlers();
         this.updateNavigationMetadata();
         this.applyAutoSize();
-        // this.sizingService.changes.next(this.size);
     }
     ngAfterContentChecked() {
         this.columnsContainer.refresh();
@@ -21291,7 +21330,13 @@ 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.
@@ -21520,16 +21565,19 @@ 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);
@@ -21538,10 +21586,16 @@ 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'));
@@ -21839,7 +21893,10 @@ 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) {
@@ -26361,6 +26418,10 @@ const count = (groups, includeFooters = false) => (groups.reduce((acc, group) =>
     }
     return acc;
 }, 0));
+/**
+ * @hidden
+ */
+const noDescriptors = (descriptors) => !isPresent(descriptors) || !descriptors.length;
 /**
  * @hidden
  */
@@ -26436,8 +26497,11 @@ const skippedHeaders = (groupItem) => {
  * A directive which encapsulates the in-memory handling of grouping with virtual scrolling.
  */
 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.
@@ -26458,7 +26522,9 @@ 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;
@@ -26491,22 +26557,65 @@ 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));
@@ -26518,11 +26627,17 @@ 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) {
@@ -26562,12 +26677,15 @@ 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: GridComponent }, { token: i0.ChangeDetectorRef }, { token: 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: LocalDataChangesService }, { token: ContextService }, { token: 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: GridComponent }, { type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }]; }, propDecorators: { kendoGridGroupBinding: [{
+            args: [{
+                    selector: '[kendoGridGroupBinding]',
+                    exportAs: 'kendoGridGroupBinding'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }, { type: ContextService }, { type: GroupsService }]; }, propDecorators: { kendoGridGroupBinding: [{
                 type: Input,
                 args: ["kendoGridGroupBinding"]
             }], sort: [{

package/grid.component.d.ts

@@ -57,7 +57,7 @@ import { NavigationService } from './navigation/navigation.service';
 import { NavigationCell } from './navigation/navigation-cell.interface';
 import { NavigationRow } from './navigation/navigation-row.interface';
 import { ColumnInfoService } from "./common/column-info.service";
-import { ScrollRequestService, ScrollRequest } from './scrolling/scroll-request.service';
+import { ScrollRequestService, ScrollRequest, ScrollToItemRequest } from './scrolling/scroll-request.service';
 import { SortService } from './common/sort.service';
 import { ColumnMenuTemplateDirective } from './column-menu/column-menu-template.directive';
 import { ColumnMenuSettings } from './column-menu/column-menu-settings.interface';
@@ -95,7 +95,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
     private cellSelectionService;
     wrapper: ElementRef;
     private groupInfoService;
-    private groupsService;
+    groupsService: GroupsService;
     private changeNotification;
     private detailsService;
     private editService;
@@ -659,8 +659,6 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      * 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.
@@ -673,8 +671,6 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      * 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.
@@ -684,10 +680,6 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      * @hidden
      */
     resetGroupsState(): void;
-    /**
-     * @hidden
-     */
-    expandGroupChildren(groupIndex: string): void;
     /**
      * @hidden
      */
@@ -853,6 +845,10 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      * Scrolls to the specified row and column ([see example]({% slug scrollmmodes_grid %}#toc-scrolling-to-a-specific-row-and-column-index)).
      */
     scrollTo(request: ScrollRequest): void;
+    /**
+     * Scrolls to the specified data item and column ([see example]({% slug scrollmmodes_grid %}#toc-scrolling-to-a-specific-row-and-column-index)).
+     */
+    scrollToItem(request: ScrollToItemRequest): void;
     /**
      * Changes the position of the specified column.
      * The reordering of columns operates only on the level

package/grouping/group-rows-args.interface.d.ts

@@ -8,12 +8,12 @@ import { GroupResult } from "@progress/kendo-data-query";
  */
 export interface GroupRowArgs {
     /**
-     * The hierarchical row group index.
-     * For example, "4_0" would be the 1st sub-group in the 5th group.
+     * The GroupResult object associated with the group row.
      */
     group?: GroupResult;
     /**
-     * The parent of the current group row, if any.
+     * The hierarchical row group index.
+     * For example, "4_0" would be the 1st sub-group in the 5th group.
      */
     groupIndex: string;
     /**

package/grouping/group-scroll-binding.directive.d.ts

@@ -4,16 +4,21 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, AfterContentInit } from '@angular/core';
 import { DataBindingDirective } from "../databinding.directive";
-import { GridComponent } from "../grid.component";
 import { CompositeFilterDescriptor, GroupDescriptor, SortDescriptor, State } from "@progress/kendo-data-query";
 import { GridDataResult } from "../data/data.collection";
 import { VirtualGroupResult } from "./virtual-group-result.interface";
 import { LocalDataChangesService } from "../editing/local-data-changes.service";
+import { ContextService } from '../common/provider.service';
+import { GroupsService } from './groups.service';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export declare const count: (groups: any[], includeFooters?: boolean) => any;
+/**
+ * @hidden
+ */
+export declare const noDescriptors: (descriptors?: any[]) => boolean;
 /**
  * @hidden
  */
@@ -22,6 +27,7 @@ export declare const slice: (groups: any[], skip: number, take: number, includeF
  * A directive which encapsulates the in-memory handling of grouping with virtual scrolling.
  */
 export declare class GroupBindingDirective extends DataBindingDirective implements AfterContentInit {
+    private groupsService;
     /**
      * The array of data which will be used to populate the Grid.
      */
@@ -43,18 +49,35 @@ export declare class GroupBindingDirective extends DataBindingDirective implemen
      */
     set group(value: GroupDescriptor[]);
     private groups;
-    constructor(grid: GridComponent, changeDetector: ChangeDetectorRef, localDataChangesService: LocalDataChangesService);
+    private gridSubs;
+    constructor(changeDetector: ChangeDetectorRef, localDataChangesService: LocalDataChangesService, ctxService: ContextService, groupsService: GroupsService);
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     /**
      * @hidden
      */
-    ngOnInit(): void;
-    ngAfterContentInit(): void;
-    protected groupExpand({ groupIndex }: any): void;
-    protected groupCollapse({ groupIndex }: any): void;
+    toggleAll(expand: boolean): void;
+    /**
+     * Collapses all expanded root level groups.
+     */
+    collapseAll(): void;
+    /**
+     * Expands all expanded root level groups.
+     */
+    expandAll(): void;
+    /**
+     * @hidden
+     */
+    groupExpand({ groupIndex }: any): void;
+    /**
+     * @hidden
+     */
+    groupCollapse({ groupIndex }: any): void;
     protected process(state: State): GridDataResult;
     protected processGroups(state: State): GridDataResult;
     protected dataResult(skip: number, take: number): GridDataResult;
     protected applyState({ skip, take, sort, group, filter }: State): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GroupBindingDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<GroupBindingDirective, "[kendoGridGroupBinding]", never, { "kendoGridGroupBinding": "kendoGridGroupBinding"; "sort": "sort"; "filter": "filter"; "group": "group"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GroupBindingDirective, "[kendoGridGroupBinding]", ["kendoGridGroupBinding"], { "kendoGridGroupBinding": "kendoGridGroupBinding"; "sort": "sort"; "filter": "filter"; "group": "group"; }, {}, never>;
 }