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

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

@@ -455,16 +455,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
@@ -475,8 +480,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',
@@ -488,14 +495,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,
@@ -2517,8 +2526,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 });
@@ -2537,7 +2549,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
  */
@@ -2570,10 +2587,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;
@@ -3224,8 +3241,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))))
@@ -4550,8 +4566,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/'
 };
 
@@ -16777,7 +16793,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() {
@@ -18091,7 +18126,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
@@ -18321,7 +18355,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
@@ -18779,7 +18812,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 = {};
 /**
@@ -18856,7 +18889,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;
@@ -19099,21 +19132,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);
@@ -19147,6 +19180,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;
@@ -20082,7 +20132,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))));
@@ -20917,8 +20967,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.
@@ -20933,8 +20981,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.
@@ -20948,12 +20994,6 @@ class GridComponent {
     resetGroupsState() {
         this.groupsService.reset();
     }
-    /**
-     * @hidden
-     */
-    expandGroupChildren(groupIndex) {
-        this.groupsService.expandChildren(groupIndex);
-    }
     /**
      * @hidden
      */
@@ -21022,7 +21062,6 @@ class GridComponent {
         this.attachElementEventHandlers();
         this.updateNavigationMetadata();
         this.applyAutoSize();
-        // this.sizingService.changes.next(this.size);
     }
     ngAfterContentChecked() {
         this.columnsContainer.refresh();
@@ -21379,7 +21418,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.
@@ -21608,16 +21653,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);
@@ -21626,10 +21674,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'));
@@ -21927,7 +21981,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) {
@@ -26464,6 +26521,10 @@ const count = (groups, includeFooters = false) => (groups.reduce((acc, group) =>
     }
     return acc;
 }, 0));
+/**
+ * @hidden
+ */
+const noDescriptors = (descriptors) => !isPresent(descriptors) || !descriptors.length;
 /**
  * @hidden
  */
@@ -26539,8 +26600,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.
@@ -26561,7 +26625,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;
@@ -26594,22 +26660,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));
@@ -26621,11 +26730,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) {
@@ -26665,12 +26780,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: [{