@progress/kendo-angular-grid 18.1.0-develop.30 → 18.1.0-develop.4
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.
- package/column-resizing/column-handle.directive.d.ts +0 -13
- package/column-resizing/column-resizing.service.d.ts +1 -5
- package/columns/column-base.d.ts +0 -12
- package/columns/column.component.d.ts +2 -3
- package/esm2022/column-resizing/column-handle.directive.mjs +36 -217
- package/esm2022/column-resizing/column-resizing.service.mjs +1 -16
- package/esm2022/column-resizing/table.directive.mjs +1 -1
- package/esm2022/columns/column-base.mjs +0 -12
- package/esm2022/columns/column.component.mjs +0 -4
- package/esm2022/grid.component.mjs +5 -49
- package/esm2022/navigation/navigation.service.mjs +3 -20
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/rendering/header/header.component.mjs +5 -2
- package/esm2022/utils.mjs +0 -4
- package/fesm2022/progress-kendo-angular-grid.mjs +52 -326
- package/grid.component.d.ts +1 -12
- package/index.d.ts +0 -1
- package/package.json +20 -20
- package/rendering/header/header.component.d.ts +1 -0
- package/schematics/ngAdd/index.js +4 -4
- package/utils.d.ts +0 -4
- package/common/resizable-settings.d.ts +0 -25
- package/esm2022/common/resizable-settings.mjs +0 -8
|
@@ -29,10 +29,6 @@ export declare class ColumnHandleDirective implements OnInit, OnDestroy {
|
|
|
29
29
|
private get isConstrainedMode();
|
|
30
30
|
private subscriptions;
|
|
31
31
|
private rtl;
|
|
32
|
-
private totalChildrenSum;
|
|
33
|
-
private childrenColumns;
|
|
34
|
-
private minWidthTotal;
|
|
35
|
-
private foundColumn;
|
|
36
32
|
autoFit(): void;
|
|
37
33
|
constructor(draggable: DraggableDirective, element: ElementRef, service: ColumnResizingService, zone: NgZone, cdr: ChangeDetectorRef, ctx: ContextService, columnInfoService: ColumnInfoService);
|
|
38
34
|
ngOnInit(): void;
|
|
@@ -43,18 +39,9 @@ export declare class ColumnHandleDirective implements OnInit, OnDestroy {
|
|
|
43
39
|
private resize;
|
|
44
40
|
private sizeToFit;
|
|
45
41
|
private updateWidth;
|
|
46
|
-
private updateWidthsOfResizedColumns;
|
|
47
|
-
private calcNewColumnWidth;
|
|
48
|
-
private setAdjacentColumn;
|
|
49
|
-
private firstGroupChild;
|
|
50
|
-
private setGroupWidths;
|
|
51
|
-
private updateWidthOfDraggedColumn;
|
|
52
|
-
private calcChildrenWidth;
|
|
53
42
|
private columnsForLevel;
|
|
54
|
-
private minAdjacentColumnWidth;
|
|
55
43
|
private getTableDelta;
|
|
56
44
|
private stopPropagation;
|
|
57
|
-
private isLastInGroup;
|
|
58
45
|
static ɵfac: i0.ɵɵFactoryDeclaration<ColumnHandleDirective, [{ host: true; }, null, null, null, null, null, null]>;
|
|
59
46
|
static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnHandleDirective, "[kendoGridColumnHandle]", never, { "isLast": { "alias": "isLast"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "column": { "alias": "column"; "required": false; }; }, {}, never, never, true, never>;
|
|
60
47
|
}
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
import { EventEmitter } from '@angular/core';
|
|
6
6
|
import { ColumnBase } from '../columns/column-base';
|
|
7
7
|
import { ColumnResizeAction, ColumnResizeArgs, AutoFitFn } from './column-resize.interface';
|
|
8
|
-
import { ColumnGroupComponent } from '../columns/column-group.component';
|
|
9
8
|
import * as i0 from "@angular/core";
|
|
10
9
|
/**
|
|
11
10
|
* @hidden
|
|
@@ -16,10 +15,8 @@ export declare class ColumnResizingService {
|
|
|
16
15
|
areColumnsReordered: boolean;
|
|
17
16
|
isShiftPressed: boolean;
|
|
18
17
|
originalWidth: number;
|
|
19
|
-
draggedGroupColumn: ColumnGroupComponent;
|
|
20
|
-
resizedColumns: Array<ColumnResizeArgs>;
|
|
21
|
-
autoFitResize: boolean;
|
|
22
18
|
private column;
|
|
19
|
+
private resizedColumns;
|
|
23
20
|
private tables;
|
|
24
21
|
private batch;
|
|
25
22
|
start(column: ColumnBase): void;
|
|
@@ -36,7 +33,6 @@ export declare class ColumnResizingService {
|
|
|
36
33
|
private trackColumns;
|
|
37
34
|
private autoFitStart;
|
|
38
35
|
private autoFitBatch;
|
|
39
|
-
private restoreInitialMaxMinWidths;
|
|
40
36
|
static ɵfac: i0.ɵɵFactoryDeclaration<ColumnResizingService, never>;
|
|
41
37
|
static ɵprov: i0.ɵɵInjectableDeclaration<ColumnResizingService>;
|
|
42
38
|
}
|
package/columns/column-base.d.ts
CHANGED
|
@@ -26,18 +26,6 @@ export declare const isRowReorderColumn: (column: any) => any;
|
|
|
26
26
|
*/
|
|
27
27
|
export declare class ColumnBase {
|
|
28
28
|
parent?: ColumnBase;
|
|
29
|
-
/**
|
|
30
|
-
* @hidden
|
|
31
|
-
*/
|
|
32
|
-
isReordered: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* @hidden
|
|
35
|
-
*/
|
|
36
|
-
initialMaxResizableWidth: number;
|
|
37
|
-
/**
|
|
38
|
-
* @hidden
|
|
39
|
-
*/
|
|
40
|
-
initialMinResizableWidth: number;
|
|
41
29
|
/**
|
|
42
30
|
* @hidden
|
|
43
31
|
*/
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { TemplateRef
|
|
5
|
+
import { TemplateRef } from '@angular/core';
|
|
6
6
|
import { CellTemplateDirective } from '../rendering/cell-template.directive';
|
|
7
7
|
import { GroupHeaderTemplateDirective } from '../grouping/group-header-template.directive';
|
|
8
8
|
import { GroupHeaderColumnTemplateDirective } from '../grouping/group-header-column-template.directive';
|
|
@@ -30,7 +30,7 @@ export declare function isColumnComponent(column: any): column is ColumnComponen
|
|
|
30
30
|
* </kendo-grid>
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
33
|
-
export declare class ColumnComponent extends ColumnBase
|
|
33
|
+
export declare class ColumnComponent extends ColumnBase {
|
|
34
34
|
/**
|
|
35
35
|
* The field to which the column is bound.
|
|
36
36
|
*/
|
|
@@ -94,7 +94,6 @@ export declare class ColumnComponent extends ColumnBase implements AfterViewInit
|
|
|
94
94
|
get filterCellTemplateRef(): TemplateRef<any>;
|
|
95
95
|
get filterMenuTemplateRef(): TemplateRef<any>;
|
|
96
96
|
get displayTitle(): string;
|
|
97
|
-
ngAfterViewInit(): void;
|
|
98
97
|
static ɵfac: i0.ɵɵFactoryDeclaration<ColumnComponent, [{ optional: true; host: true; skipSelf: true; }, { optional: true; }]>;
|
|
99
98
|
static ɵcmp: i0.ɵɵComponentDeclaration<ColumnComponent, "kendo-grid-column", never, { "field": { "alias": "field"; "required": false; }; "format": { "alias": "format"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "groupable": { "alias": "groupable"; "required": false; }; "editor": { "alias": "editor"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, {}, ["template", "groupHeaderTemplate", "groupHeaderColumnTemplate", "groupFooterTemplate", "editTemplate", "filterCellTemplate", "filterMenuTemplate"], never, true, never>;
|
|
100
99
|
}
|
|
@@ -31,20 +31,11 @@ const toPercentage = (value, whole) => (value / whole) * 100;
|
|
|
31
31
|
/**
|
|
32
32
|
* @hidden
|
|
33
33
|
*/
|
|
34
|
-
const headerWidth = (handle) => handle.nativeElement.parentElement.
|
|
34
|
+
const headerWidth = (handle) => handle.nativeElement.parentElement.offsetWidth;
|
|
35
35
|
/**
|
|
36
36
|
* @hidden
|
|
37
37
|
*/
|
|
38
|
-
const adjacentColumnWidth = (handle) => handle.nativeElement.parentElement.nextElementSibling?.
|
|
39
|
-
/**
|
|
40
|
-
* @hidden
|
|
41
|
-
*/
|
|
42
|
-
const adjacentColumnInGroupWidth = (handle, rowIndex, colIndex) => {
|
|
43
|
-
const tableElement = handle.nativeElement.closest('.k-grid-header-table');
|
|
44
|
-
const selector = (rowAttribute) => `tr[${rowAttribute}="${rowIndex}"] th[aria-colindex="${colIndex}"]`;
|
|
45
|
-
const thElement = tableElement.querySelector([selector('aria-rowindex'), selector('data-kendo-grid-row-index')]);
|
|
46
|
-
return thElement.getBoundingClientRect().width;
|
|
47
|
-
};
|
|
38
|
+
const adjacentColumnWidth = (handle) => handle.nativeElement.parentElement.nextElementSibling?.offsetWidth;
|
|
48
39
|
/**
|
|
49
40
|
* @hidden
|
|
50
41
|
*/
|
|
@@ -104,7 +95,7 @@ export class ColumnHandleDirective {
|
|
|
104
95
|
columns = [];
|
|
105
96
|
column;
|
|
106
97
|
get visible() {
|
|
107
|
-
if (this.isConstrainedMode &&
|
|
98
|
+
if (this.isConstrainedMode && this.isLast) {
|
|
108
99
|
return 'none';
|
|
109
100
|
}
|
|
110
101
|
return this.column.resizable ? 'block' : 'none';
|
|
@@ -124,12 +115,7 @@ export class ColumnHandleDirective {
|
|
|
124
115
|
}
|
|
125
116
|
subscriptions = new Subscription();
|
|
126
117
|
rtl = false;
|
|
127
|
-
totalChildrenSum = 0;
|
|
128
|
-
childrenColumns = [];
|
|
129
|
-
minWidthTotal = 0;
|
|
130
|
-
foundColumn;
|
|
131
118
|
autoFit() {
|
|
132
|
-
this.service.autoFitResize = true;
|
|
133
119
|
const allLeafs = allLeafColumns(this.columns);
|
|
134
120
|
const currentLeafs = leafColumns([this.column]).filter(column => isTruthy(column.resizable));
|
|
135
121
|
const columnInfo = currentLeafs.map(column => {
|
|
@@ -187,19 +173,35 @@ export class ColumnHandleDirective {
|
|
|
187
173
|
}
|
|
188
174
|
shouldUpdate() {
|
|
189
175
|
return !allLeafColumns(this.columns)
|
|
190
|
-
.map(column => column.width
|
|
176
|
+
.map(column => column.width)
|
|
191
177
|
.some(isBlank);
|
|
192
178
|
}
|
|
193
179
|
initColumnWidth() {
|
|
194
180
|
this.column.width = headerWidth(this.element);
|
|
195
|
-
if (this.isConstrainedMode) {
|
|
196
|
-
this.column.resizeStartWidth = this.column.width;
|
|
197
|
-
}
|
|
198
181
|
}
|
|
199
182
|
initState() {
|
|
200
183
|
this.column.resizeStartWidth = headerWidth(this.element);
|
|
201
|
-
|
|
202
|
-
|
|
184
|
+
let columns = [];
|
|
185
|
+
if (this.ctx.grid?.columns) {
|
|
186
|
+
columns = Array.from(this.ctx.grid?.columns) || [];
|
|
187
|
+
}
|
|
188
|
+
if (this.isConstrainedMode) {
|
|
189
|
+
if (this.service.areColumnsReordered) {
|
|
190
|
+
this.service.adjacentColumn = columns.find(c => c.orderIndex === this.column.orderIndex + 1);
|
|
191
|
+
this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
|
|
192
|
+
this.service.resizedColumn({
|
|
193
|
+
column: this.service.adjacentColumn,
|
|
194
|
+
oldWidth: this.service.adjacentColumn.resizeStartWidth
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
else {
|
|
198
|
+
this.service.adjacentColumn = columns[this.column.leafIndex + 1];
|
|
199
|
+
this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
|
|
200
|
+
this.service.resizedColumn({
|
|
201
|
+
column: this.service.adjacentColumn,
|
|
202
|
+
oldWidth: this.service.adjacentColumn.resizeStartWidth
|
|
203
|
+
});
|
|
204
|
+
}
|
|
203
205
|
}
|
|
204
206
|
this.service.resizedColumn({
|
|
205
207
|
column: this.column,
|
|
@@ -216,7 +218,12 @@ export class ColumnHandleDirective {
|
|
|
216
218
|
newWidth = Math.min(newWidth, this.column.maxResizableWidth);
|
|
217
219
|
}
|
|
218
220
|
if (this.isConstrainedMode) {
|
|
219
|
-
|
|
221
|
+
const maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
|
|
222
|
+
newWidth = Math.min(newWidth, maxAllowedResizableWidth);
|
|
223
|
+
}
|
|
224
|
+
if (this.isConstrainedMode && isPresent(this.service.adjacentColumn.maxResizableWidth)) {
|
|
225
|
+
const maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.maxResizableWidth;
|
|
226
|
+
newWidth = Math.max(newWidth, maxAllowedResizableWidth);
|
|
220
227
|
}
|
|
221
228
|
const tableDelta = this.getTableDelta(newWidth, delta);
|
|
222
229
|
this.updateWidth(this.column, newWidth);
|
|
@@ -230,8 +237,11 @@ export class ColumnHandleDirective {
|
|
|
230
237
|
this.service.resizeTable(this.column, tableDelta);
|
|
231
238
|
}
|
|
232
239
|
updateWidth(column, width) {
|
|
233
|
-
if (this.isConstrainedMode && this.service.adjacentColumn
|
|
234
|
-
this.
|
|
240
|
+
if (this.isConstrainedMode && this.service.adjacentColumn) {
|
|
241
|
+
const adjacentColumnNewWidth = column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - width;
|
|
242
|
+
if (adjacentColumnNewWidth < (column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth)) {
|
|
243
|
+
this.service.adjacentColumn.width = adjacentColumnNewWidth;
|
|
244
|
+
}
|
|
235
245
|
}
|
|
236
246
|
column.width = width;
|
|
237
247
|
this.columnInfoService.hiddenColumns.forEach((col) => {
|
|
@@ -243,188 +253,9 @@ export class ColumnHandleDirective {
|
|
|
243
253
|
});
|
|
244
254
|
this.cdr.markForCheck(); //force CD cycle
|
|
245
255
|
}
|
|
246
|
-
updateWidthsOfResizedColumns(column, width) {
|
|
247
|
-
let adjacentColumnNewWidth = column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - width;
|
|
248
|
-
if (this.service.draggedGroupColumn && column.parent) {
|
|
249
|
-
this.updateWidthOfDraggedColumn(column, width);
|
|
250
|
-
this.setGroupWidths(this.service.draggedGroupColumn);
|
|
251
|
-
}
|
|
252
|
-
else if (!this.service.draggedGroupColumn && !column.parent && this.service.adjacentColumn.parent) {
|
|
253
|
-
this.service.adjacentColumn.parent.width = column.width + this.service.adjacentColumn.parent.width - width;
|
|
254
|
-
this.service.adjacentColumn.width = adjacentColumnNewWidth;
|
|
255
|
-
}
|
|
256
|
-
else if (!this.service.draggedGroupColumn && column.parent && this.service.adjacentColumn.parent) {
|
|
257
|
-
adjacentColumnNewWidth = column.width + this.service.adjacentColumn.width - width;
|
|
258
|
-
this.service.adjacentColumn.width = adjacentColumnNewWidth;
|
|
259
|
-
const filteredColumns = this.service.adjacentColumn.parent.children.filter(c => c !== this.service.adjacentColumn);
|
|
260
|
-
const filteredColumnsWidth = filteredColumns.reduce((acc, c) => acc + c.width, 0);
|
|
261
|
-
this.service.adjacentColumn.parent.width = adjacentColumnNewWidth + filteredColumnsWidth;
|
|
262
|
-
this.setGroupWidths(this.service.adjacentColumn.parent);
|
|
263
|
-
}
|
|
264
|
-
else if (adjacentColumnNewWidth > this.service.adjacentColumn.minResizableWidth) {
|
|
265
|
-
this.service.adjacentColumn.width = adjacentColumnNewWidth;
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
calcNewColumnWidth(newWidth) {
|
|
269
|
-
let maxAllowedResizableWidth;
|
|
270
|
-
if (!this.service.adjacentColumn.parent) {
|
|
271
|
-
maxAllowedResizableWidth = this.column.width + this.service.adjacentColumn.width - this.service.adjacentColumn.minResizableWidth;
|
|
272
|
-
if (!this.column.parent) {
|
|
273
|
-
maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
|
|
274
|
-
if (this.service.adjacentColumn.maxResizableWidth) {
|
|
275
|
-
const minResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.maxResizableWidth;
|
|
276
|
-
maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
|
|
277
|
-
this.column.minResizableWidth = minResizableWidth;
|
|
278
|
-
this.column.maxResizableWidth = maxAllowedResizableWidth;
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
else {
|
|
283
|
-
maxAllowedResizableWidth = this.column.width + this.service.adjacentColumn.width;
|
|
284
|
-
newWidth = Math.min(newWidth, maxAllowedResizableWidth);
|
|
285
|
-
this.minWidthTotal = 0;
|
|
286
|
-
const minResizableWidth = this.minAdjacentColumnWidth(this.service.adjacentColumn);
|
|
287
|
-
maxAllowedResizableWidth -= minResizableWidth;
|
|
288
|
-
}
|
|
289
|
-
return Math.min(newWidth, maxAllowedResizableWidth - 1);
|
|
290
|
-
}
|
|
291
|
-
setAdjacentColumn() {
|
|
292
|
-
const columnsForLevel = this.columnsForLevel(this.column.level);
|
|
293
|
-
if (this.column.parent) {
|
|
294
|
-
if (this.column.isReordered) {
|
|
295
|
-
this.service.adjacentColumn = columnsForLevel.find(c => c.orderIndex === this.column.orderIndex + 1);
|
|
296
|
-
this.service.adjacentColumn.resizeStartWidth = this.service.adjacentColumn.width;
|
|
297
|
-
}
|
|
298
|
-
else {
|
|
299
|
-
const columnIndex = columnsForLevel.indexOf(this.column);
|
|
300
|
-
this.service.adjacentColumn = columnsForLevel[columnIndex + 1];
|
|
301
|
-
this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
|
|
302
|
-
const parentColumnChildren = Array.from(this.column.parent.children);
|
|
303
|
-
const indexOfCurrentColumn = parentColumnChildren.indexOf(this.column);
|
|
304
|
-
let adjacentColumn;
|
|
305
|
-
if (indexOfCurrentColumn + 1 <= parentColumnChildren.length - 1) {
|
|
306
|
-
adjacentColumn = parentColumnChildren[indexOfCurrentColumn + 1];
|
|
307
|
-
if (adjacentColumn?.isColumnGroup) {
|
|
308
|
-
this.service.adjacentColumn = adjacentColumn;
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
if (this.service.adjacentColumn.isColumnGroup) {
|
|
313
|
-
this.foundColumn = null;
|
|
314
|
-
this.service.adjacentColumn = this.firstGroupChild(this.service.adjacentColumn);
|
|
315
|
-
}
|
|
316
|
-
if (this.column.isColumnGroup) {
|
|
317
|
-
this.service.draggedGroupColumn = this.column;
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
else if (this.column.isColumnGroup) {
|
|
321
|
-
if (this.column.isReordered) {
|
|
322
|
-
this.service.adjacentColumn = columnsForLevel.find(c => c.orderIndex === this.column.orderIndex + 1);
|
|
323
|
-
}
|
|
324
|
-
else {
|
|
325
|
-
this.service.adjacentColumn = columnsForLevel[columnsForLevel.indexOf(this.column) + 1];
|
|
326
|
-
}
|
|
327
|
-
this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
|
|
328
|
-
if (this.service.adjacentColumn.isColumnGroup) {
|
|
329
|
-
this.foundColumn = null;
|
|
330
|
-
this.service.adjacentColumn = this.firstGroupChild(this.service.adjacentColumn);
|
|
331
|
-
}
|
|
332
|
-
this.service.adjacentColumn.resizeStartWidth = this.service.adjacentColumn.width;
|
|
333
|
-
this.service.draggedGroupColumn = this.column;
|
|
334
|
-
}
|
|
335
|
-
else {
|
|
336
|
-
if (this.column.isReordered) {
|
|
337
|
-
this.service.adjacentColumn = columnsForLevel.find(col => col.orderIndex === this.column.orderIndex + 1);
|
|
338
|
-
}
|
|
339
|
-
else {
|
|
340
|
-
let adjacentColumn = columnsForLevel.find(c => c.leafIndex === this.column.leafIndex + 1);
|
|
341
|
-
if (!adjacentColumn) {
|
|
342
|
-
const indexOfCurrentColumn = columnsForLevel.indexOf(this.column);
|
|
343
|
-
adjacentColumn = columnsForLevel[indexOfCurrentColumn + 1];
|
|
344
|
-
}
|
|
345
|
-
this.service.adjacentColumn = adjacentColumn;
|
|
346
|
-
}
|
|
347
|
-
if (!this.service.adjacentColumn.parent) {
|
|
348
|
-
this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
|
|
349
|
-
}
|
|
350
|
-
if (this.service.adjacentColumn.isColumnGroup) {
|
|
351
|
-
this.foundColumn = null;
|
|
352
|
-
this.service.adjacentColumn = this.firstGroupChild(this.service.adjacentColumn);
|
|
353
|
-
const rowIndex = this.service.adjacentColumn.level + 1;
|
|
354
|
-
const colIndex = this.service.adjacentColumn.leafIndex + 1;
|
|
355
|
-
this.service.adjacentColumn.resizeStartWidth = adjacentColumnInGroupWidth(this.element, rowIndex, colIndex);
|
|
356
|
-
}
|
|
357
|
-
}
|
|
358
|
-
this.service.resizedColumn({
|
|
359
|
-
column: this.service.adjacentColumn,
|
|
360
|
-
oldWidth: this.service.adjacentColumn.resizeStartWidth
|
|
361
|
-
});
|
|
362
|
-
}
|
|
363
|
-
firstGroupChild(column) {
|
|
364
|
-
Array.from(column.children).sort((a, b) => a.orderIndex - b.orderIndex).forEach((c, idx) => {
|
|
365
|
-
if (idx === 0 && !c.isColumnGroup) {
|
|
366
|
-
if (!this.foundColumn) {
|
|
367
|
-
this.foundColumn = c;
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
else if (c.isColumnGroup) {
|
|
371
|
-
this.firstGroupChild(c);
|
|
372
|
-
}
|
|
373
|
-
});
|
|
374
|
-
return this.foundColumn;
|
|
375
|
-
}
|
|
376
|
-
setGroupWidths(column) {
|
|
377
|
-
const childrenWidths = column.children.reduce((acc, c) => acc + c.width, 0);
|
|
378
|
-
column.width = childrenWidths;
|
|
379
|
-
column.children.forEach(c => {
|
|
380
|
-
if (c.isColumnGroup) {
|
|
381
|
-
this.setGroupWidths(c);
|
|
382
|
-
}
|
|
383
|
-
});
|
|
384
|
-
}
|
|
385
|
-
updateWidthOfDraggedColumn(column, width) {
|
|
386
|
-
this.totalChildrenSum = 0;
|
|
387
|
-
this.childrenColumns = [];
|
|
388
|
-
this.calcChildrenWidth(this.service.draggedGroupColumn);
|
|
389
|
-
const childrenWidthNotIncludingColumn = this.childrenColumns.reduce((acc, col) => {
|
|
390
|
-
return col !== column ? acc + col.width : acc;
|
|
391
|
-
}, 0);
|
|
392
|
-
this.service.draggedGroupColumn.width = childrenWidthNotIncludingColumn + width;
|
|
393
|
-
if (this.service.adjacentColumn.minResizableWidth <= this.totalChildrenSum + this.service.adjacentColumn.resizeStartWidth - width - childrenWidthNotIncludingColumn) {
|
|
394
|
-
this.service.adjacentColumn.width = this.totalChildrenSum + this.service.adjacentColumn.resizeStartWidth - width - childrenWidthNotIncludingColumn;
|
|
395
|
-
}
|
|
396
|
-
}
|
|
397
|
-
calcChildrenWidth(column) {
|
|
398
|
-
const columnChildren = Array.from(column.children);
|
|
399
|
-
const childrenNoGroups = columnChildren.filter(c => !c.isColumnGroup);
|
|
400
|
-
const childrenGroups = columnChildren.filter(c => c.isColumnGroup);
|
|
401
|
-
childrenNoGroups.forEach(col => {
|
|
402
|
-
if (this.childrenColumns.indexOf(col) === -1) {
|
|
403
|
-
this.childrenColumns.push(col);
|
|
404
|
-
}
|
|
405
|
-
});
|
|
406
|
-
this.totalChildrenSum += childrenNoGroups.reduce((acc, col) => acc + col.resizeStartWidth, 0);
|
|
407
|
-
childrenGroups.forEach((col) => {
|
|
408
|
-
this.calcChildrenWidth(col);
|
|
409
|
-
});
|
|
410
|
-
}
|
|
411
256
|
columnsForLevel(level) {
|
|
412
257
|
return columnsToRender(this.columns ? this.columns.filter(column => column.level === level) : []);
|
|
413
258
|
}
|
|
414
|
-
minAdjacentColumnWidth(column) {
|
|
415
|
-
if (column.isColumnGroup) {
|
|
416
|
-
Array.from(column.children).forEach(c => {
|
|
417
|
-
this.minAdjacentColumnWidth(c);
|
|
418
|
-
});
|
|
419
|
-
}
|
|
420
|
-
else {
|
|
421
|
-
this.minWidthTotal += column.minResizableWidth;
|
|
422
|
-
if (column.width < column.minResizableWidth) {
|
|
423
|
-
column.width = column.minResizableWidth;
|
|
424
|
-
}
|
|
425
|
-
}
|
|
426
|
-
return this.minWidthTotal;
|
|
427
|
-
}
|
|
428
259
|
getTableDelta(newWidth, delta) {
|
|
429
260
|
const minWidth = this.column.minResizableWidth;
|
|
430
261
|
const maxWidth = this.column.maxResizableWidth;
|
|
@@ -449,18 +280,6 @@ export class ColumnHandleDirective {
|
|
|
449
280
|
event.stopPropagation();
|
|
450
281
|
event.preventDefault();
|
|
451
282
|
};
|
|
452
|
-
isLastInGroup(column) {
|
|
453
|
-
if (column.parent) {
|
|
454
|
-
const groupChildren = Array.from(column.parent.children);
|
|
455
|
-
const indexOfCurrentColumn = groupChildren.indexOf(column);
|
|
456
|
-
if (column.isReordered || column.orderIndex > 0 || (column.isReordered && column.orderIndex === 0)) {
|
|
457
|
-
return (column.orderIndex - groupChildren[0].orderIndex) === groupChildren.length - 1;
|
|
458
|
-
}
|
|
459
|
-
else {
|
|
460
|
-
return indexOfCurrentColumn === groupChildren.length - 1;
|
|
461
|
-
}
|
|
462
|
-
}
|
|
463
|
-
}
|
|
464
283
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.ContextService }, { token: i4.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
465
284
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHandleDirective, isStandalone: true, selector: "[kendoGridColumnHandle]", inputs: { isLast: "isLast", columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
|
|
466
285
|
}
|
|
@@ -27,10 +27,8 @@ export class ColumnResizingService {
|
|
|
27
27
|
areColumnsReordered = false;
|
|
28
28
|
isShiftPressed = false;
|
|
29
29
|
originalWidth;
|
|
30
|
-
draggedGroupColumn;
|
|
31
|
-
resizedColumns;
|
|
32
|
-
autoFitResize = false;
|
|
33
30
|
column;
|
|
31
|
+
resizedColumns;
|
|
34
32
|
tables = [];
|
|
35
33
|
batch = null;
|
|
36
34
|
start(column) {
|
|
@@ -66,10 +64,7 @@ export class ColumnResizingService {
|
|
|
66
64
|
resizedColumns: this.resizedColumns,
|
|
67
65
|
type: 'end'
|
|
68
66
|
});
|
|
69
|
-
this.restoreInitialMaxMinWidths();
|
|
70
67
|
this.adjacentColumn = null;
|
|
71
|
-
this.draggedGroupColumn = null;
|
|
72
|
-
this.autoFitResize = false;
|
|
73
68
|
}
|
|
74
69
|
registerTable(tableMetadata) {
|
|
75
70
|
this.tables.push(tableMetadata);
|
|
@@ -142,16 +137,6 @@ export class ColumnResizingService {
|
|
|
142
137
|
});
|
|
143
138
|
this.batch = null;
|
|
144
139
|
}
|
|
145
|
-
restoreInitialMaxMinWidths() {
|
|
146
|
-
if (this.adjacentColumn) {
|
|
147
|
-
this.adjacentColumn.maxResizableWidth = this.adjacentColumn.initialMaxResizableWidth;
|
|
148
|
-
this.adjacentColumn.minResizableWidth = this.adjacentColumn.initialMinResizableWidth;
|
|
149
|
-
}
|
|
150
|
-
if (this.column) {
|
|
151
|
-
this.column.maxResizableWidth = this.column.initialMaxResizableWidth;
|
|
152
|
-
this.column.minResizableWidth = this.column.initialMinResizableWidth;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
140
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
156
141
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService });
|
|
157
142
|
}
|
|
@@ -91,7 +91,7 @@ export class TableDirective {
|
|
|
91
91
|
const constrainedModeNoShift = this.ctx.grid?.resizable === 'constrained' && !this.service.isShiftPressed;
|
|
92
92
|
const unconstrainedModeShift = (this.ctx.grid?.resizable === true || this.ctx.grid?.resizable === 'unconstrained') && this.service.isShiftPressed;
|
|
93
93
|
const isConstrainedMode = constrainedModeNoShift || unconstrainedModeShift;
|
|
94
|
-
if (isConstrainedMode
|
|
94
|
+
if (isConstrainedMode) {
|
|
95
95
|
this.renderer.setStyle(this.element.nativeElement, 'width', this.service.originalWidth + 'px');
|
|
96
96
|
}
|
|
97
97
|
else {
|
|
@@ -28,18 +28,6 @@ const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column)
|
|
|
28
28
|
*/
|
|
29
29
|
export class ColumnBase {
|
|
30
30
|
parent;
|
|
31
|
-
/**
|
|
32
|
-
* @hidden
|
|
33
|
-
*/
|
|
34
|
-
isReordered;
|
|
35
|
-
/**
|
|
36
|
-
* @hidden
|
|
37
|
-
*/
|
|
38
|
-
initialMaxResizableWidth;
|
|
39
|
-
/**
|
|
40
|
-
* @hidden
|
|
41
|
-
*/
|
|
42
|
-
initialMinResizableWidth;
|
|
43
31
|
/**
|
|
44
32
|
* @hidden
|
|
45
33
|
*/
|
|
@@ -116,10 +116,6 @@ export class ColumnComponent extends ColumnBase {
|
|
|
116
116
|
get displayTitle() {
|
|
117
117
|
return this.title === undefined ? this.field : this.title;
|
|
118
118
|
}
|
|
119
|
-
ngAfterViewInit() {
|
|
120
|
-
this.initialMaxResizableWidth = this.maxResizableWidth;
|
|
121
|
-
this.initialMinResizableWidth = this.minResizableWidth;
|
|
122
|
-
}
|
|
123
119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }, { token: i2.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
124
120
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
|
|
125
121
|
{
|
|
@@ -14,7 +14,7 @@ import { isSpanColumnComponent } from './columns/span-column.component';
|
|
|
14
14
|
import { isColumnGroupComponent, ColumnGroupComponent } from './columns/column-group.component';
|
|
15
15
|
import { DetailTemplateDirective } from './rendering/details/detail-template.directive';
|
|
16
16
|
import { normalize } from './common/pager-settings';
|
|
17
|
-
import { isArray, anyChanged, isChanged, isPresent, isUniversal, observe, isTruthy, createPromise, hasObservers
|
|
17
|
+
import { isArray, anyChanged, isChanged, isPresent, isUniversal, observe, isTruthy, createPromise, hasObservers } from './utils';
|
|
18
18
|
import { BrowserSupportService } from './layout/browser-support.service';
|
|
19
19
|
import { DataResultIterator, DataCollection } from './data/data.collection';
|
|
20
20
|
import { SelectionService } from './selection/selection.service';
|
|
@@ -411,11 +411,6 @@ export class GridComponent {
|
|
|
411
411
|
* @default false
|
|
412
412
|
*/
|
|
413
413
|
groupable = false;
|
|
414
|
-
/**
|
|
415
|
-
* Determines whether the Grid can be resized.
|
|
416
|
-
* @default false
|
|
417
|
-
*/
|
|
418
|
-
gridResizable = false;
|
|
419
414
|
/**
|
|
420
415
|
* Enables the [row reordering]({% slug reordering_rows_grid %}) of the Grid.
|
|
421
416
|
* @default false
|
|
@@ -753,21 +748,6 @@ export class GridComponent {
|
|
|
753
748
|
get noScrollbarClass() {
|
|
754
749
|
return this.scrollbarWidth === 0;
|
|
755
750
|
}
|
|
756
|
-
get isResizable() {
|
|
757
|
-
return Boolean(this.gridResizable);
|
|
758
|
-
}
|
|
759
|
-
get minWidth() {
|
|
760
|
-
return this.gridResizable.minWidth;
|
|
761
|
-
}
|
|
762
|
-
get maxWidth() {
|
|
763
|
-
return this.gridResizable.maxWidth;
|
|
764
|
-
}
|
|
765
|
-
get minHeight() {
|
|
766
|
-
return this.gridResizable.minHeight;
|
|
767
|
-
}
|
|
768
|
-
get maxHeight() {
|
|
769
|
-
return this.gridResizable.maxHeight;
|
|
770
|
-
}
|
|
771
751
|
detailTemplateChildren;
|
|
772
752
|
get detailTemplate() {
|
|
773
753
|
if (this._customDetailTemplate) {
|
|
@@ -1727,19 +1707,16 @@ export class GridComponent {
|
|
|
1727
1707
|
}
|
|
1728
1708
|
else if (column === source) {
|
|
1729
1709
|
i += toSkip;
|
|
1730
|
-
column.isReordered = true;
|
|
1731
1710
|
continue;
|
|
1732
1711
|
}
|
|
1733
1712
|
else {
|
|
1734
1713
|
column.orderIndex = nextIndex;
|
|
1735
1714
|
}
|
|
1736
|
-
column.isReordered = true;
|
|
1737
1715
|
nextIndex++;
|
|
1738
1716
|
i++;
|
|
1739
1717
|
}
|
|
1740
1718
|
for (i = sourceColumnIndex; i < sourceColumnIndex + toSkip; i++) {
|
|
1741
1719
|
expandedColumns[i].orderIndex = nextSourceIndex++;
|
|
1742
|
-
expandedColumns[i].isReordered = true;
|
|
1743
1720
|
}
|
|
1744
1721
|
this.updateIndicesForLevel(source.level + 1);
|
|
1745
1722
|
this.columnResizingService.areColumnsReordered = true;
|
|
@@ -1752,11 +1729,7 @@ export class GridComponent {
|
|
|
1752
1729
|
colsForLevel.push(...c.childrenArray.sort((a, b) => a.orderIndex - b.orderIndex));
|
|
1753
1730
|
}
|
|
1754
1731
|
});
|
|
1755
|
-
expandColumnsWithSpan(colsForLevel).map((c, i) =>
|
|
1756
|
-
c.orderIndex = i;
|
|
1757
|
-
c.isReordered = true;
|
|
1758
|
-
return c;
|
|
1759
|
-
});
|
|
1732
|
+
expandColumnsWithSpan(colsForLevel).map((c, i) => c.orderIndex = i);
|
|
1760
1733
|
if (level < this.columnList.totalColumnLevels()) {
|
|
1761
1734
|
this.updateIndicesForLevel(level + 1);
|
|
1762
1735
|
}
|
|
@@ -2074,8 +2047,8 @@ export class GridComponent {
|
|
|
2074
2047
|
.filter(item => isTruthy(item.column.resizable) && !item.column.isColumnGroup)
|
|
2075
2048
|
.map(item => ({
|
|
2076
2049
|
column: item.column,
|
|
2077
|
-
newWidth:
|
|
2078
|
-
oldWidth:
|
|
2050
|
+
newWidth: item.column.width,
|
|
2051
|
+
oldWidth: item.oldWidth
|
|
2079
2052
|
}));
|
|
2080
2053
|
this.columnResize.emit(args);
|
|
2081
2054
|
}
|
|
@@ -2196,7 +2169,7 @@ export class GridComponent {
|
|
|
2196
2169
|
this.dropTargetContainer?.notify();
|
|
2197
2170
|
}
|
|
2198
2171
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, deps: [{ token: i1.BrowserSupportService }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i0.ElementRef }, { token: i4.GroupInfoService }, { token: i5.GroupsService }, { token: i6.ChangeNotificationService }, { token: i7.DetailsService }, { token: i8.EditService }, { token: i9.FilterService }, { token: i10.PDFService }, { token: i11.ResponsiveService }, { token: i0.Renderer2 }, { token: i12.ExcelService }, { token: i0.NgZone }, { token: i13.ScrollSyncService }, { token: i14.DomEventsService }, { token: i15.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i16.ColumnReorderService }, { token: i17.ColumnInfoService }, { token: i18.NavigationService }, { token: i19.SortService }, { token: i20.ScrollRequestService }, { token: i21.LocalizationService }, { token: i22.ContextService }, { token: i23.SizingOptionsService }, { token: i24.RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable",
|
|
2172
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
|
|
2200
2173
|
BrowserSupportService,
|
|
2201
2174
|
LocalizationService,
|
|
2202
2175
|
ColumnInfoService,
|
|
@@ -3653,8 +3626,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3653
3626
|
type: Input
|
|
3654
3627
|
}], groupable: [{
|
|
3655
3628
|
type: Input
|
|
3656
|
-
}], gridResizable: [{
|
|
3657
|
-
type: Input
|
|
3658
3629
|
}], rowReorderable: [{
|
|
3659
3630
|
type: Input
|
|
3660
3631
|
}], navigable: [{
|
|
@@ -3761,21 +3732,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
3761
3732
|
}], noScrollbarClass: [{
|
|
3762
3733
|
type: HostBinding,
|
|
3763
3734
|
args: ['class.k-grid-no-scrollbar']
|
|
3764
|
-
}], isResizable: [{
|
|
3765
|
-
type: HostBinding,
|
|
3766
|
-
args: ['class.k-grid-resizable']
|
|
3767
|
-
}], minWidth: [{
|
|
3768
|
-
type: HostBinding,
|
|
3769
|
-
args: ['style.minWidth']
|
|
3770
|
-
}], maxWidth: [{
|
|
3771
|
-
type: HostBinding,
|
|
3772
|
-
args: ['style.maxWidth']
|
|
3773
|
-
}], minHeight: [{
|
|
3774
|
-
type: HostBinding,
|
|
3775
|
-
args: ['style.minHeight']
|
|
3776
|
-
}], maxHeight: [{
|
|
3777
|
-
type: HostBinding,
|
|
3778
|
-
args: ['style.maxHeight']
|
|
3779
3735
|
}], detailTemplateChildren: [{
|
|
3780
3736
|
type: ContentChildren,
|
|
3781
3737
|
args: [DetailTemplateDirective]
|