@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.
- package/dist/cdn/js/kendo-vue-grid.js +1 -1
- package/dist/es/Grid.d.ts +4 -2
- package/dist/es/Grid.js +95 -23
- package/dist/es/VirtualScroll.d.ts +1 -1
- package/dist/es/VirtualScroll.js +2 -2
- package/dist/es/cells/GridGroupCell.js +2 -0
- package/dist/es/interfaces/GridCellProps.d.ts +6 -6
- package/dist/es/interfaces/GridColumnMenuExtendedFilterProps.d.ts +1 -1
- package/dist/es/interfaces/GridColumnMenuFilterProps.d.ts +1 -1
- package/dist/es/interfaces/GridColumnMenuFilterUIProps.d.ts +1 -1
- package/dist/es/interfaces/GridProps.d.ts +41 -23
- package/dist/es/interfaces/events.d.ts +4 -0
- package/dist/es/main.d.ts +1 -0
- package/dist/es/main.js +1 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/utils/index.d.ts +8 -0
- package/dist/es/utils/index.js +36 -0
- package/dist/npm/Grid.d.ts +4 -2
- package/dist/npm/Grid.js +95 -23
- package/dist/npm/VirtualScroll.d.ts +1 -1
- package/dist/npm/VirtualScroll.js +2 -2
- package/dist/npm/cells/GridGroupCell.js +2 -0
- package/dist/npm/interfaces/GridCellProps.d.ts +6 -6
- package/dist/npm/interfaces/GridColumnMenuExtendedFilterProps.d.ts +1 -1
- package/dist/npm/interfaces/GridColumnMenuFilterProps.d.ts +1 -1
- package/dist/npm/interfaces/GridColumnMenuFilterUIProps.d.ts +1 -1
- package/dist/npm/interfaces/GridProps.d.ts +41 -23
- package/dist/npm/interfaces/events.d.ts +4 -0
- package/dist/npm/main.d.ts +1 -0
- package/dist/npm/main.js +11 -0
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/utils/index.d.ts +8 -0
- package/dist/npm/utils/index.js +39 -1
- 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
|
|
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, {}, {},
|
|
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';
|
|
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';
|
|
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
|
|
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
|
|
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
|
|
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 && !
|
|
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
|
-
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
-
|
|
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) {
|
package/dist/es/VirtualScroll.js
CHANGED
|
@@ -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 =
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
151
|
+
onHeaderselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
|
|
152
152
|
/**
|
|
153
153
|
* Fires when the user clicks a row.
|
|
154
154
|
*/
|
|
155
|
-
|
|
155
|
+
onRowclick?: (event: GridRowClickEvent) => void;
|
|
156
156
|
/**
|
|
157
157
|
* Fires when the user double clicks a row.
|
|
158
158
|
*/
|
|
159
|
-
|
|
159
|
+
onRowdblclick?: (event: GridRowClickEvent) => void;
|
|
160
160
|
/**
|
|
161
161
|
* Fires when the user clicks a cell.
|
|
162
162
|
*/
|
|
163
|
-
|
|
163
|
+
onCellclick?: (event: any) => void;
|
|
164
164
|
/**
|
|
165
165
|
* Fires when Grid is scrolled.
|
|
166
166
|
*/
|
|
167
|
-
|
|
167
|
+
onScroll?: (event: any) => void;
|
|
168
168
|
/**
|
|
169
169
|
* Fires when the user triggers an edit operation from a cell.
|
|
170
170
|
*/
|
|
171
|
-
|
|
171
|
+
onEdit?: (event: GridEditEvent) => void;
|
|
172
172
|
/**
|
|
173
173
|
* Fires when the user triggers a removal operation from a cell.
|
|
174
174
|
*/
|
|
175
|
-
|
|
175
|
+
onRemove?: (event: GridRemoveEvent) => void;
|
|
176
176
|
/**
|
|
177
177
|
* Fires when the user triggers a saving operation from a cell.
|
|
178
178
|
*/
|
|
179
|
-
|
|
179
|
+
onSave?: (event: GridSaveEvent) => void;
|
|
180
180
|
/**
|
|
181
181
|
* Fires when the user triggers a canceling operation from a cell.
|
|
182
182
|
*/
|
|
183
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
243
|
+
onColumnresize?: (event: GridColumnResizeEvent) => void;
|
|
244
244
|
/**
|
|
245
245
|
* Fires when columns are reordered.
|
|
246
246
|
*/
|
|
247
|
-
|
|
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
|
-
|
|
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
|
-
|
|
302
|
+
onNavigationaction?: (event: GridNavigationActionEvent) => void;
|
|
285
303
|
/**
|
|
286
304
|
* Fires when the user press keyboard key.
|
|
287
305
|
*/
|
|
288
|
-
|
|
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:
|
|
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
|
};
|
package/dist/es/utils/index.d.ts
CHANGED
|
@@ -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;
|
package/dist/es/utils/index.js
CHANGED
|
@@ -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
|
+
}
|