@progress/kendo-vue-grid 3.0.4-dev.202202010701 → 3.0.5-dev.202202081314

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.
Files changed (34) hide show
  1. package/dist/cdn/js/kendo-vue-grid.js +1 -1
  2. package/dist/es/Grid.d.ts +4 -2
  3. package/dist/es/Grid.js +95 -23
  4. package/dist/es/VirtualScroll.d.ts +1 -1
  5. package/dist/es/VirtualScroll.js +2 -2
  6. package/dist/es/cells/GridGroupCell.js +2 -0
  7. package/dist/es/interfaces/GridCellProps.d.ts +6 -6
  8. package/dist/es/interfaces/GridColumnMenuExtendedFilterProps.d.ts +1 -1
  9. package/dist/es/interfaces/GridColumnMenuFilterProps.d.ts +1 -1
  10. package/dist/es/interfaces/GridColumnMenuFilterUIProps.d.ts +1 -1
  11. package/dist/es/interfaces/GridProps.d.ts +41 -23
  12. package/dist/es/interfaces/events.d.ts +4 -0
  13. package/dist/es/main.d.ts +1 -0
  14. package/dist/es/main.js +1 -0
  15. package/dist/es/package-metadata.js +1 -1
  16. package/dist/es/utils/index.d.ts +8 -0
  17. package/dist/es/utils/index.js +36 -0
  18. package/dist/npm/Grid.d.ts +4 -2
  19. package/dist/npm/Grid.js +95 -23
  20. package/dist/npm/VirtualScroll.d.ts +1 -1
  21. package/dist/npm/VirtualScroll.js +2 -2
  22. package/dist/npm/cells/GridGroupCell.js +2 -0
  23. package/dist/npm/interfaces/GridCellProps.d.ts +6 -6
  24. package/dist/npm/interfaces/GridColumnMenuExtendedFilterProps.d.ts +1 -1
  25. package/dist/npm/interfaces/GridColumnMenuFilterProps.d.ts +1 -1
  26. package/dist/npm/interfaces/GridColumnMenuFilterUIProps.d.ts +1 -1
  27. package/dist/npm/interfaces/GridProps.d.ts +41 -23
  28. package/dist/npm/interfaces/events.d.ts +4 -0
  29. package/dist/npm/main.d.ts +1 -0
  30. package/dist/npm/main.js +11 -0
  31. package/dist/npm/package-metadata.js +1 -1
  32. package/dist/npm/utils/index.d.ts +8 -0
  33. package/dist/npm/utils/index.js +39 -1
  34. package/package.json +13 -13
package/dist/es/Grid.d.ts CHANGED
@@ -10,7 +10,7 @@ import { VirtualScroll } from './VirtualScroll';
10
10
  import { ColumnResize } from './drag/ColumnResize';
11
11
  import { CommonDragLogic } from './drag/CommonDragLogic';
12
12
  import { DataItemWrapper } from './utils/index';
13
- import { GridProps, GridEmits } from './interfaces/GridProps';
13
+ import { GridProps } from './interfaces/GridProps';
14
14
  import { GridColumnProps } from './interfaces/GridColumnProps';
15
15
  /**
16
16
  * Represents the [native Vue Grid component by Kendo UI]({% slug overview_grid_native %}).
@@ -131,6 +131,8 @@ export interface GridState {
131
131
  export interface GridComputed {
132
132
  [key: string]: any;
133
133
  getCorrectHeight: any;
134
+ currentGroupable: boolean;
135
+ computedCollapsed: any[][];
134
136
  }
135
137
  /**
136
138
  * @hidden
@@ -141,5 +143,5 @@ export interface GridAll extends GridMethods, GridData, GridState, GridComputed,
141
143
  * Represents the default `Grid` component.
142
144
  */
143
145
  declare let GridVue2: ComponentOptions<Vue2type, DefaultData<GridData>, DefaultMethods<GridAll>, GridComputed, RecordPropsDefinition<GridProps>>;
144
- declare const Grid: DefineComponent<GridProps, any, GridData, GridComputed, GridMethods, {}, {}, GridEmits, string, GridProps, GridProps, {}>;
146
+ declare const Grid: DefineComponent<GridProps, any, GridData, GridComputed, GridMethods, {}, {}, {}, string, GridProps, GridProps, {}>;
145
147
  export { Grid, GridVue2 };
package/dist/es/Grid.js CHANGED
@@ -69,14 +69,11 @@ import { ColumnResize } from './drag/ColumnResize';
69
69
  import { CommonDragLogic } from './drag/CommonDragLogic';
70
70
  import { DragClue } from './drag/DragClue';
71
71
  import { DropClue } from './drag/DropClue';
72
- import { getNestedValue, flatData, mapColumns, readColumns, autoGenerateColumns } from './utils/index'; // import { GridCellProps } from './interfaces/GridCellProps';
73
-
74
- import { GridCell } from './cells/GridCell'; // import { GridToolbar } from './GridToolbar';
75
-
72
+ import { getNestedValue, flatData, mapColumns, readColumns, autoGenerateColumns, applyExpandedState, groupedFirstItemValue } from './utils/index';
73
+ import { GridCell } from './cells/GridCell';
76
74
  import { GridGroupCell } from './cells/GridGroupCell';
77
75
  import { GridRow } from './rows/GridRow';
78
- import { GridHeaderSelectionCell } from './header/GridHeaderSelectionCell'; // import { ScrollMode } from './ScrollMode';
79
-
76
+ import { GridHeaderSelectionCell } from './header/GridHeaderSelectionCell';
80
77
  import { GridNoRecords } from './GridNoRecords';
81
78
  import { packageMetadata } from './package-metadata';
82
79
  import { pagerMessagesMap } from './messages';
@@ -87,6 +84,19 @@ import { pagerMessagesMap } from './messages';
87
84
  var GridVue2 = {
88
85
  name: 'KendoGrid',
89
86
  props: {
87
+ topCacheCount: {
88
+ type: Number,
89
+ default: 0
90
+ },
91
+ collapsedGroups: {
92
+ type: Array,
93
+ default: function _default() {
94
+ return [];
95
+ }
96
+ },
97
+ uniqueField: String,
98
+ totalGroupedHeight: Number,
99
+ allGroupedItems: Object,
90
100
  alternatePerGroup: Boolean,
91
101
  columns: Array,
92
102
  columnVirtualization: Boolean,
@@ -157,8 +167,8 @@ var GridVue2 = {
157
167
  validatePackage(packageMetadata);
158
168
  this.initialHeight = null;
159
169
  this._columns = [];
160
- var groupable = this.$props.groupable === true || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
161
- this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0);
170
+ var groupable = this.currentGroupable;
171
+ this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
162
172
  this.dragLogic = new CommonDragLogic(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this));
163
173
  this.columnResize = new ColumnResize(this.onResize.bind(this));
164
174
  this._columnsMap = [[]];
@@ -195,6 +205,24 @@ var GridVue2 = {
195
205
  return null;
196
206
  }
197
207
  }
208
+ },
209
+ currentGroupable: function currentGroupable() {
210
+ return this.$props.groupable === true && this.$props.group && this.$props.group.length || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
211
+ },
212
+ computedCollapsed: function computedCollapsed() {
213
+ var newCollapsed = [];
214
+
215
+ if (this.$props.group) {
216
+ for (var i = 0; i < this.$props.group.length; i++) {
217
+ if (this.$props.collapsedGroups[i]) {
218
+ newCollapsed.push(this.$props.collapsedGroups[i]);
219
+ } else {
220
+ newCollapsed.push([]);
221
+ }
222
+ }
223
+ }
224
+
225
+ return newCollapsed;
198
226
  }
199
227
  },
200
228
  methods: {
@@ -288,16 +316,16 @@ var GridVue2 = {
288
316
  }
289
317
  },
290
318
  onTotalChanged: function onTotalChanged(_value, _oldValue) {
291
- var groupable = this.$props.groupable === true || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
319
+ var groupable = this.currentGroupable;
292
320
  this.vs.reset();
293
- this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0);
321
+ this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
294
322
  this.resetVirtual();
295
323
  this.setRefs();
296
324
  },
297
325
  onRowHeightChanged: function onRowHeightChanged(_value, _oldValue) {
298
- var groupable = this.$props.groupable === true || _typeof(this.$props.groupable) === 'object' && this.$props.groupable.enabled !== false;
326
+ var groupable = this.currentGroupable;
299
327
  this.vs.reset();
300
- this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0);
328
+ this.vs = new VirtualScroll(groupable || this.$props.rowHeight === undefined || this.$props.rowHeight === 0, this.$props.topCacheCount);
301
329
  this.resetVirtual();
302
330
  this.setRefs();
303
331
  },
@@ -340,6 +368,31 @@ var GridVue2 = {
340
368
  }, this.getArguments(e)));
341
369
  }
342
370
  },
371
+ updateGroupCollapsed: function updateGroupCollapsed(event) {
372
+ var collapsed = this.computedCollapsed;
373
+ var collapsedLevel = collapsed[event.level];
374
+ var uniqueItemValue = groupedFirstItemValue(event.dataItem, this.$props.uniqueField);
375
+
376
+ if (event.value) {
377
+ if (collapsedLevel && collapsedLevel.length) {
378
+ var expandedIndex = collapsedLevel.indexOf(uniqueItemValue);
379
+
380
+ if (expandedIndex > -1) {
381
+ collapsedLevel.splice(expandedIndex, 1);
382
+ }
383
+ }
384
+ } else {
385
+ if (collapsedLevel) {
386
+ if (!collapsedLevel.includes(uniqueItemValue)) {
387
+ collapsedLevel.push(uniqueItemValue);
388
+ }
389
+ } else {
390
+ collapsedLevel = [uniqueItemValue];
391
+ }
392
+ }
393
+
394
+ return collapsed;
395
+ },
343
396
  itemChange: function itemChange(event) {
344
397
  var itemChange = hasListener.call(this, 'itemchange');
345
398
 
@@ -348,6 +401,7 @@ var GridVue2 = {
348
401
 
349
402
  if (expandChange) {
350
403
  this.$emit('expandchange', __assign(__assign({}, this.getArguments(event.event)), {
404
+ collapsedGroups: this.updateGroupCollapsed(event),
351
405
  dataItem: event.dataItem,
352
406
  value: event.value
353
407
  }));
@@ -714,6 +768,10 @@ var GridVue2 = {
714
768
  if (item.expanded !== false && item.items) {
715
769
  allRowsCount = _this.addSubItems(item.items, allRowsCount);
716
770
  }
771
+
772
+ if (_this.$props.groupable.footer === 'always' || item.expanded !== false && _this.$props.groupable.footer === 'visible') {
773
+ allRowsCount++;
774
+ }
717
775
  });
718
776
  return allRowsCount;
719
777
  }
@@ -760,7 +818,7 @@ var GridVue2 = {
760
818
  if (Array.isArray(this.$props.dataItems)) {
761
819
  gridData = this.$props.dataItems;
762
820
  } else if (this.$props.dataItems) {
763
- gridData = this.$props.dataItems.data;
821
+ gridData = applyExpandedState(this.$props.dataItems, this.computedCollapsed, this.$props.uniqueField).data;
764
822
  total = total || this.$props.dataItems.total;
765
823
  }
766
824
 
@@ -771,10 +829,17 @@ var GridVue2 = {
771
829
  this.resetVirtual();
772
830
  this.vs.total = total;
773
831
 
774
- if (this.$props.rowHeight !== undefined && this.$props.rowHeight > 0 && !groupable) {
832
+ if (this.$props.rowHeight !== undefined && this.$props.rowHeight > 0 && !this.currentGroupable) {
775
833
  this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * (total || 0));
776
834
  } else {
777
- this.vs.containerHeight = 1533915; // this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * this.totalGroupedRows(gridData));
835
+ if (this.$props.totalGroupedHeight) {
836
+ this.vs.containerHeight = Math.min(1533915, this.$props.totalGroupedHeight);
837
+ } else if (this.$props.allGroupedItems) {
838
+ var allGroupedItems = this.totalGroupedRows(applyExpandedState(this.$props.allGroupedItems, this.computedCollapsed, this.$props.uniqueField).data);
839
+ this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * allGroupedItems);
840
+ } else {
841
+ this.vs.containerHeight = 1533915;
842
+ }
778
843
  }
779
844
 
780
845
  var children = defaultSlot || [];
@@ -1173,6 +1238,11 @@ var GridVue2 = {
1173
1238
  columnCellRenderFunction = templateRendering.call(this, column.cell, getListeners.call(this));
1174
1239
  }
1175
1240
 
1241
+ var isCollapsed = this.computedCollapsed && this.computedCollapsed[item.level] && this.computedCollapsed[item.level].some(function (c) {
1242
+ return c === groupedFirstItemValue(item.dataItem, _this.$props.uniqueField);
1243
+ });
1244
+ var isExpanded = isCollapsed ? !isCollapsed : item.expanded;
1245
+
1176
1246
  if (column.internalCell) {
1177
1247
  return h(column.internalCell, {
1178
1248
  key: index,
@@ -1193,7 +1263,7 @@ var GridVue2 = {
1193
1263
  }).length,
1194
1264
  rowType: item.rowType,
1195
1265
  level: item.level,
1196
- expanded: item.expanded,
1266
+ expanded: isExpanded,
1197
1267
  dataIndex: item.dataIndex,
1198
1268
  ariaColumnIndex: column.ariaColumnIndex,
1199
1269
  isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(index) > -1
@@ -1232,7 +1302,7 @@ var GridVue2 = {
1232
1302
  }).length,
1233
1303
  rowType: item.rowType,
1234
1304
  level: item.level,
1235
- expanded: item.expanded,
1305
+ expanded: isExpanded,
1236
1306
  dataIndex: item.dataIndex,
1237
1307
  style: style,
1238
1308
  ariaColumnIndex: column.ariaColumnIndex,
@@ -1261,7 +1331,7 @@ var GridVue2 = {
1261
1331
  }).length,
1262
1332
  rowType: item.rowType,
1263
1333
  level: item.level,
1264
- expanded: item.expanded,
1334
+ expanded: isExpanded,
1265
1335
  dataIndex: item.dataIndex
1266
1336
  },
1267
1337
  key: index,
@@ -1291,7 +1361,7 @@ var GridVue2 = {
1291
1361
  }).length,
1292
1362
  rowType: item.rowType,
1293
1363
  level: item.level,
1294
- expanded: item.expanded,
1364
+ expanded: isExpanded,
1295
1365
  dataIndex: item.dataIndex,
1296
1366
  style: style
1297
1367
  });
@@ -1318,7 +1388,7 @@ var GridVue2 = {
1318
1388
  }).length,
1319
1389
  rowType: item.rowType,
1320
1390
  level: item.level,
1321
- expanded: item.expanded,
1391
+ expanded: isExpanded,
1322
1392
  dataIndex: item.dataIndex
1323
1393
  },
1324
1394
  colSpan: colSpans[index],
@@ -1367,7 +1437,7 @@ var GridVue2 = {
1367
1437
  }).length,
1368
1438
  rowType: item.rowType,
1369
1439
  level: item.level,
1370
- expanded: item.expanded,
1440
+ expanded: isExpanded,
1371
1441
  dataIndex: item.dataIndex,
1372
1442
  style: style
1373
1443
  });
@@ -1380,8 +1450,10 @@ var GridVue2 = {
1380
1450
 
1381
1451
  var hiddenRows = 0;
1382
1452
 
1383
- if (this.$props.scrollable === 'virtual') {
1384
- for (var i = 0; i < this.vs.topCacheCount + this.vs.attendedSkip - (this.$props.skip || 0); i++) {
1453
+ if (this.$props.scrollable === 'virtual' && this.totalGroupedRows(this.currentData) / 2 > this.$props.take) {
1454
+ var topIndex = this.vs.topCacheCount + this.vs.attendedSkip - (this.$props.skip || 0);
1455
+
1456
+ for (var i = 0; i < topIndex; i++) {
1385
1457
  var item = this.currentData.shift();
1386
1458
 
1387
1459
  if (item) {
@@ -22,7 +22,7 @@ export declare class VirtualScroll {
22
22
  private syncTimeout;
23
23
  private tableTranslate;
24
24
  private scrollSyncing;
25
- constructor(cached: boolean);
25
+ constructor(cached: boolean, topCacheCount: number);
26
26
  /**
27
27
  * @return - The row heights in an array.
28
28
  */
@@ -2,7 +2,7 @@
2
2
  * @hidden
3
3
  */
4
4
  var VirtualScroll = /** @class */ (function () {
5
- function VirtualScroll(cached) {
5
+ function VirtualScroll(cached, topCacheCount) {
6
6
  this.containerHeight = 0;
7
7
  this.topCacheCount = 0; // 4;
8
8
  this.attendedSkip = 0; // -4;
@@ -18,7 +18,7 @@ var VirtualScroll = /** @class */ (function () {
18
18
  this.tableTranslate = 0;
19
19
  this.scrollSyncing = false;
20
20
  if (cached) {
21
- this.topCacheCount = 4;
21
+ this.topCacheCount = topCacheCount;
22
22
  this.attendedSkip = -this.topCacheCount;
23
23
  }
24
24
  this.scrollHandler = this.scrollHandler.bind(this);
@@ -61,6 +61,7 @@ var GridGroupCellVue2 = {
61
61
  dataItem: this.$props.dataItem,
62
62
  dataIndex: this.$props.dataIndex,
63
63
  event: event,
64
+ level: this.$props.level,
64
65
  field: undefined,
65
66
  value: !expanded
66
67
  });
@@ -72,6 +73,7 @@ var GridGroupCellVue2 = {
72
73
  dataItem: dataItem,
73
74
  dataIndex: this.$props.dataIndex,
74
75
  event: e,
76
+ level: this.$props.level,
75
77
  field: undefined,
76
78
  value: !expanded
77
79
  });
@@ -84,7 +84,7 @@ export interface GridCellProps {
84
84
  /**
85
85
  * The event that is fired when the cell value is changed.
86
86
  */
87
- change?: (event: {
87
+ onChange?: (event: {
88
88
  dataItem: any;
89
89
  event: any;
90
90
  field?: string;
@@ -93,7 +93,7 @@ export interface GridCellProps {
93
93
  /**
94
94
  * The event that is fired when the keydown event of the cell is triggered.
95
95
  */
96
- cellkeydown?: (event: {
96
+ onCellkeydown?: (event: {
97
97
  event: any;
98
98
  dataItem: any;
99
99
  field: string;
@@ -101,20 +101,20 @@ export interface GridCellProps {
101
101
  /**
102
102
  * The event that is fired when the cell is clicked.
103
103
  */
104
- cellclick?: (event: {
104
+ onCellclick?: (event: {
105
105
  dataItem: any;
106
106
  field: string;
107
107
  }) => void;
108
108
  /**
109
109
  * The event that is fired when the cell is about to be added.
110
110
  */
111
- add?: (event: {
111
+ onAdd?: (event: {
112
112
  dataItem: any;
113
113
  }) => void;
114
114
  /**
115
115
  * The event that is fired when the cell is about to be edited.
116
116
  */
117
- edit?: (event: {
117
+ onEdit?: (event: {
118
118
  dataItem: any;
119
119
  }) => void;
120
120
  /**
@@ -132,7 +132,7 @@ export interface GridCellProps {
132
132
  /**
133
133
  * The event that is fired when the cell is about to be canceled.
134
134
  */
135
- cancel?: (event: {
135
+ onCancel?: (event: {
136
136
  dataItem: any;
137
137
  }) => void;
138
138
  /**
@@ -10,7 +10,7 @@ export interface GridColumnMenuExtendedFilterProps extends GridColumnMenuFilterP
10
10
  /**
11
11
  * Triggered on each subsequent expand state of the filter component.
12
12
  */
13
- onExpandChange?: (nextExpandState: boolean) => void;
13
+ onExpandchange?: (nextExpandState: boolean) => void;
14
14
  /**
15
15
  * If set to `false`, the second filter operator and the input will be hidden.
16
16
  */
@@ -23,5 +23,5 @@ export interface GridColumnMenuFilterProps {
23
23
  /**
24
24
  * The method that will be called to notify the parent Grid about a filter change.
25
25
  */
26
- onFilterChange?: (filter: CompositeFilterDescriptor | null, event: any) => any;
26
+ onFilterchange?: (filter: CompositeFilterDescriptor | null, event: any) => any;
27
27
  }
@@ -28,7 +28,7 @@ export interface GridColumnMenuFilterUIProps {
28
28
  /**
29
29
  * The method that will be called to notify the parent about a change in the filter logic.
30
30
  */
31
- onLogicChange?: (e: any) => void;
31
+ onLogicchange?: (e: any) => void;
32
32
  /**
33
33
  * The method that will be called to notify the parent about a change in the filter.
34
34
  */
@@ -43,7 +43,7 @@ export interface GridProps {
43
43
  * Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid_native %})).
44
44
  * You have to handle the event yourself and sort the data.
45
45
  */
46
- sortchange?: (event: GridSortChangeEvent) => void;
46
+ onSortchange?: (event: GridSortChangeEvent) => void;
47
47
  /**
48
48
  * The descriptors by which the data is sorted.
49
49
  * Applies the sorting styles and buttons to the affected columns.
@@ -69,7 +69,7 @@ export interface GridProps {
69
69
  * ([more information and examples]({% slug filtering_grid_native %})).
70
70
  * You have to handle the event yourself and filter the data.
71
71
  */
72
- filterchange?: (event: GridFilterChangeEvent) => void;
72
+ onFilterchange?: (event: GridFilterChangeEvent) => void;
73
73
  /**
74
74
  * Defines if the column menu will be shown for the column.
75
75
  * Accepts Boolean, a Vue component, a `render` function, or a slot name
@@ -88,7 +88,7 @@ export interface GridProps {
88
88
  * Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data
89
89
  * ([more information and examples]({% slug groupingbasics_grid_native %})).
90
90
  */
91
- groupchange?: (event: GridGroupChangeEvent) => void;
91
+ onGroupchange?: (event: GridGroupChangeEvent) => void;
92
92
  /**
93
93
  * Configures the pager of the Grid ([see example]({% slug paging_grid_native %})).
94
94
  *
@@ -114,7 +114,7 @@ export interface GridProps {
114
114
  * Fires when the page of the Grid is changed ([see example]({% slug paging_grid_native %})).
115
115
  * You have to handle the event yourself and page the data.
116
116
  */
117
- pagechange?: (event: GridPageChangeEvent) => void;
117
+ onPagechange?: (event: GridPageChangeEvent) => void;
118
118
  /**
119
119
  * Defines the total number of data items in all pages
120
120
  * ([see example]({% slug paging_grid_native %})). Required by the paging functionality.
@@ -128,7 +128,7 @@ export interface GridProps {
128
128
  /**
129
129
  * Fires when the user tries to expand or collapse a row.
130
130
  */
131
- expandchange?: (event: GridExpandChangeEvent) => void;
131
+ onExpandchange?: (event: GridExpandChangeEvent) => void;
132
132
  /**
133
133
  * Specifies the name of the field which will provide a Boolean representation
134
134
  * of the expanded state of the item ([see example]({% slug detailrow_grid_native %}).
@@ -143,50 +143,50 @@ export interface GridProps {
143
143
  * Fires when the user tries to select or deselect a row
144
144
  * ([see example]({% slug selection_grid_native %})).
145
145
  */
146
- selectionchange?: (event: GridSelectionChangeEvent) => void;
146
+ onSelectionchange?: (event: GridSelectionChangeEvent) => void;
147
147
  /**
148
148
  * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`.
149
149
  * ([see example]({% slug selection_grid_native %})).
150
150
  */
151
- headerselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
151
+ onHeaderselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
152
152
  /**
153
153
  * Fires when the user clicks a row.
154
154
  */
155
- rowclick?: (event: GridRowClickEvent) => void;
155
+ onRowclick?: (event: GridRowClickEvent) => void;
156
156
  /**
157
157
  * Fires when the user double clicks a row.
158
158
  */
159
- rowdblclick?: (event: GridRowClickEvent) => void;
159
+ onRowdblclick?: (event: GridRowClickEvent) => void;
160
160
  /**
161
161
  * Fires when the user clicks a cell.
162
162
  */
163
- cellclick?: (event: any) => void;
163
+ onCellclick?: (event: any) => void;
164
164
  /**
165
165
  * Fires when Grid is scrolled.
166
166
  */
167
- scroll?: (event: any) => void;
167
+ onScroll?: (event: any) => void;
168
168
  /**
169
169
  * Fires when the user triggers an edit operation from a cell.
170
170
  */
171
- edit?: (event: GridEditEvent) => void;
171
+ onEdit?: (event: GridEditEvent) => void;
172
172
  /**
173
173
  * Fires when the user triggers a removal operation from a cell.
174
174
  */
175
- remove?: (event: GridRemoveEvent) => void;
175
+ onRemove?: (event: GridRemoveEvent) => void;
176
176
  /**
177
177
  * Fires when the user triggers a saving operation from a cell.
178
178
  */
179
- save?: (event: GridSaveEvent) => void;
179
+ onSave?: (event: GridSaveEvent) => void;
180
180
  /**
181
181
  * Fires when the user triggers a canceling operation from a cell.
182
182
  */
183
- cancel?: (event: GridCancelEvent) => void;
183
+ onCancel?: (event: GridCancelEvent) => void;
184
184
  /**
185
185
  * Fires when the user changes the values of the item.
186
186
  * The event is not debounced and fires on every `onChange` event of the input in the current `EditCell`.
187
187
  * ([more information and examples]({% slug editing_inline_grid_native %})).
188
188
  */
189
- itemchange?: (event: GridItemChangeEvent) => void;
189
+ onItemchange?: (event: GridItemChangeEvent) => void;
190
190
  /**
191
191
  * Specifies the name of the field which will provide a Boolean representation of the edit state of the current
192
192
  * item ([more information and examples]({% slug editing_inline_grid_native %})).
@@ -221,7 +221,7 @@ export interface GridProps {
221
221
  /**
222
222
  * Fires when the data state of the Grid is changed.
223
223
  */
224
- datastatechange?: (event: GridDataStateChangeEvent) => void;
224
+ onDatastatechange?: (event: GridDataStateChangeEvent) => void;
225
225
  /**
226
226
  * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their
227
227
  * header cells ([see example]({% slug resizing_columns_grid_native %}).
@@ -240,11 +240,11 @@ export interface GridProps {
240
240
  /**
241
241
  * Fires when a column is resized
242
242
  */
243
- columnresize?: (event: GridColumnResizeEvent) => void;
243
+ onColumnresize?: (event: GridColumnResizeEvent) => void;
244
244
  /**
245
245
  * Fires when columns are reordered.
246
246
  */
247
- columnreorder?: (event: GridColumnReorderEvent) => void;
247
+ onColumnreorder?: (event: GridColumnReorderEvent) => void;
248
248
  /**
249
249
  * Defines the custom rendering of the row. Accepts a Vue component, a `render` function, or a slot name.
250
250
  */
@@ -276,14 +276,32 @@ export interface GridProps {
276
276
  * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
277
277
  */
278
278
  navigatable?: boolean;
279
- }
280
- export interface GridEmits {
279
+ /**
280
+ * Passes the number of cached top items needed for the grouping virtualization scenario. Defaults to 4.
281
+ */
282
+ topCacheCount?: Number;
283
+ /**
284
+ * Passes the calculated height of all the items in the Grid grouped hierarchy.
285
+ */
286
+ totalGroupedHeight?: Number;
287
+ /**
288
+ * Passes the collection of all grouped items that is needed for the virtualization scenario.
289
+ */
290
+ allGroupedItems?: any[];
291
+ /**
292
+ * Passes the collection of all collapsed groups for every grouped level.
293
+ */
294
+ collapsedGroups?: any[][];
295
+ /**
296
+ * Specifies the name of the field which will provide a unique for every item identifier.
297
+ */
298
+ uniqueField?: string;
281
299
  /**
282
300
  * Fires when Grid keyboard navigation position is changed.
283
301
  */
284
- navigationaction?: (event: GridNavigationActionEvent) => void;
302
+ onNavigationaction?: (event: GridNavigationActionEvent) => void;
285
303
  /**
286
304
  * Fires when the user press keyboard key.
287
305
  */
288
- keydown?: (event: GridKeyDownEvent) => void;
306
+ onKeydown?: (event: GridKeyDownEvent) => void;
289
307
  }
@@ -62,6 +62,10 @@ export interface GridGroupChangeEvent extends GridEvent {
62
62
  * Represents the object of the `onExpandChange` event.
63
63
  */
64
64
  export interface GridExpandChangeEvent extends GridEvent {
65
+ /**
66
+ * The array with collapsed groups.
67
+ */
68
+ collapsed?: string[];
65
69
  /**
66
70
  * The data item that is expanded or collapsed.
67
71
  */
package/dist/es/main.d.ts CHANGED
@@ -34,4 +34,5 @@ import { GridGroupableSettings } from './interfaces/GridGroupableSettings';
34
34
  import { GridColumnMenuItem, GridColumnMenuItemVue2 } from './columnMenu/GridColumnMenuItem';
35
35
  import { GridColumnMenuItemContent, GridColumnMenuItemContentVue2 } from './columnMenu/GridColumnMenuItemContent';
36
36
  import { GridColumnMenuItemGroup, GridColumnMenuItemGroupVue2 } from './columnMenu/GridColumnMenuItemGroup';
37
+ export * from './utils/index';
37
38
  export { Grid, GridVue2, GridProps, GridColumnProps, GridCellProps, GridCell, GridCellVue2, GridEditCell, GridEditCellVue2, GridGroupCell, GridHierarchyCell, GridGroupCellVue2, GridHierarchyCellVue2, GridDetailRow, GridDetailRowVue2, GridDetailRowProps, GridRow, GridRowVue2, GridRowProps, GridFilterCell, GridFilterCellVue2, GridFilterCellProps, GridHeaderCell, GridHeaderCellVue2, GridHeaderCellProps, Footer, FooterRow, FooterVue2, FooterRowVue2, GridFooterCellProps, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuSortVue2, sortGroupByField, GridColumnMenuFilter, GridColumnMenuFilterVue2, filterGroupByField, GridColumnMenuItem, GridColumnMenuItemVue2, GridColumnMenuItemContent, GridColumnMenuItemContentVue2, GridColumnMenuItemGroup, GridColumnMenuItemGroupVue2, GridColumnMenuFilterUI, GridColumnMenuFilterUIVue2, GridColumnMenuFilterCell, GridColumnMenuFilterCellVue2, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterVue2, GridColumnMenuCheckboxFilterProps, GridToolbar, GridToolbarVue2, GridToolbarProps, GridNoRecords, GridNoRecordsVue2, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridPageChangeEvent, GridDataStateChangeEvent, GridFilterChangeEvent, GridSortChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridItemChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent };
package/dist/es/main.js CHANGED
@@ -19,6 +19,7 @@ import { GridNoRecords, GridNoRecordsVue2 } from './GridNoRecords';
19
19
  import { GridColumnMenuItem, GridColumnMenuItemVue2 } from './columnMenu/GridColumnMenuItem';
20
20
  import { GridColumnMenuItemContent, GridColumnMenuItemContentVue2 } from './columnMenu/GridColumnMenuItemContent';
21
21
  import { GridColumnMenuItemGroup, GridColumnMenuItemGroupVue2 } from './columnMenu/GridColumnMenuItemGroup';
22
+ export * from './utils/index';
22
23
  export { Grid, GridVue2, GridCell, GridCellVue2, GridEditCell, GridEditCellVue2, GridGroupCell, GridHierarchyCell, GridGroupCellVue2, GridHierarchyCellVue2, GridDetailRow, GridDetailRowVue2, GridRow, GridRowVue2, GridFilterCell, GridFilterCellVue2, GridHeaderCell, GridHeaderCellVue2, Footer, FooterRow, FooterVue2, FooterRowVue2, GridColumnMenuSort, GridColumnMenuSortVue2, sortGroupByField, GridColumnMenuFilter, GridColumnMenuFilterVue2, filterGroupByField, GridColumnMenuItem, GridColumnMenuItemVue2, GridColumnMenuItemContent, GridColumnMenuItemContentVue2, GridColumnMenuItemGroup, GridColumnMenuItemGroupVue2, GridColumnMenuFilterUI, GridColumnMenuFilterUIVue2, GridColumnMenuFilterCell, GridColumnMenuFilterCellVue2, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterVue2, GridToolbar, GridToolbarVue2, GridNoRecords, GridNoRecordsVue2 };
23
24
  // Automatic installation if Vue has been added to the global scope.
24
25
  var vue = 'Vue';
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-vue-grid',
6
6
  productName: 'Kendo UI for Vue',
7
7
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
8
- publishDate: 1643698567,
8
+ publishDate: 1644325857,
9
9
  version: '',
10
10
  licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
11
11
  };
@@ -81,3 +81,11 @@ export declare const parsers: {
81
81
  string: (value: any) => any;
82
82
  default: (value: any) => any;
83
83
  };
84
+ /**
85
+ * @hidden
86
+ */
87
+ export declare function applyExpandedState(sdata: DataResult, collapsed: any[], uniqueField: string): DataResult;
88
+ /**
89
+ * @hidden
90
+ */
91
+ export declare function groupedFirstItemValue(item: any, field: string): any;
@@ -353,3 +353,39 @@ export var parsers = {
353
353
  return value;
354
354
  }
355
355
  };
356
+ /**
357
+ * @hidden
358
+ */
359
+ function updateItemsExpanded(items, collapsed, uniqueField, level) {
360
+ items.forEach(function (di) {
361
+ di.expanded = collapsed[level] && !collapsed[level].includes(groupedFirstItemValue(di, uniqueField));
362
+ if (di.items && di.items.length) {
363
+ di.items = updateItemsExpanded(di.items, collapsed, uniqueField, level + 1);
364
+ }
365
+ });
366
+ return items;
367
+ }
368
+ /**
369
+ * @hidden
370
+ */
371
+ export function applyExpandedState(sdata, collapsed, uniqueField) {
372
+ if (collapsed && collapsed.length) {
373
+ sdata.data.forEach(function (di) {
374
+ di.expanded = collapsed[0] && !collapsed[0].includes(groupedFirstItemValue(di, uniqueField));
375
+ if (di.items && di.items.length) {
376
+ di.items = updateItemsExpanded(di.items, collapsed, uniqueField, 1);
377
+ }
378
+ });
379
+ }
380
+ return sdata;
381
+ }
382
+ /**
383
+ * @hidden
384
+ */
385
+ export function groupedFirstItemValue(item, field) {
386
+ var resultItem = item;
387
+ while (resultItem.items && resultItem.items.length) {
388
+ resultItem = resultItem.items[0];
389
+ }
390
+ return field ? resultItem[field] : item.value;
391
+ }