@progress/kendo-angular-grid 6.1.1-dev.202203091004 → 6.1.2-dev.202203210932

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,6 +12,7 @@ import { expandColumns, leafColumns, columnsToRender } from '../columns/column-c
12
12
  import { DraggableDirective } from '@progress/kendo-angular-common';
13
13
  import { ColumnResizingService } from './column-resizing.service';
14
14
  import { delay, takeUntil, filter, take, tap, switchMap, map } from 'rxjs/operators';
15
+ import { ColumnInfoService } from '../common/column-info.service';
15
16
  // TODO
16
17
  // tslint:disable:rxjs-no-unsafe-takeuntil
17
18
  /**
@@ -101,13 +102,14 @@ var ɵ8 = indexOf;
101
102
  * @hidden
102
103
  */
103
104
  var ColumnHandleDirective = /** @class */ (function () {
104
- function ColumnHandleDirective(draggable, element, service, zone, cdr, localization) {
105
+ function ColumnHandleDirective(draggable, element, service, zone, cdr, localization, columnInfoService) {
105
106
  this.draggable = draggable;
106
107
  this.element = element;
107
108
  this.service = service;
108
109
  this.zone = zone;
109
110
  this.cdr = cdr;
110
111
  this.localization = localization;
112
+ this.columnInfoService = columnInfoService;
111
113
  this.columns = [];
112
114
  this.subscriptions = new Subscription();
113
115
  this.rtl = false;
@@ -155,6 +157,9 @@ var ColumnHandleDirective = /** @class */ (function () {
155
157
  };
156
158
  ColumnHandleDirective.prototype.ngOnInit = function () {
157
159
  var _this = this;
160
+ if (isBlank(this.column.width)) {
161
+ this.column.implicitWidth = headerWidth(this.element);
162
+ }
158
163
  var service = this.service.changes.pipe(filter(function () { return _this.column.resizable; }), filter(function (e) { return isPresent(e.columns.find(function (column) { return column === _this.column; })); }));
159
164
  this.subscriptions.add(service.pipe(filter(function (e) { return e.type === 'start'; }))
160
165
  .subscribe(this.initState.bind(this)));
@@ -222,6 +227,13 @@ var ColumnHandleDirective = /** @class */ (function () {
222
227
  };
223
228
  ColumnHandleDirective.prototype.updateWidth = function (column, width) {
224
229
  column.width = width;
230
+ this.columnInfoService.hiddenColumns.forEach(function (col) {
231
+ if (isBlank(col.width) && isPresent(col.implicitWidth)) {
232
+ // Resize hidden columns to their implicit width so they
233
+ // can be displayed with the same width if made visible.
234
+ col.width = col.implicitWidth;
235
+ }
236
+ });
225
237
  this.cdr.markForCheck(); //force CD cycle
226
238
  };
227
239
  ColumnHandleDirective.prototype.columnsForLevel = function (level) {
@@ -266,7 +278,8 @@ var ColumnHandleDirective = /** @class */ (function () {
266
278
  ColumnResizingService,
267
279
  NgZone,
268
280
  ChangeDetectorRef,
269
- LocalizationService])
281
+ LocalizationService,
282
+ ColumnInfoService])
270
283
  ], ColumnHandleDirective);
271
284
  return ColumnHandleDirective;
272
285
  }());
@@ -47,6 +47,16 @@ var ColumnInfoService = /** @class */ (function () {
47
47
  enumerable: true,
48
48
  configurable: true
49
49
  });
50
+ Object.defineProperty(ColumnInfoService.prototype, "hiddenColumns", {
51
+ get: function () {
52
+ if (!this.list) {
53
+ return [];
54
+ }
55
+ return this.list().filter(function (column) { return !column.isVisible; });
56
+ },
57
+ enumerable: true,
58
+ configurable: true
59
+ });
50
60
  Object.defineProperty(ColumnInfoService.prototype, "leafNamedColumns", {
51
61
  get: function () {
52
62
  var columns = expandColumns(this.list().filterSort(function (column) { return !column.isColumnGroup; }))
@@ -2698,7 +2698,7 @@ var GridComponent = /** @class */ (function () {
2698
2698
  // Styles for backwards compatibility with kendo-theme-default@v2.46.0 and earlier.
2699
2699
  " .k-grid .k-grid-aria-root {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n overflow: hidden;\n }\n\n .k-grid .k-filter-row td {\n white-space: nowrap;\n }"
2700
2700
  ],
2701
- template: "\n <ng-container kendoGridLocalizedMessages\n i18n-groupPanelEmpty=\"kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty\"\n groupPanelEmpty=\"Drag a column header and drop it here to group by that column\"\n\n i18n-noRecords=\"kendo.grid.noRecords|The label visible in the Grid when there are no records\"\n noRecords=\"No records available.\"\n\n i18n-pagerLabel=\"kendo.grid.pagerLabel|The label for the Grid pager\"\n pagerLabel=\"{{ 'Page navigation, page {currentPage} of {totalPages}' }}\"\n\n i18n-pagerFirstPage=\"kendo.grid.pagerFirstPage|The label for the first page button in Grid pager\"\n pagerFirstPage=\"Go to the first page\"\n\n i18n-pagerPreviousPage=\"kendo.grid.pagerPreviousPage|The label for the previous page button in Grid pager\"\n pagerPreviousPage=\"Go to the previous page\"\n\n i18n-pagerNextPage=\"kendo.grid.pagerNextPage|The label for the next page button in Grid pager\"\n pagerNextPage=\"Go to the next page\"\n\n i18n-pagerLastPage=\"kendo.grid.pagerLastPage|The label for the last page button in Grid pager\"\n pagerLastPage=\"Go to the last page\"\n\n i18n-pagerPage=\"kendo.grid.pagerPage|The label before the current page number in the Grid pager\"\n pagerPage=\"Page\"\n\n i18n-pagerOf=\"kendo.grid.pagerOf|The label before the total pages number in the Grid pager\"\n pagerOf=\"of\"\n\n i18n-pagerItems=\"kendo.grid.pagerItems|The label after the total pages number in the Grid pager\"\n pagerItems=\"items\"\n\n i18n-pagerPageNumberInputTitle=\"kendo.grid.pagerPageNumberInputTitle|The label for the pager input in the Grid pager\"\n pagerPageNumberInputTitle=\"Page Number\"\n\n i18n-pagerItemsPerPage=\"kendo.grid.pagerItemsPerPage|The label for the page size chooser in the Grid pager\"\n pagerItemsPerPage=\"items per page\"\n\n i18n-filter=\"kendo.grid.filter|The label of the filter cell or icon\"\n filter=\"Filter\"\n\n i18n-filterInputLabel=\"kendo.grid.filterInputLabel|The label of the filter row and menu inputs\"\n filterInputLabel=\"{{ '{columnName} Filter' }}\"\n\n i18n-filterMenuTitle=\"kendo.grid.filterMenuTitle|The title of the filter menu icon\"\n filterMenuTitle=\"{{ '{columnName} Filter Menu' }}\"\n\n i18n-filterMenuOperatorsDropDownLabel=\"kendo.grid.filterMenuOperatorsDropDownLabel|The label of the filter menu operators dropdown\"\n filterMenuOperatorsDropDownLabel=\"{{ '{columnName} Filter Operators' }}\"\n\n i18n-filterMenuLogicDropDownLabel=\"kendo.grid.filterMenuLogicDropDownLabel|The label of the filter menu logic dropdown\"\n filterMenuLogicDropDownLabel=\"{{ '{columnName} Filter Logic' }}\"\n\n i18n-filterEqOperator=\"kendo.grid.filterEqOperator|The text of the equal filter operator\"\n filterEqOperator=\"Is equal to\"\n\n i18n-filterNotEqOperator=\"kendo.grid.filterNotEqOperator|The text of the not equal filter operator\"\n filterNotEqOperator=\"Is not equal to\"\n\n i18n-filterIsNullOperator=\"kendo.grid.filterIsNullOperator|The text of the is null filter operator\"\n filterIsNullOperator=\"Is null\"\n\n i18n-filterIsNotNullOperator=\"kendo.grid.filterIsNotNullOperator|The text of the is not null filter operator\"\n filterIsNotNullOperator=\"Is not null\"\n\n i18n-filterIsEmptyOperator=\"kendo.grid.filterIsEmptyOperator|The text of the is empty filter operator\"\n filterIsEmptyOperator=\"Is empty\"\n\n i18n-filterIsNotEmptyOperator=\"kendo.grid.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n filterIsNotEmptyOperator=\"Is not empty\"\n\n i18n-filterStartsWithOperator=\"kendo.grid.filterStartsWithOperator|The text of the starts with filter operator\"\n filterStartsWithOperator=\"Starts with\"\n\n i18n-filterContainsOperator=\"kendo.grid.filterContainsOperator|The text of the contains filter operator\"\n filterContainsOperator=\"Contains\"\n\n i18n-filterNotContainsOperator=\"kendo.grid.filterNotContainsOperator|The text of the does not contain filter operator\"\n filterNotContainsOperator=\"Does not contain\"\n\n i18n-filterEndsWithOperator=\"kendo.grid.filterEndsWithOperator|The text of the ends with filter operator\"\n filterEndsWithOperator=\"Ends with\"\n\n i18n-filterGteOperator=\"kendo.grid.filterGteOperator|The text of the greater than or equal filter operator\"\n filterGteOperator=\"Is greater than or equal to\"\n\n i18n-filterGtOperator=\"kendo.grid.filterGtOperator|The text of the greater than filter operator\"\n filterGtOperator=\"Is greater than\"\n\n i18n-filterLteOperator=\"kendo.grid.filterLteOperator|The text of the less than or equal filter operator\"\n filterLteOperator=\"Is less than or equal to\"\n\n i18n-filterLtOperator=\"kendo.grid.filterLtOperator|The text of the less than filter operator\"\n filterLtOperator=\"Is less than\"\n\n i18n-filterIsTrue=\"kendo.grid.filterIsTrue|The text of the IsTrue boolean filter option\"\n filterIsTrue=\"Is True\"\n\n i18n-filterIsFalse=\"kendo.grid.filterIsFalse|The text of the IsFalse boolean filter option\"\n filterIsFalse=\"Is False\"\n\n i18n-filterBooleanAll=\"kendo.grid.filterBooleanAll|The text of the (All) boolean filter option\"\n filterBooleanAll=\"(All)\"\n\n i18n-filterAfterOrEqualOperator=\"kendo.grid.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n filterAfterOrEqualOperator=\"Is after or equal to\"\n\n i18n-filterAfterOperator=\"kendo.grid.filterAfterOperator|The text of the after date filter operator\"\n filterAfterOperator=\"Is after\"\n\n i18n-filterBeforeOperator=\"kendo.grid.filterBeforeOperator|The text of the before date filter operator\"\n filterBeforeOperator=\"Is before\"\n\n i18n-filterBeforeOrEqualOperator=\"kendo.grid.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n i18n-filterFilterButton=\"kendo.grid.filterFilterButton|The text of the filter button\"\n filterFilterButton=\"Filter\"\n\n i18n-filterClearButton=\"kendo.grid.filterClearButton|The text of the clear filter button\"\n filterClearButton=\"Clear\"\n\n i18n-filterAndLogic=\"kendo.grid.filterAndLogic|The text of the And filter logic\"\n filterAndLogic=\"And\"\n\n i18n-filterOrLogic=\"kendo.grid.filterOrLogic|The text of the Or filter logic\"\n filterOrLogic=\"Or\"\n\n i18n-loading=\"kendo.grid.loading|The loading text\"\n loading=\"Loading\"\n\n i18n-gridLabel=\"kendo.grid.gridLabel|The Grid aria-label\"\n gridLabel=\"Data table\"\n\n i18n-columnMenu=\"kendo.grid.columnMenu|The title of the column menu icon\"\n columnMenu=\"{{ '{columnName} Column Menu' }}\"\n\n i18n-columns=\"kendo.grid.columns|The text shown in the column menu for the columns item\"\n columns=\"Columns\"\n\n i18n-lock=\"kendo.grid.lock|The text shown in the column menu for the lock item\"\n lock=\"Lock\"\n\n i18n-unlock=\"kendo.grid.unlock|The text shown in the column menu for the unlock item\"\n unlock=\"Unlock\"\n\n i18n-setColumnPosition=\"kendo.grid.setColumnPosition|The text shown in the column menu for the set column position item\"\n setColumnPosition=\"Set Column Position\"\n\n i18n-stick=\"kendo.grid.stick|The text shown in the column menu for the stick item\"\n stick=\"Stick\"\n\n i18n-unstick=\"kendo.grid.unstick|The text shown in the column menu for the unstick item\"\n unstick=\"Unstick\"\n\n i18n-sortable=\"kendo.grid.sortable|The label of the sort icon\"\n sortable=\"Sortable\"\n\n i18n-sortAscending=\"kendo.grid.sortAscending|The text shown in the column menu for the sort ascending item\"\n sortAscending=\"Sort Ascending\"\n\n i18n-sortDescending=\"kendo.grid.sortDescending|The text shown in the column menu for the sort descending item\"\n sortDescending=\"Sort Descending\"\n\n i18n-sortedAscending=\"kendo.grid.sortedAscending|The status announcement when a column is sorted ascending\"\n sortedAscending=\"Sorted Ascending\"\n\n i18n-sortedDescending=\"kendo.grid.sortedDescending|The status announcement when a column is sorted descending\"\n sortedDescending=\"Sorted Descending\"\n\n i18n-sortedDefault=\"kendo.grid.sortedDefault|The status announcement when a column is no longer sorted\"\n sortedDefault=\"Not Sorted\"\n\n i18n-columnsApply=\"kendo.grid.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n columnsApply=\"Apply\"\n\n i18n-columnsReset=\"kendo.grid.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n columnsReset=\"Reset\"\n\n i18n-detailExpand=\"kendo.grid.detailExpand|The title of the expand icon of detail rows.\"\n detailExpand=\"Expand Details\"\n\n i18n-detailCollapse=\"kendo.grid.detailCollapse|The title of the collapse icon of detail rows.\"\n detailCollapse=\"Collapse Details\"\n\n i18n-filterDateToday=\"kendo.grid.filterDateToday|The text of the Today button of the Date filter.\"\n filterDateToday=\"TODAY\"\n\n i18n-filterDateToggle=\"kendo.grid.filterDateToggle|The title of the Toggle button of the Date filter.\"\n filterDateToggle=\"Toggle Calendar\"\n\n i18n-filterNumericDecrement=\"kendo.grid.filterNumericDecrement|The title of the Decrement button of the Numeric filter.\"\n filterNumericDecrement=\"Decrement\"\n\n i18n-filterNumericIncrement=\"kendo.grid.filterNumericIncrement|The title of the Increment button of the Numeric filter.\"\n filterNumericIncrement=\"Increment\"\n\n i18n-selectionCheckboxLabel=\"kendo.grid.selectionCheckboxLabel|The labels of the checkbox column checkboxes.\"\n selectionCheckboxLabel=\"Select Row\"\n\n i18n-selectAllCheckboxLabel=\"kendo.grid.selectAllCheckboxLabel|The label of the checkbox column select all checkbox.\"\n selectAllCheckboxLabel=\"Select All Rows\"\n\n i18n-groupCollapse=\"kendo.grid.groupCollapse|The text of the title and aria-label attributes applied to the collapse icon of group rows.\"\n groupCollapse=\"Collapse Group\"\n\n i18n-groupExpand=\"kendo.grid.groupExpand|The text of the title and aria-label attributes applied to the expand icon of group rows.\"\n groupExpand=\"Expand Group\"\n >\n </ng-container>\n <kendo-grid-toolbar class=\"k-toolbar k-grid-toolbar\" *ngIf=\"showTopToolbar\" position=\"top\"></kendo-grid-toolbar>\n <kendo-pager\n *ngIf=\"showTopPager\"\n [tabindex]=\"navigable ? '0' : '-1'\"\n [attr.role]=\"navigable ? 'navigation' : undefined\"\n class=\"k-grid-pager-top\"\n [template]=\"pagerTemplate\"\n [pageSize]=\"pageSize\"\n [total]=\"view.total\"\n [skip]=\"skip\"\n [options]=\"pageable\"\n (pageChange)=\"notifyPageChange('pager', $event)\">\n </kendo-pager>\n <kendo-grid-group-panel\n *ngIf=\"showGroupPanel\"\n [text]=\"groupableEmptyText\"\n [groups]=\"group\"\n (change)=\"groupChange.emit($event)\">\n </kendo-grid-group-panel>\n <div #ariaRoot\n class=\"k-grid-aria-root\"\n role=\"grid\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-rowcount]=\"ariaRowCount\"\n [attr.aria-colcount]=\"ariaColCount\">\n <ng-template [ngIf]=\"isScrollable\">\n <div *ngIf=\"!hideHeader\"\n class=\"k-grid-header\"\n role=\"presentation\"\n [style.padding]=\"headerPadding\">\n <div *ngIf=\"isLocked\"\n #lockedHeader\n role=\"presentation\"\n class=\"k-grid-header-locked\"\n [style.width.px]=\"lockedWidth\">\n <table [locked]=\"true\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [columns]=\"lockedLeafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n [resizable]=\"resizable\"\n [scrollable]=\"true\"\n [columns]=\"lockedColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [sort]=\"sort\"\n [groups]=\"group\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [sortable]=\"sortable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n </table>\n </div><div #header class=\"k-grid-header-wrap\" role=\"presentation\" data-scrollable\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + scrollbarWidth + 2\">\n <table role=\"presentation\" [style.width.px]=\"nonLockedWidth\" [virtualColumns]=\"virtualColumns\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [columns]=\"headerLeafColumns\"\n [groups]=\"isLocked ? [] : group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n [resizable]=\"resizable\"\n role=\"presentation\"\n [scrollable]=\"true\"\n [columns]=\"headerColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [sort]=\"sort\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [groups]=\"isLocked ? [] : group\"\n [sortable]=\"sortable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n </table>\n <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n <div [style.width.px]=\"columnsContainer.unlockedWidth\"></div>\n </div>\n </div>\n </div>\n <kendo-grid-list\n [data]=\"view\"\n [rowHeight]=\"rowHeight\"\n [detailRowHeight]=\"detailRowHeight\"\n [total]=\"totalCount\"\n [take]=\"pageSize\"\n [groups]=\"group\"\n [groupable]=\"groupable\"\n [skip]=\"skip\"\n [trackBy]=\"trackBy\"\n [columns]=\"columnsContainer\"\n [selectable]=\"selectable\"\n [filterable]=\"filterable\"\n [detailTemplate]=\"detailTemplate\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n (pageChange)=\"notifyPageChange('list', $event)\"\n [rowClass]=\"rowClass\"\n [rowSticky]=\"rowSticky\"\n [loading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [cellLoadingTemplate]=\"cellLoadingTemplate?.templateRef\"\n [loadingTemplate]=\"loadingTemplate?.templateRef\"\n [virtualColumns]=\"virtualColumns\"\n (scrollBottom)=\"notifyScrollBottom()\"\n (contentScroll)=\"contentScroll.emit($event)\"\n kendoDraggable\n kendoGridSelectionMarquee\n [enableDrag]=\"marqueeSelection\"\n >\n </kendo-grid-list>\n <div\n *ngIf=\"showFooter\"\n class=\"k-grid-footer\"\n [style.padding]=\"headerPadding\">\n <div\n *ngIf=\"lockedLeafColumns.length\"\n class=\"k-grid-footer-locked\"\n [style.width.px]=\"lockedWidth\">\n <table role=\"presentation\" [locked]=\"true\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n [columns]=\"lockedLeafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tfoot kendoGridFooter\n [scrollable]=\"true\"\n [groups]=\"group\"\n [columns]=\"lockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\"\n [logicalRowIndex]=\"ariaRowCount\">\n </tfoot>\n </table>\n </div><div #footer\n class=\"k-grid-footer-wrap\" data-scrollable\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + scrollbarWidth + 3\">\n <table role=\"presentation\" [style.width.px]=\"nonLockedWidth\">\n <colgroup kendoGridColGroup\n [columns]=\"nonLockedLeafColumns\"\n [groups]=\"isLocked ? [] : group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tfoot kendoGridFooter\n [logicalRowIndex]=\"ariaRowCount\"\n [scrollable]=\"true\"\n [groups]=\"isLocked ? [] : group\"\n [columns]=\"nonLockedLeafColumns\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [detailTemplate]=\"detailTemplate\">\n </tfoot>\n </table>\n </div>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"!isScrollable\">\n <table [style.table-layout]=\"resizable ? 'fixed' : null\">\n <colgroup kendoGridColGroup\n [columns]=\"leafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n *ngIf=\"!hideHeader\"\n [resizable]=\"resizable\"\n [scrollable]=\"false\"\n [columns]=\"visibleColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [groups]=\"group\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [sort]=\"sort\"\n [sortable]=\"sortable\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n <tbody kendoGridTableBody\n [isLoading]=\"loading\"\n [groups]=\"group\"\n [data]=\"view\"\n [skip]=\"skip\"\n [columns]=\"leafColumns\"\n [selectable]=\"selectable\"\n [filterable]=\"filterable\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n [detailTemplate]=\"detailTemplate\"\n [showGroupFooters]=\"showGroupFooters\"\n [trackBy]=\"trackBy\"\n [rowClass]=\"rowClass\"\n kendoDraggable\n kendoGridSelectionMarquee\n [enableDrag]=\"marqueeSelection\">\n </tbody>\n <tfoot kendoGridFooter\n *ngIf=\"showFooter\"\n [scrollable]=\"false\"\n [logicalRowIndex]=\"ariaRowCount\"\n [groups]=\"group\"\n [columns]=\"leafColumns\"\n [detailTemplate]=\"detailTemplate\">\n </tfoot>\n </table>\n <div [loadingTemplate]=\"loadingTemplate\" *ngIf=\"loading\" kendoGridLoading>\n </div>\n </ng-template>\n </div>\n <kendo-pager\n *ngIf=\"showBottomPager\"\n [tabindex]=\"navigable ? '0' : '-1'\"\n [attr.role]=\"navigable ? 'navigation' : undefined\"\n [template]=\"pagerTemplate\"\n [pageSize]=\"pageSize\"\n [total]=\"view.total\"\n [skip]=\"skip\"\n [options]=\"pageable\"\n (pageChange)=\"notifyPageChange('pager', $event)\">\n </kendo-pager>\n <kendo-grid-toolbar class=\"k-toolbar k-grid-toolbar k-grid-toolbar-bottom\" *ngIf=\"showBottomToolbar\" position=\"bottom\"></kendo-grid-toolbar>\n "
2701
+ template: "\n <ng-container kendoGridLocalizedMessages\n i18n-groupPanelEmpty=\"kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty\"\n groupPanelEmpty=\"Drag a column header and drop it here to group by that column\"\n\n i18n-noRecords=\"kendo.grid.noRecords|The label visible in the Grid when there are no records\"\n noRecords=\"No records available.\"\n\n i18n-pagerLabel=\"kendo.grid.pagerLabel|The label for the Grid pager\"\n pagerLabel=\"{{ 'Page navigation, page {currentPage} of {totalPages}' }}\"\n\n i18n-pagerFirstPage=\"kendo.grid.pagerFirstPage|The label for the first page button in Grid pager\"\n pagerFirstPage=\"Go to the first page\"\n\n i18n-pagerPreviousPage=\"kendo.grid.pagerPreviousPage|The label for the previous page button in Grid pager\"\n pagerPreviousPage=\"Go to the previous page\"\n\n i18n-pagerNextPage=\"kendo.grid.pagerNextPage|The label for the next page button in Grid pager\"\n pagerNextPage=\"Go to the next page\"\n\n i18n-pagerLastPage=\"kendo.grid.pagerLastPage|The label for the last page button in Grid pager\"\n pagerLastPage=\"Go to the last page\"\n\n i18n-pagerPage=\"kendo.grid.pagerPage|The label before the current page number in the Grid pager\"\n pagerPage=\"Page\"\n\n i18n-pagerOf=\"kendo.grid.pagerOf|The label before the total pages number in the Grid pager\"\n pagerOf=\"of\"\n\n i18n-pagerItems=\"kendo.grid.pagerItems|The label after the total pages number in the Grid pager\"\n pagerItems=\"items\"\n\n i18n-pagerPageNumberInputTitle=\"kendo.grid.pagerPageNumberInputTitle|The label for the pager input in the Grid pager\"\n pagerPageNumberInputTitle=\"Page Number\"\n\n i18n-pagerItemsPerPage=\"kendo.grid.pagerItemsPerPage|The label for the page size chooser in the Grid pager\"\n pagerItemsPerPage=\"items per page\"\n\n i18n-filter=\"kendo.grid.filter|The label of the filter cell or icon\"\n filter=\"Filter\"\n\n i18n-filterInputLabel=\"kendo.grid.filterInputLabel|The label of the filter row and menu inputs\"\n filterInputLabel=\"{{ '{columnName} Filter' }}\"\n\n i18n-filterMenuTitle=\"kendo.grid.filterMenuTitle|The title of the filter menu icon\"\n filterMenuTitle=\"{{ '{columnName} Filter Menu' }}\"\n\n i18n-filterMenuOperatorsDropDownLabel=\"kendo.grid.filterMenuOperatorsDropDownLabel|The label of the filter menu operators dropdown\"\n filterMenuOperatorsDropDownLabel=\"{{ '{columnName} Filter Operators' }}\"\n\n i18n-filterMenuLogicDropDownLabel=\"kendo.grid.filterMenuLogicDropDownLabel|The label of the filter menu logic dropdown\"\n filterMenuLogicDropDownLabel=\"{{ '{columnName} Filter Logic' }}\"\n\n i18n-filterEqOperator=\"kendo.grid.filterEqOperator|The text of the equal filter operator\"\n filterEqOperator=\"Is equal to\"\n\n i18n-filterNotEqOperator=\"kendo.grid.filterNotEqOperator|The text of the not equal filter operator\"\n filterNotEqOperator=\"Is not equal to\"\n\n i18n-filterIsNullOperator=\"kendo.grid.filterIsNullOperator|The text of the is null filter operator\"\n filterIsNullOperator=\"Is null\"\n\n i18n-filterIsNotNullOperator=\"kendo.grid.filterIsNotNullOperator|The text of the is not null filter operator\"\n filterIsNotNullOperator=\"Is not null\"\n\n i18n-filterIsEmptyOperator=\"kendo.grid.filterIsEmptyOperator|The text of the is empty filter operator\"\n filterIsEmptyOperator=\"Is empty\"\n\n i18n-filterIsNotEmptyOperator=\"kendo.grid.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n filterIsNotEmptyOperator=\"Is not empty\"\n\n i18n-filterStartsWithOperator=\"kendo.grid.filterStartsWithOperator|The text of the starts with filter operator\"\n filterStartsWithOperator=\"Starts with\"\n\n i18n-filterContainsOperator=\"kendo.grid.filterContainsOperator|The text of the contains filter operator\"\n filterContainsOperator=\"Contains\"\n\n i18n-filterNotContainsOperator=\"kendo.grid.filterNotContainsOperator|The text of the does not contain filter operator\"\n filterNotContainsOperator=\"Does not contain\"\n\n i18n-filterEndsWithOperator=\"kendo.grid.filterEndsWithOperator|The text of the ends with filter operator\"\n filterEndsWithOperator=\"Ends with\"\n\n i18n-filterGteOperator=\"kendo.grid.filterGteOperator|The text of the greater than or equal filter operator\"\n filterGteOperator=\"Is greater than or equal to\"\n\n i18n-filterGtOperator=\"kendo.grid.filterGtOperator|The text of the greater than filter operator\"\n filterGtOperator=\"Is greater than\"\n\n i18n-filterLteOperator=\"kendo.grid.filterLteOperator|The text of the less than or equal filter operator\"\n filterLteOperator=\"Is less than or equal to\"\n\n i18n-filterLtOperator=\"kendo.grid.filterLtOperator|The text of the less than filter operator\"\n filterLtOperator=\"Is less than\"\n\n i18n-filterIsTrue=\"kendo.grid.filterIsTrue|The text of the IsTrue boolean filter option\"\n filterIsTrue=\"Is True\"\n\n i18n-filterIsFalse=\"kendo.grid.filterIsFalse|The text of the IsFalse boolean filter option\"\n filterIsFalse=\"Is False\"\n\n i18n-filterBooleanAll=\"kendo.grid.filterBooleanAll|The text of the (All) boolean filter option\"\n filterBooleanAll=\"(All)\"\n\n i18n-filterAfterOrEqualOperator=\"kendo.grid.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n filterAfterOrEqualOperator=\"Is after or equal to\"\n\n i18n-filterAfterOperator=\"kendo.grid.filterAfterOperator|The text of the after date filter operator\"\n filterAfterOperator=\"Is after\"\n\n i18n-filterBeforeOperator=\"kendo.grid.filterBeforeOperator|The text of the before date filter operator\"\n filterBeforeOperator=\"Is before\"\n\n i18n-filterBeforeOrEqualOperator=\"kendo.grid.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n i18n-filterFilterButton=\"kendo.grid.filterFilterButton|The text of the filter button\"\n filterFilterButton=\"Filter\"\n\n i18n-filterClearButton=\"kendo.grid.filterClearButton|The text of the clear filter button\"\n filterClearButton=\"Clear\"\n\n i18n-filterAndLogic=\"kendo.grid.filterAndLogic|The text of the And filter logic\"\n filterAndLogic=\"And\"\n\n i18n-filterOrLogic=\"kendo.grid.filterOrLogic|The text of the Or filter logic\"\n filterOrLogic=\"Or\"\n\n i18n-loading=\"kendo.grid.loading|The loading text\"\n loading=\"Loading\"\n\n i18n-gridLabel=\"kendo.grid.gridLabel|The Grid aria-label\"\n gridLabel=\"Data table\"\n\n i18n-columnMenu=\"kendo.grid.columnMenu|The title of the column menu icon\"\n columnMenu=\"{{ '{columnName} Column Menu' }}\"\n\n i18n-columns=\"kendo.grid.columns|The text shown in the column menu for the columns item\"\n columns=\"Columns\"\n\n i18n-lock=\"kendo.grid.lock|The text shown in the column menu for the lock item\"\n lock=\"Lock\"\n\n i18n-unlock=\"kendo.grid.unlock|The text shown in the column menu for the unlock item\"\n unlock=\"Unlock\"\n\n i18n-setColumnPosition=\"kendo.grid.setColumnPosition|The text shown in the column menu for the set column position item\"\n setColumnPosition=\"Set Column Position\"\n\n i18n-stick=\"kendo.grid.stick|The text shown in the column menu for the stick item\"\n stick=\"Stick\"\n\n i18n-unstick=\"kendo.grid.unstick|The text shown in the column menu for the unstick item\"\n unstick=\"Unstick\"\n\n i18n-sortable=\"kendo.grid.sortable|The label of the sort icon\"\n sortable=\"Sortable\"\n\n i18n-sortAscending=\"kendo.grid.sortAscending|The text shown in the column menu for the sort ascending item\"\n sortAscending=\"Sort Ascending\"\n\n i18n-sortDescending=\"kendo.grid.sortDescending|The text shown in the column menu for the sort descending item\"\n sortDescending=\"Sort Descending\"\n\n i18n-sortedAscending=\"kendo.grid.sortedAscending|The status announcement when a column is sorted ascending\"\n sortedAscending=\"Sorted Ascending\"\n\n i18n-sortedDescending=\"kendo.grid.sortedDescending|The status announcement when a column is sorted descending\"\n sortedDescending=\"Sorted Descending\"\n\n i18n-sortedDefault=\"kendo.grid.sortedDefault|The status announcement when a column is no longer sorted\"\n sortedDefault=\"Not Sorted\"\n\n i18n-columnsApply=\"kendo.grid.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n columnsApply=\"Apply\"\n\n i18n-columnsReset=\"kendo.grid.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n columnsReset=\"Reset\"\n\n i18n-detailExpand=\"kendo.grid.detailExpand|The title of the expand icon of detail rows.\"\n detailExpand=\"Expand Details\"\n\n i18n-detailCollapse=\"kendo.grid.detailCollapse|The title of the collapse icon of detail rows.\"\n detailCollapse=\"Collapse Details\"\n\n i18n-filterDateToday=\"kendo.grid.filterDateToday|The text of the Today button of the Date filter.\"\n filterDateToday=\"TODAY\"\n\n i18n-filterDateToggle=\"kendo.grid.filterDateToggle|The title of the Toggle button of the Date filter.\"\n filterDateToggle=\"Toggle Calendar\"\n\n i18n-filterNumericDecrement=\"kendo.grid.filterNumericDecrement|The title of the Decrement button of the Numeric filter.\"\n filterNumericDecrement=\"Decrement\"\n\n i18n-filterNumericIncrement=\"kendo.grid.filterNumericIncrement|The title of the Increment button of the Numeric filter.\"\n filterNumericIncrement=\"Increment\"\n\n i18n-selectionCheckboxLabel=\"kendo.grid.selectionCheckboxLabel|The labels of the checkbox column checkboxes.\"\n selectionCheckboxLabel=\"Select Row\"\n\n i18n-selectAllCheckboxLabel=\"kendo.grid.selectAllCheckboxLabel|The label of the checkbox column select all checkbox.\"\n selectAllCheckboxLabel=\"Select All Rows\"\n\n i18n-groupCollapse=\"kendo.grid.groupCollapse|The text of the title and aria-label attributes applied to the collapse icon of group rows.\"\n groupCollapse=\"Collapse Group\"\n\n i18n-groupExpand=\"kendo.grid.groupExpand|The text of the title and aria-label attributes applied to the expand icon of group rows.\"\n groupExpand=\"Expand Group\"\n >\n </ng-container>\n <kendo-grid-toolbar class=\"k-toolbar k-grid-toolbar\" *ngIf=\"showTopToolbar\" position=\"top\"></kendo-grid-toolbar>\n <kendo-pager\n *ngIf=\"showTopPager\"\n [tabindex]=\"navigable ? '0' : '-1'\"\n [attr.role]=\"navigable ? 'navigation' : undefined\"\n class=\"k-grid-pager-top\"\n [template]=\"pagerTemplate\"\n [pageSize]=\"pageSize\"\n [total]=\"view.total\"\n [skip]=\"skip\"\n [options]=\"pageable\"\n (pageChange)=\"notifyPageChange('pager', $event)\">\n </kendo-pager>\n <kendo-grid-group-panel\n *ngIf=\"showGroupPanel\"\n [text]=\"groupableEmptyText\"\n [groups]=\"group\"\n (change)=\"groupChange.emit($event)\">\n </kendo-grid-group-panel>\n <div #ariaRoot\n class=\"k-grid-aria-root\"\n role=\"grid\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-rowcount]=\"ariaRowCount\"\n [attr.aria-colcount]=\"ariaColCount\">\n <ng-template [ngIf]=\"isScrollable\">\n <div *ngIf=\"!hideHeader\"\n class=\"k-grid-header\"\n role=\"presentation\"\n [style.padding]=\"headerPadding\">\n <div *ngIf=\"isLocked\"\n #lockedHeader\n role=\"presentation\"\n class=\"k-grid-header-locked\"\n [style.width.px]=\"lockedWidth\">\n <table [locked]=\"true\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [columns]=\"lockedLeafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n [resizable]=\"resizable\"\n [scrollable]=\"true\"\n [columns]=\"lockedColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [sort]=\"sort\"\n [groups]=\"group\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [sortable]=\"sortable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n </table>\n </div><div #header class=\"k-grid-header-wrap\" role=\"presentation\" data-scrollable\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + scrollbarWidth + 2\">\n <table role=\"presentation\" [style.width.px]=\"nonLockedWidth\" [virtualColumns]=\"virtualColumns\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [columns]=\"headerLeafColumns\"\n [groups]=\"isLocked ? [] : group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n [resizable]=\"resizable\"\n role=\"presentation\"\n [scrollable]=\"true\"\n [columns]=\"headerColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [sort]=\"sort\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [groups]=\"isLocked ? [] : group\"\n [sortable]=\"sortable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n </table>\n <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n <div [style.width.px]=\"columnsContainer.unlockedWidth\"></div>\n </div>\n </div>\n </div>\n <kendo-grid-list\n [data]=\"view\"\n [rowHeight]=\"rowHeight\"\n [detailRowHeight]=\"detailRowHeight\"\n [total]=\"totalCount\"\n [take]=\"pageSize\"\n [groups]=\"group\"\n [groupable]=\"groupable\"\n [skip]=\"skip\"\n [trackBy]=\"trackBy\"\n [columns]=\"columnsContainer\"\n [selectable]=\"selectable\"\n [filterable]=\"filterable\"\n [detailTemplate]=\"detailTemplate\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n (pageChange)=\"notifyPageChange('list', $event)\"\n [rowClass]=\"rowClass\"\n [rowSticky]=\"rowSticky\"\n [loading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [cellLoadingTemplate]=\"cellLoadingTemplate?.templateRef\"\n [loadingTemplate]=\"loadingTemplate?.templateRef\"\n [virtualColumns]=\"virtualColumns\"\n (scrollBottom)=\"notifyScrollBottom()\"\n (contentScroll)=\"contentScroll.emit($event)\"\n kendoDraggable\n kendoGridSelectionMarquee\n [enableDrag]=\"marqueeSelection\"\n >\n </kendo-grid-list>\n <div\n *ngIf=\"showFooter\"\n class=\"k-grid-footer\"\n [style.padding]=\"headerPadding\">\n <div\n *ngIf=\"lockedLeafColumns.length\"\n class=\"k-grid-footer-locked\"\n [style.width.px]=\"lockedWidth\">\n <table role=\"presentation\" [locked]=\"true\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n [columns]=\"lockedLeafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tfoot kendoGridFooter\n [scrollable]=\"true\"\n [groups]=\"group\"\n [columns]=\"lockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\"\n [logicalRowIndex]=\"ariaRowCount\">\n </tfoot>\n </table>\n </div><div #footer\n class=\"k-grid-footer-wrap\" data-scrollable\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + scrollbarWidth + 3\">\n <table role=\"presentation\" [style.width.px]=\"nonLockedWidth\">\n <colgroup kendoGridColGroup\n [columns]=\"nonLockedLeafColumns\"\n [groups]=\"isLocked ? [] : group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tfoot kendoGridFooter\n [logicalRowIndex]=\"ariaRowCount\"\n [scrollable]=\"true\"\n [groups]=\"isLocked ? [] : group\"\n [columns]=\"nonLockedLeafColumns\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [detailTemplate]=\"detailTemplate\">\n </tfoot>\n </table>\n </div>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"!isScrollable\">\n <table [style.table-layout]=\"resizable ? 'fixed' : null\">\n <colgroup kendoGridColGroup\n [columns]=\"leafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n *ngIf=\"!hideHeader\"\n [resizable]=\"resizable\"\n [scrollable]=\"false\"\n [columns]=\"visibleColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [groups]=\"group\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [sort]=\"sort\"\n [sortable]=\"sortable\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n <tbody kendoGridTableBody\n [isLoading]=\"loading\"\n [groups]=\"group\"\n [data]=\"view\"\n [skip]=\"skip\"\n [columns]=\"leafColumns\"\n [selectable]=\"selectable\"\n [filterable]=\"filterable\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n [detailTemplate]=\"detailTemplate\"\n [showGroupFooters]=\"showGroupFooters\"\n [trackBy]=\"trackBy\"\n [rowClass]=\"rowClass\"\n kendoDraggable\n kendoGridSelectionMarquee\n [enableDrag]=\"marqueeSelection\">\n </tbody>\n <tfoot kendoGridFooter\n *ngIf=\"showFooter\"\n [scrollable]=\"false\"\n [logicalRowIndex]=\"ariaRowCount\"\n [groups]=\"group\"\n [columns]=\"leafColumns\"\n [detailTemplate]=\"detailTemplate\">\n </tfoot>\n </table>\n </ng-template>\n <div [loadingTemplate]=\"loadingTemplate\" *ngIf=\"loading\" kendoGridLoading>\n </div>\n </div>\n <kendo-pager\n *ngIf=\"showBottomPager\"\n [tabindex]=\"navigable ? '0' : '-1'\"\n [attr.role]=\"navigable ? 'navigation' : undefined\"\n [template]=\"pagerTemplate\"\n [pageSize]=\"pageSize\"\n [total]=\"view.total\"\n [skip]=\"skip\"\n [options]=\"pageable\"\n (pageChange)=\"notifyPageChange('pager', $event)\">\n </kendo-pager>\n <kendo-grid-toolbar class=\"k-toolbar k-grid-toolbar k-grid-toolbar-bottom\" *ngIf=\"showBottomToolbar\" position=\"bottom\"></kendo-grid-toolbar>\n "
2702
2702
  }),
2703
2703
  tslib_1.__metadata("design:paramtypes", [BrowserSupportService,
2704
2704
  SelectionService,
@@ -9,7 +9,7 @@ export var packageMetadata = {
9
9
  name: '@progress/kendo-angular-grid',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1646819780,
12
+ publishDate: 1647854683,
13
13
  version: '',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
15
15
  };
@@ -772,7 +772,7 @@ var ListComponent = /** @class */ (function () {
772
772
  }
773
773
  ],
774
774
  selector: 'kendo-grid-list',
775
- template: "\n <div #lockedContainer class=\"k-grid-content-locked\" role=\"presentation\"\n *ngIf=\"isLocked\" [style.width.px]=\"lockedWidth\" tabindex=\"-1\"\n [kendoEventsOutsideAngular]=\"{\n keydown: lockedKeydown,\n scroll: lockedScroll,\n mousewheel: lockedMousewheel,\n DOMMouseScroll: lockedMousewheel\n }\"\n [scope]=\"this\"\n >\n <div role=\"presentation\" class=\"k-grid-table-wrap\">\n <table [locked]=\"true\" #lockedTable class=\"k-grid-table\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [groups]=\"groups\"\n [columns]=\"lockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tbody kendoGridTableBody\n role=\"presentation\"\n [groups]=\"groups\"\n [isLocked]=\"true\"\n [data]=\"data\"\n [noRecordsText]=\"''\"\n [columns]=\"lockedLeafColumns\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [showGroupFooters]=\"showFooter\"\n [skip]=\"skip\"\n [selectable]=\"selectable\"\n [trackBy]=\"trackBy\"\n [filterable]=\"filterable\"\n [rowClass]=\"rowClass\"\n [isLoading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [cellLoadingTemplate]=\"cellLoadingTemplate\">\n </tbody>\n </table>\n <kendo-resize-sensor></kendo-resize-sensor>\n </div>\n <div class=\"k-height-container\" role=\"presentation\">\n <div [style.height.px]=\"totalHeight\"></div>\n </div>\n </div><div #container\n class=\"k-grid-content k-virtual-content\"\n role=\"presentation\" tabindex=\"-1\"\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + 1\">\n <div role=\"presentation\" class=\"k-grid-table-wrap\">\n <table [style.width.px]=\"nonLockedWidth\" #table [virtualColumns]=\"virtualColumns\"\n class=\"k-grid-table\" role=\"presentation\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [groups]=\"isLocked ? [] : groups\"\n [columns]=\"nonLockedColumnsToRender\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tbody kendoGridTableBody\n role=\"presentation\"\n [skipGroupDecoration]=\"isLocked\"\n [data]=\"data\"\n [groups]=\"groups\"\n [showGroupFooters]=\"showFooter\"\n [columns]=\"nonLockedColumnsToRender\"\n [allColumns]=\"nonLockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [totalColumnsCount]=\"leafColumns.length\"\n [skip]=\"skip\"\n [selectable]=\"selectable\"\n [trackBy]=\"trackBy\"\n [filterable]=\"filterable\"\n [rowClass]=\"rowClass\"\n [rowSticky]=\"rowSticky\"\n [virtualColumns]=\"virtualColumns\"\n [isLoading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [cellLoadingTemplate]=\"cellLoadingTemplate\">\n </tbody>\n </table>\n <kendo-resize-sensor *ngIf=\"isLocked\"></kendo-resize-sensor>\n </div>\n <kendo-resize-sensor *ngIf=\"isLocked || virtualColumns\"></kendo-resize-sensor>\n <div class=\"k-height-container\" role=\"presentation\">\n <div [style.height.px]=\"totalHeight\"></div>\n </div>\n <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n <div [style.width.px]=\"totalWidth\"></div>\n </div>\n </div>\n <div [loadingTemplate]=\"loadingTemplate\" *ngIf=\"loading\" kendoGridLoading>\n </div>\n "
775
+ template: "\n <div #lockedContainer class=\"k-grid-content-locked\" role=\"presentation\"\n *ngIf=\"isLocked\" [style.width.px]=\"lockedWidth\" tabindex=\"-1\"\n [kendoEventsOutsideAngular]=\"{\n keydown: lockedKeydown,\n scroll: lockedScroll,\n mousewheel: lockedMousewheel,\n DOMMouseScroll: lockedMousewheel\n }\"\n [scope]=\"this\"\n >\n <div role=\"presentation\" class=\"k-grid-table-wrap\">\n <table [locked]=\"true\" #lockedTable class=\"k-grid-table\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [groups]=\"groups\"\n [columns]=\"lockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tbody kendoGridTableBody\n role=\"presentation\"\n [groups]=\"groups\"\n [isLocked]=\"true\"\n [data]=\"data\"\n [noRecordsText]=\"''\"\n [columns]=\"lockedLeafColumns\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [showGroupFooters]=\"showFooter\"\n [skip]=\"skip\"\n [selectable]=\"selectable\"\n [trackBy]=\"trackBy\"\n [filterable]=\"filterable\"\n [rowClass]=\"rowClass\"\n [isLoading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [cellLoadingTemplate]=\"cellLoadingTemplate\">\n </tbody>\n </table>\n <kendo-resize-sensor></kendo-resize-sensor>\n </div>\n <div class=\"k-height-container\" role=\"presentation\">\n <div [style.height.px]=\"totalHeight\"></div>\n </div>\n </div><div #container\n class=\"k-grid-content k-virtual-content\"\n role=\"presentation\" tabindex=\"-1\"\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + 1\">\n <div role=\"presentation\" class=\"k-grid-table-wrap\">\n <table [style.width.px]=\"nonLockedWidth\" #table [virtualColumns]=\"virtualColumns\"\n class=\"k-grid-table\" role=\"presentation\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [groups]=\"isLocked ? [] : groups\"\n [columns]=\"nonLockedColumnsToRender\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tbody kendoGridTableBody\n role=\"presentation\"\n [skipGroupDecoration]=\"isLocked\"\n [data]=\"data\"\n [groups]=\"groups\"\n [showGroupFooters]=\"showFooter\"\n [columns]=\"nonLockedColumnsToRender\"\n [allColumns]=\"nonLockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [totalColumnsCount]=\"leafColumns.length\"\n [skip]=\"skip\"\n [selectable]=\"selectable\"\n [trackBy]=\"trackBy\"\n [filterable]=\"filterable\"\n [rowClass]=\"rowClass\"\n [rowSticky]=\"rowSticky\"\n [virtualColumns]=\"virtualColumns\"\n [isLoading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [cellLoadingTemplate]=\"cellLoadingTemplate\">\n </tbody>\n </table>\n <kendo-resize-sensor *ngIf=\"isLocked\"></kendo-resize-sensor>\n </div>\n <kendo-resize-sensor *ngIf=\"isLocked || virtualColumns\"></kendo-resize-sensor>\n <div class=\"k-height-container\" role=\"presentation\">\n <div [style.height.px]=\"totalHeight\"></div>\n </div>\n <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n <div [style.width.px]=\"totalWidth\"></div>\n </div>\n </div>\n "
776
776
  }),
777
777
  tslib_1.__param(0, Inject(SCROLLER_FACTORY_TOKEN)),
778
778
  tslib_1.__metadata("design:paramtypes", [Object, DetailsService,
@@ -7,6 +7,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
7
7
  import { ColumnBase } from '../columns/column-base';
8
8
  import { DraggableDirective } from '@progress/kendo-angular-common';
9
9
  import { ColumnResizingService } from './column-resizing.service';
10
+ import { ColumnInfoService } from '../common/column-info.service';
10
11
  /**
11
12
  * @hidden
12
13
  */
@@ -17,6 +18,7 @@ export declare class ColumnHandleDirective implements OnInit, OnDestroy {
17
18
  private zone;
18
19
  private cdr;
19
20
  private localization;
21
+ private columnInfoService;
20
22
  columns: Array<ColumnBase>;
21
23
  column: ColumnBase;
22
24
  readonly visible: string;
@@ -25,7 +27,7 @@ export declare class ColumnHandleDirective implements OnInit, OnDestroy {
25
27
  private subscriptions;
26
28
  private rtl;
27
29
  autoFit(): void;
28
- constructor(draggable: DraggableDirective, element: ElementRef, service: ColumnResizingService, zone: NgZone, cdr: ChangeDetectorRef, localization: LocalizationService);
30
+ constructor(draggable: DraggableDirective, element: ElementRef, service: ColumnResizingService, zone: NgZone, cdr: ChangeDetectorRef, localization: LocalizationService, columnInfoService: ColumnInfoService);
29
31
  ngOnInit(): void;
30
32
  ngOnDestroy(): void;
31
33
  private shouldUpdate;
@@ -12,6 +12,7 @@ import { expandColumns, leafColumns, columnsToRender } from '../columns/column-c
12
12
  import { DraggableDirective } from '@progress/kendo-angular-common';
13
13
  import { ColumnResizingService } from './column-resizing.service';
14
14
  import { delay, takeUntil, filter, take, tap, switchMap, map } from 'rxjs/operators';
15
+ import { ColumnInfoService } from '../common/column-info.service';
15
16
  // TODO
16
17
  // tslint:disable:rxjs-no-unsafe-takeuntil
17
18
  /**
@@ -93,13 +94,14 @@ const ɵ8 = indexOf;
93
94
  * @hidden
94
95
  */
95
96
  let ColumnHandleDirective = class ColumnHandleDirective {
96
- constructor(draggable, element, service, zone, cdr, localization) {
97
+ constructor(draggable, element, service, zone, cdr, localization, columnInfoService) {
97
98
  this.draggable = draggable;
98
99
  this.element = element;
99
100
  this.service = service;
100
101
  this.zone = zone;
101
102
  this.cdr = cdr;
102
103
  this.localization = localization;
104
+ this.columnInfoService = columnInfoService;
103
105
  this.columns = [];
104
106
  this.subscriptions = new Subscription();
105
107
  this.rtl = false;
@@ -133,6 +135,9 @@ let ColumnHandleDirective = class ColumnHandleDirective {
133
135
  this.service.measureColumns(columnInfo);
134
136
  }
135
137
  ngOnInit() {
138
+ if (isBlank(this.column.width)) {
139
+ this.column.implicitWidth = headerWidth(this.element);
140
+ }
136
141
  const service = this.service.changes.pipe(filter(() => this.column.resizable), filter(e => isPresent(e.columns.find(column => column === this.column))));
137
142
  this.subscriptions.add(service.pipe(filter(e => e.type === 'start'))
138
143
  .subscribe(this.initState.bind(this)));
@@ -192,6 +197,13 @@ let ColumnHandleDirective = class ColumnHandleDirective {
192
197
  }
193
198
  updateWidth(column, width) {
194
199
  column.width = width;
200
+ this.columnInfoService.hiddenColumns.forEach((col) => {
201
+ if (isBlank(col.width) && isPresent(col.implicitWidth)) {
202
+ // Resize hidden columns to their implicit width so they
203
+ // can be displayed with the same width if made visible.
204
+ col.width = col.implicitWidth;
205
+ }
206
+ });
195
207
  this.cdr.markForCheck(); //force CD cycle
196
208
  }
197
209
  columnsForLevel(level) {
@@ -237,7 +249,8 @@ ColumnHandleDirective = tslib_1.__decorate([
237
249
  ColumnResizingService,
238
250
  NgZone,
239
251
  ChangeDetectorRef,
240
- LocalizationService])
252
+ LocalizationService,
253
+ ColumnInfoService])
241
254
  ], ColumnHandleDirective);
242
255
  export { ColumnHandleDirective };
243
256
  export { ɵ0, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8 };
@@ -563,6 +563,10 @@ export declare class ColumnBase {
563
563
  * @hidden
564
564
  */
565
565
  idService: IdService;
566
+ /**
567
+ * @hidden
568
+ */
569
+ implicitWidth: number;
566
570
  /**
567
571
  * @hidden
568
572
  */
@@ -21,6 +21,7 @@ export declare class ColumnInfoService {
21
21
  readonly nonLockedLeafColumns: QueryList<ColumnBase>;
22
22
  readonly isLocked: boolean;
23
23
  readonly totalLevels: number;
24
+ readonly hiddenColumns: ColumnBase[];
24
25
  readonly leafNamedColumns: ColumnBase[];
25
26
  readonly unlockedRootCount: number;
26
27
  stickyColumnsStyles(column: ColumnBase): {
@@ -34,6 +34,12 @@ let ColumnInfoService = class ColumnInfoService {
34
34
  get totalLevels() {
35
35
  return this.columnsContainer.totalLevels;
36
36
  }
37
+ get hiddenColumns() {
38
+ if (!this.list) {
39
+ return [];
40
+ }
41
+ return this.list().filter(column => !column.isVisible);
42
+ }
37
43
  get leafNamedColumns() {
38
44
  const columns = expandColumns(this.list().filterSort(column => !column.isColumnGroup))
39
45
  .filter(column => column.matchesMedia && column.displayTitle);
@@ -2865,9 +2865,9 @@ GridComponent = tslib_1.__decorate([
2865
2865
  [detailTemplate]="detailTemplate">
2866
2866
  </tfoot>
2867
2867
  </table>
2868
- <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading>
2869
- </div>
2870
2868
  </ng-template>
2869
+ <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading>
2870
+ </div>
2871
2871
  </div>
2872
2872
  <kendo-pager
2873
2873
  *ngIf="showBottomPager"