@progress/kendo-vue-grid 3.3.3 → 3.3.5-dev.202206141337
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 +35 -2
- package/dist/es/Grid.js +41 -9
- package/dist/es/GridNav.d.ts +4 -1
- package/dist/es/GridNav.js +5 -1
- package/dist/es/GridNoRecords.d.ts +4 -1
- package/dist/es/GridNoRecords.js +30 -26
- package/dist/es/GridToolbar.d.ts +46 -4
- package/dist/es/GridToolbar.js +48 -6
- package/dist/es/additionalTypes.ts +11 -0
- package/dist/es/cells/GridCell.d.ts +4 -1
- package/dist/es/cells/GridCell.js +5 -1
- package/dist/es/cells/GridDetailCell.d.ts +4 -1
- package/dist/es/cells/GridDetailCell.js +5 -1
- package/dist/es/cells/GridDetailHierarchyCell.d.ts +4 -1
- package/dist/es/cells/GridDetailHierarchyCell.js +5 -1
- package/dist/es/cells/GridEditCell.d.ts +4 -1
- package/dist/es/cells/GridEditCell.js +5 -1
- package/dist/es/cells/GridFilterCell.d.ts +4 -1
- package/dist/es/cells/GridFilterCell.js +5 -1
- package/dist/es/cells/GridGroupCell.d.ts +4 -1
- package/dist/es/cells/GridGroupCell.js +5 -1
- package/dist/es/cells/GridHierarchyCell.d.ts +4 -1
- package/dist/es/cells/GridHierarchyCell.js +5 -1
- package/dist/es/cells/GridSelectionCell.d.ts +4 -1
- package/dist/es/cells/GridSelectionCell.js +5 -1
- package/dist/es/columnMenu/ColumnMenu.d.ts +4 -1
- package/dist/es/columnMenu/ColumnMenu.js +5 -1
- package/dist/es/columnMenu/ColumnMenuContent.d.ts +4 -1
- package/dist/es/columnMenu/ColumnMenuContent.js +5 -1
- package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.d.ts +4 -1
- package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.js +114 -79
- package/dist/es/columnMenu/GridColumnMenuFilter.d.ts +138 -2
- package/dist/es/columnMenu/GridColumnMenuFilter.js +139 -2
- package/dist/es/columnMenu/GridColumnMenuFilterCell.d.ts +4 -1
- package/dist/es/columnMenu/GridColumnMenuFilterCell.js +5 -1
- package/dist/es/columnMenu/GridColumnMenuFilterUI.d.ts +4 -1
- package/dist/es/columnMenu/GridColumnMenuFilterUI.js +5 -1
- package/dist/es/columnMenu/GridColumnMenuItem.d.ts +4 -1
- package/dist/es/columnMenu/GridColumnMenuItem.js +5 -1
- package/dist/es/columnMenu/GridColumnMenuItemContent.d.ts +4 -1
- package/dist/es/columnMenu/GridColumnMenuItemContent.js +5 -1
- package/dist/es/columnMenu/GridColumnMenuItemGroup.d.ts +4 -1
- package/dist/es/columnMenu/GridColumnMenuItemGroup.js +5 -1
- package/dist/es/columnMenu/GridColumnMenuSort.d.ts +135 -2
- package/dist/es/columnMenu/GridColumnMenuSort.js +136 -2
- package/dist/es/drag/ColumnDraggable.d.ts +4 -1
- package/dist/es/drag/ColumnDraggable.js +5 -1
- package/dist/es/drag/ColumnResizer.d.ts +4 -1
- package/dist/es/drag/ColumnResizer.js +5 -1
- package/dist/es/drag/DragClue.d.ts +4 -1
- package/dist/es/drag/DragClue.js +5 -1
- package/dist/es/drag/DropClue.d.ts +4 -1
- package/dist/es/drag/DropClue.js +5 -1
- package/dist/es/drag/GroupingIndicator.d.ts +4 -1
- package/dist/es/drag/GroupingIndicator.js +5 -1
- package/dist/es/footer/Footer.d.ts +6 -0
- package/dist/es/footer/Footer.js +8 -0
- package/dist/es/footer/FooterRow.d.ts +6 -0
- package/dist/es/footer/FooterRow.js +8 -0
- package/dist/es/header/FilterRow.d.ts +4 -1
- package/dist/es/header/FilterRow.js +5 -1
- package/dist/es/header/GridHeaderCell.d.ts +4 -1
- package/dist/es/header/GridHeaderCell.js +5 -1
- package/dist/es/header/GridHeaderSelectionCell.d.ts +4 -1
- package/dist/es/header/GridHeaderSelectionCell.js +5 -1
- package/dist/es/header/GroupPanel.d.ts +4 -1
- package/dist/es/header/GroupPanel.js +5 -1
- package/dist/es/header/Header.d.ts +4 -1
- package/dist/es/header/Header.js +5 -1
- package/dist/es/header/HeaderRow.d.ts +4 -1
- package/dist/es/header/HeaderRow.js +5 -1
- package/dist/es/interfaces/GridCellProps.d.ts +2 -2
- package/dist/es/interfaces/GridColumnMenuFilterBaseProps.d.ts +8 -0
- package/dist/es/interfaces/GridColumnProps.d.ts +2 -2
- package/dist/es/interfaces/GridDetailRowProps.d.ts +0 -4
- package/dist/es/interfaces/GridFilterCellProps.d.ts +1 -1
- package/dist/es/interfaces/GridGroupableSettings.d.ts +1 -1
- package/dist/es/interfaces/GridProps.d.ts +27 -27
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/rows/GridDetailRow.d.ts +2 -5
- package/dist/es/rows/GridDetailRow.js +4 -7
- package/dist/es/rows/GridRow.d.ts +4 -1
- package/dist/es/rows/GridRow.js +5 -1
- package/dist/npm/Grid.d.ts +35 -2
- package/dist/npm/Grid.js +40 -8
- package/dist/npm/GridNav.d.ts +4 -1
- package/dist/npm/GridNav.js +5 -1
- package/dist/npm/GridNoRecords.d.ts +4 -1
- package/dist/npm/GridNoRecords.js +32 -28
- package/dist/npm/GridToolbar.d.ts +46 -4
- package/dist/npm/GridToolbar.js +48 -6
- package/dist/npm/additionalTypes.ts +11 -0
- package/dist/npm/cells/GridCell.d.ts +4 -1
- package/dist/npm/cells/GridCell.js +5 -1
- package/dist/npm/cells/GridDetailCell.d.ts +4 -1
- package/dist/npm/cells/GridDetailCell.js +5 -1
- package/dist/npm/cells/GridDetailHierarchyCell.d.ts +4 -1
- package/dist/npm/cells/GridDetailHierarchyCell.js +5 -1
- package/dist/npm/cells/GridEditCell.d.ts +4 -1
- package/dist/npm/cells/GridEditCell.js +5 -1
- package/dist/npm/cells/GridFilterCell.d.ts +4 -1
- package/dist/npm/cells/GridFilterCell.js +5 -1
- package/dist/npm/cells/GridGroupCell.d.ts +4 -1
- package/dist/npm/cells/GridGroupCell.js +5 -1
- package/dist/npm/cells/GridHierarchyCell.d.ts +4 -1
- package/dist/npm/cells/GridHierarchyCell.js +5 -1
- package/dist/npm/cells/GridSelectionCell.d.ts +4 -1
- package/dist/npm/cells/GridSelectionCell.js +5 -1
- package/dist/npm/columnMenu/ColumnMenu.d.ts +4 -1
- package/dist/npm/columnMenu/ColumnMenu.js +5 -1
- package/dist/npm/columnMenu/ColumnMenuContent.d.ts +4 -1
- package/dist/npm/columnMenu/ColumnMenuContent.js +5 -1
- package/dist/npm/columnMenu/GridColumnMenuCheckboxFilter.d.ts +4 -1
- package/dist/npm/columnMenu/GridColumnMenuCheckboxFilter.js +113 -78
- package/dist/npm/columnMenu/GridColumnMenuFilter.d.ts +138 -2
- package/dist/npm/columnMenu/GridColumnMenuFilter.js +139 -2
- package/dist/npm/columnMenu/GridColumnMenuFilterCell.d.ts +4 -1
- package/dist/npm/columnMenu/GridColumnMenuFilterCell.js +5 -1
- package/dist/npm/columnMenu/GridColumnMenuFilterUI.d.ts +4 -1
- package/dist/npm/columnMenu/GridColumnMenuFilterUI.js +5 -1
- package/dist/npm/columnMenu/GridColumnMenuItem.d.ts +4 -1
- package/dist/npm/columnMenu/GridColumnMenuItem.js +5 -1
- package/dist/npm/columnMenu/GridColumnMenuItemContent.d.ts +4 -1
- package/dist/npm/columnMenu/GridColumnMenuItemContent.js +5 -1
- package/dist/npm/columnMenu/GridColumnMenuItemGroup.d.ts +4 -1
- package/dist/npm/columnMenu/GridColumnMenuItemGroup.js +5 -1
- package/dist/npm/columnMenu/GridColumnMenuSort.d.ts +135 -2
- package/dist/npm/columnMenu/GridColumnMenuSort.js +136 -2
- package/dist/npm/drag/ColumnDraggable.d.ts +4 -1
- package/dist/npm/drag/ColumnDraggable.js +5 -1
- package/dist/npm/drag/ColumnResizer.d.ts +4 -1
- package/dist/npm/drag/ColumnResizer.js +5 -1
- package/dist/npm/drag/DragClue.d.ts +4 -1
- package/dist/npm/drag/DragClue.js +5 -1
- package/dist/npm/drag/DropClue.d.ts +4 -1
- package/dist/npm/drag/DropClue.js +5 -1
- package/dist/npm/drag/GroupingIndicator.d.ts +4 -1
- package/dist/npm/drag/GroupingIndicator.js +5 -1
- package/dist/npm/footer/Footer.d.ts +6 -0
- package/dist/npm/footer/Footer.js +8 -0
- package/dist/npm/footer/FooterRow.d.ts +6 -0
- package/dist/npm/footer/FooterRow.js +8 -0
- package/dist/npm/header/FilterRow.d.ts +4 -1
- package/dist/npm/header/FilterRow.js +5 -1
- package/dist/npm/header/GridHeaderCell.d.ts +4 -1
- package/dist/npm/header/GridHeaderCell.js +5 -1
- package/dist/npm/header/GridHeaderSelectionCell.d.ts +4 -1
- package/dist/npm/header/GridHeaderSelectionCell.js +5 -1
- package/dist/npm/header/GroupPanel.d.ts +4 -1
- package/dist/npm/header/GroupPanel.js +5 -1
- package/dist/npm/header/Header.d.ts +4 -1
- package/dist/npm/header/Header.js +5 -1
- package/dist/npm/header/HeaderRow.d.ts +4 -1
- package/dist/npm/header/HeaderRow.js +5 -1
- package/dist/npm/interfaces/GridCellProps.d.ts +2 -2
- package/dist/npm/interfaces/GridColumnMenuFilterBaseProps.d.ts +8 -0
- package/dist/npm/interfaces/GridColumnProps.d.ts +2 -2
- package/dist/npm/interfaces/GridDetailRowProps.d.ts +0 -4
- package/dist/npm/interfaces/GridFilterCellProps.d.ts +1 -1
- package/dist/npm/interfaces/GridGroupableSettings.d.ts +1 -1
- package/dist/npm/interfaces/GridProps.d.ts +27 -27
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/rows/GridDetailRow.d.ts +2 -5
- package/dist/npm/rows/GridDetailRow.js +4 -7
- package/dist/npm/rows/GridRow.d.ts +4 -1
- package/dist/npm/rows/GridRow.js +5 -1
- package/package.json +14 -14
|
@@ -12,7 +12,7 @@ var gh = allVue.h;
|
|
|
12
12
|
|
|
13
13
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
15
|
+
* @hidden
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
|
|
@@ -64,5 +64,9 @@ var GridColumnMenuItemVue2 = {
|
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
66
|
exports.GridColumnMenuItemVue2 = GridColumnMenuItemVue2;
|
|
67
|
+
/**
|
|
68
|
+
* @hidden
|
|
69
|
+
*/
|
|
70
|
+
|
|
67
71
|
var GridColumnMenuItem = GridColumnMenuItemVue2;
|
|
68
72
|
exports.GridColumnMenuItem = GridColumnMenuItem;
|
|
@@ -24,8 +24,11 @@ export interface GridColumnMenuItemContentMethods extends Vue2type {
|
|
|
24
24
|
triggerRemove: (dataItem: any) => void;
|
|
25
25
|
}
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* @hidden
|
|
28
28
|
*/
|
|
29
29
|
declare let GridColumnMenuItemContentVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridColumnMenuItemContentMethods>, {}, RecordPropsDefinition<GridColumnMenuItemContentProps>>;
|
|
30
|
+
/**
|
|
31
|
+
* @hidden
|
|
32
|
+
*/
|
|
30
33
|
declare const GridColumnMenuItemContent: DefineComponent<GridColumnMenuItemContentProps, any, {}, {}, GridColumnMenuItemContentMethods, {}, {}, {}, string, GridColumnMenuItemContentProps, GridColumnMenuItemContentProps, {}>;
|
|
31
34
|
export { GridColumnMenuItemContent, GridColumnMenuItemContentVue2 };
|
|
@@ -14,7 +14,7 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
|
14
14
|
|
|
15
15
|
var kendo_vue_animation_1 = require("@progress/kendo-vue-animation");
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* @hidden
|
|
18
18
|
*/
|
|
19
19
|
|
|
20
20
|
|
|
@@ -53,5 +53,9 @@ var GridColumnMenuItemContentVue2 = {
|
|
|
53
53
|
}
|
|
54
54
|
};
|
|
55
55
|
exports.GridColumnMenuItemContentVue2 = GridColumnMenuItemContentVue2;
|
|
56
|
+
/**
|
|
57
|
+
* @hidden
|
|
58
|
+
*/
|
|
59
|
+
|
|
56
60
|
var GridColumnMenuItemContent = GridColumnMenuItemContentVue2;
|
|
57
61
|
exports.GridColumnMenuItemContent = GridColumnMenuItemContent;
|
|
@@ -9,8 +9,11 @@ declare type DefaultMethods<V> = {
|
|
|
9
9
|
export interface GridColumnMenuItemGroupProps {
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* @hidden
|
|
13
13
|
*/
|
|
14
14
|
declare let GridColumnMenuItemGroupVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<GridColumnMenuItemGroupProps>>;
|
|
15
|
+
/**
|
|
16
|
+
* @hidden
|
|
17
|
+
*/
|
|
15
18
|
declare const GridColumnMenuItemGroup: DefineComponent<GridColumnMenuItemGroupProps, any, {}, {}, {}, {}, {}, {}, string, GridColumnMenuItemGroupProps, GridColumnMenuItemGroupProps, {}>;
|
|
16
19
|
export { GridColumnMenuItemGroup, GridColumnMenuItemGroupVue2 };
|
|
@@ -12,7 +12,7 @@ var gh = allVue.h;
|
|
|
12
12
|
|
|
13
13
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
15
|
+
* @hidden
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
|
|
@@ -34,5 +34,9 @@ var GridColumnMenuItemGroupVue2 = {
|
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
exports.GridColumnMenuItemGroupVue2 = GridColumnMenuItemGroupVue2;
|
|
37
|
+
/**
|
|
38
|
+
* @hidden
|
|
39
|
+
*/
|
|
40
|
+
|
|
37
41
|
var GridColumnMenuItemGroup = GridColumnMenuItemGroupVue2;
|
|
38
42
|
exports.GridColumnMenuItemGroup = GridColumnMenuItemGroup;
|
|
@@ -6,7 +6,7 @@ declare type DefaultMethods<V> = {
|
|
|
6
6
|
import { SortDescriptor } from '@progress/kendo-data-query';
|
|
7
7
|
import { GridColumnMenuSortBaseProps } from '../interfaces/GridColumnMenuSortBaseProps';
|
|
8
8
|
/**
|
|
9
|
-
* Can be used to check if sorting is applied to a specific field ([see example]({% slug
|
|
9
|
+
* Can be used to check if sorting is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
|
|
10
10
|
*/
|
|
11
11
|
export declare const sortGroupByField: (field: string, sort?: SortDescriptor[]) => boolean;
|
|
12
12
|
/**
|
|
@@ -143,8 +143,141 @@ export interface GridColumnMenuSortMethods extends Vue2type {
|
|
|
143
143
|
onSort: (e: any, selectedDir: 'asc' | 'desc') => void;
|
|
144
144
|
}
|
|
145
145
|
/**
|
|
146
|
-
*
|
|
146
|
+
* @hidden
|
|
147
147
|
*/
|
|
148
148
|
declare let GridColumnMenuSortVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridColumnMenuSortMethods>, {}, RecordPropsDefinition<GridColumnMenuSortProps>>;
|
|
149
|
+
/**
|
|
150
|
+
*
|
|
151
|
+
*
|
|
152
|
+
* {% meta height:410 %}
|
|
153
|
+
* ```html-preview
|
|
154
|
+
* <div id="vueapp">
|
|
155
|
+
* <Grid :style="{height: '280px'}"
|
|
156
|
+
* :data-items="gridData"
|
|
157
|
+
* :sortable="true"
|
|
158
|
+
* :sort= "sort"
|
|
159
|
+
* :filter="filter"
|
|
160
|
+
* :expand-field="'Discontinued'"
|
|
161
|
+
* @datastatechange="dataStateChange"
|
|
162
|
+
* @expandchange="expandChange"
|
|
163
|
+
* :columns="columns">
|
|
164
|
+
* </Grid>
|
|
165
|
+
* </div>
|
|
166
|
+
* ```
|
|
167
|
+
* ```js
|
|
168
|
+
* import { Grid, GridColumnMenuSort } from '@progress/kendo-vue-grid';
|
|
169
|
+
* import { process } from '@progress/kendo-data-query';
|
|
170
|
+
* const ColumnMenu = {
|
|
171
|
+
* props: {
|
|
172
|
+
* column: Object,
|
|
173
|
+
* sortable: [Boolean, Object],
|
|
174
|
+
* sort: {
|
|
175
|
+
* type: Array
|
|
176
|
+
* },
|
|
177
|
+
* filter: Object,
|
|
178
|
+
* filterable: Boolean
|
|
179
|
+
* },
|
|
180
|
+
* components: {
|
|
181
|
+
* GridColumnMenuSort
|
|
182
|
+
* },
|
|
183
|
+
* template: `<div>
|
|
184
|
+
* <GridColumnMenuSort
|
|
185
|
+
* :column="column"
|
|
186
|
+
* :filterable="filterable"
|
|
187
|
+
* :filter="filter"
|
|
188
|
+
* @closemenu ="closeMenu"
|
|
189
|
+
* @sortchange = "sortChange"
|
|
190
|
+
* />
|
|
191
|
+
* </div>`,
|
|
192
|
+
* methods: {
|
|
193
|
+
* closeMenu () {
|
|
194
|
+
* this.$emit('closemenu');
|
|
195
|
+
* },
|
|
196
|
+
* sortChange (newDescriptor, e) {
|
|
197
|
+
* this.$emit('filterchange', newDescriptor, e);
|
|
198
|
+
* }
|
|
199
|
+
* }
|
|
200
|
+
* };
|
|
201
|
+
*
|
|
202
|
+
* Vue.component('Grid', Grid);
|
|
203
|
+
* new Vue({
|
|
204
|
+
* el: '#vueapp',
|
|
205
|
+
* components: {
|
|
206
|
+
* Grid
|
|
207
|
+
* },
|
|
208
|
+
* created: function() {
|
|
209
|
+
* this.getData();
|
|
210
|
+
* },
|
|
211
|
+
* methods: {
|
|
212
|
+
* getData: function () {
|
|
213
|
+
* let dataState = {
|
|
214
|
+
* filter: this.filter,
|
|
215
|
+
* sort: this.sort
|
|
216
|
+
* };
|
|
217
|
+
* this.gridData = process([{
|
|
218
|
+
* "ProductID": 1,
|
|
219
|
+
* "ProductName": "Chai",
|
|
220
|
+
* "UnitsInStock": 39,
|
|
221
|
+
* "Discontinued": false,
|
|
222
|
+
* "FirstOrderedOn": new Date(1996, 8, 20)
|
|
223
|
+
* },{
|
|
224
|
+
* "ProductID": 2,
|
|
225
|
+
* "ProductName": "Chang",
|
|
226
|
+
* "UnitsInStock": 17,
|
|
227
|
+
* "Discontinued": false,
|
|
228
|
+
* "FirstOrderedOn": new Date(1996, 7, 12)
|
|
229
|
+
* },{
|
|
230
|
+
* "ProductID": 3,
|
|
231
|
+
* "ProductName": "Aniseed Syrup",
|
|
232
|
+
* "UnitsInStock": 13,
|
|
233
|
+
* "Discontinued": false,
|
|
234
|
+
* "FirstOrderedOn": new Date(1996, 8, 26)
|
|
235
|
+
* },{
|
|
236
|
+
* "ProductID": 4,
|
|
237
|
+
* "ProductName": "Chef Anton's Cajun Seasoning",
|
|
238
|
+
* "UnitsInStock": 53,
|
|
239
|
+
* "Discontinued": false,
|
|
240
|
+
* "FirstOrderedOn": new Date(1996, 9, 19)
|
|
241
|
+
* }], dataState);
|
|
242
|
+
* },
|
|
243
|
+
* createAppState: function(dataState) {
|
|
244
|
+
* this.sort = dataState.sort;
|
|
245
|
+
* this.filter = dataState.filter;
|
|
246
|
+
* this.getData();
|
|
247
|
+
* },
|
|
248
|
+
* dataStateChange: function (event) {
|
|
249
|
+
* this.createAppState(event.data);
|
|
250
|
+
* },
|
|
251
|
+
* expandChange: function (event) {
|
|
252
|
+
* event.dataItem[event.target.$props.expandField] = event.value;
|
|
253
|
+
* //
|
|
254
|
+
* // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
|
|
255
|
+
* //
|
|
256
|
+
* // Vue.set(
|
|
257
|
+
* // event.dataItem,
|
|
258
|
+
* // event.target.$props.expandField,
|
|
259
|
+
* // event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
|
|
260
|
+
* // );
|
|
261
|
+
* //
|
|
262
|
+
* }
|
|
263
|
+
* },
|
|
264
|
+
* data: function () {
|
|
265
|
+
* return {
|
|
266
|
+
* filter: null,
|
|
267
|
+
* sort: [],
|
|
268
|
+
* gridData: [],
|
|
269
|
+
* columns: [
|
|
270
|
+
* { field: 'ProductID'},
|
|
271
|
+
* { field: 'ProductName', title: 'Product Name' },
|
|
272
|
+
* { field: 'UnitsInStock', title: 'Units In Stock', columnMenu: ColumnMenu }
|
|
273
|
+
* ]
|
|
274
|
+
* };
|
|
275
|
+
* }
|
|
276
|
+
* } );
|
|
277
|
+
* ```
|
|
278
|
+
*
|
|
279
|
+
*
|
|
280
|
+
* ### props <span class='code'>[GridColumnMenuSortProps]({% slug api_grid_columnmenusortprops %})</span>
|
|
281
|
+
*/
|
|
149
282
|
declare const GridColumnMenuSort: DefineComponent<GridColumnMenuSortProps, any, {}, {}, GridColumnMenuSortMethods, {}, {}, {}, string, GridColumnMenuSortProps, GridColumnMenuSortProps, {}>;
|
|
150
283
|
export { GridColumnMenuSort, GridColumnMenuSortVue2 };
|
|
@@ -98,7 +98,7 @@ var sortedDesc = function sortedDesc(sortedIndex, sort) {
|
|
|
98
98
|
}; // tslint:disable:max-line-length
|
|
99
99
|
|
|
100
100
|
/**
|
|
101
|
-
* Can be used to check if sorting is applied to a specific field ([see example]({% slug
|
|
101
|
+
* Can be used to check if sorting is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
|
|
102
102
|
*/
|
|
103
103
|
// tslint:enable:max-line-length
|
|
104
104
|
|
|
@@ -108,7 +108,7 @@ exports.sortGroupByField = function (field, sort) {
|
|
|
108
108
|
return sortedDesc(currentSortIndex, sort) || sortedAsc(currentSortIndex, sort);
|
|
109
109
|
};
|
|
110
110
|
/**
|
|
111
|
-
*
|
|
111
|
+
* @hidden
|
|
112
112
|
*/
|
|
113
113
|
|
|
114
114
|
|
|
@@ -252,5 +252,139 @@ var GridColumnMenuSortVue2 = {
|
|
|
252
252
|
}
|
|
253
253
|
};
|
|
254
254
|
exports.GridColumnMenuSortVue2 = GridColumnMenuSortVue2;
|
|
255
|
+
/**
|
|
256
|
+
*
|
|
257
|
+
*
|
|
258
|
+
* {% meta height:410 %}
|
|
259
|
+
* ```html-preview
|
|
260
|
+
* <div id="vueapp">
|
|
261
|
+
* <Grid :style="{height: '280px'}"
|
|
262
|
+
* :data-items="gridData"
|
|
263
|
+
* :sortable="true"
|
|
264
|
+
* :sort= "sort"
|
|
265
|
+
* :filter="filter"
|
|
266
|
+
* :expand-field="'Discontinued'"
|
|
267
|
+
* @datastatechange="dataStateChange"
|
|
268
|
+
* @expandchange="expandChange"
|
|
269
|
+
* :columns="columns">
|
|
270
|
+
* </Grid>
|
|
271
|
+
* </div>
|
|
272
|
+
* ```
|
|
273
|
+
* ```js
|
|
274
|
+
* import { Grid, GridColumnMenuSort } from '@progress/kendo-vue-grid';
|
|
275
|
+
* import { process } from '@progress/kendo-data-query';
|
|
276
|
+
* const ColumnMenu = {
|
|
277
|
+
* props: {
|
|
278
|
+
* column: Object,
|
|
279
|
+
* sortable: [Boolean, Object],
|
|
280
|
+
* sort: {
|
|
281
|
+
* type: Array
|
|
282
|
+
* },
|
|
283
|
+
* filter: Object,
|
|
284
|
+
* filterable: Boolean
|
|
285
|
+
* },
|
|
286
|
+
* components: {
|
|
287
|
+
* GridColumnMenuSort
|
|
288
|
+
* },
|
|
289
|
+
* template: `<div>
|
|
290
|
+
* <GridColumnMenuSort
|
|
291
|
+
* :column="column"
|
|
292
|
+
* :filterable="filterable"
|
|
293
|
+
* :filter="filter"
|
|
294
|
+
* @closemenu ="closeMenu"
|
|
295
|
+
* @sortchange = "sortChange"
|
|
296
|
+
* />
|
|
297
|
+
* </div>`,
|
|
298
|
+
* methods: {
|
|
299
|
+
* closeMenu () {
|
|
300
|
+
* this.$emit('closemenu');
|
|
301
|
+
* },
|
|
302
|
+
* sortChange (newDescriptor, e) {
|
|
303
|
+
* this.$emit('filterchange', newDescriptor, e);
|
|
304
|
+
* }
|
|
305
|
+
* }
|
|
306
|
+
* };
|
|
307
|
+
*
|
|
308
|
+
* Vue.component('Grid', Grid);
|
|
309
|
+
* new Vue({
|
|
310
|
+
* el: '#vueapp',
|
|
311
|
+
* components: {
|
|
312
|
+
* Grid
|
|
313
|
+
* },
|
|
314
|
+
* created: function() {
|
|
315
|
+
* this.getData();
|
|
316
|
+
* },
|
|
317
|
+
* methods: {
|
|
318
|
+
* getData: function () {
|
|
319
|
+
* let dataState = {
|
|
320
|
+
* filter: this.filter,
|
|
321
|
+
* sort: this.sort
|
|
322
|
+
* };
|
|
323
|
+
* this.gridData = process([{
|
|
324
|
+
* "ProductID": 1,
|
|
325
|
+
* "ProductName": "Chai",
|
|
326
|
+
* "UnitsInStock": 39,
|
|
327
|
+
* "Discontinued": false,
|
|
328
|
+
* "FirstOrderedOn": new Date(1996, 8, 20)
|
|
329
|
+
* },{
|
|
330
|
+
* "ProductID": 2,
|
|
331
|
+
* "ProductName": "Chang",
|
|
332
|
+
* "UnitsInStock": 17,
|
|
333
|
+
* "Discontinued": false,
|
|
334
|
+
* "FirstOrderedOn": new Date(1996, 7, 12)
|
|
335
|
+
* },{
|
|
336
|
+
* "ProductID": 3,
|
|
337
|
+
* "ProductName": "Aniseed Syrup",
|
|
338
|
+
* "UnitsInStock": 13,
|
|
339
|
+
* "Discontinued": false,
|
|
340
|
+
* "FirstOrderedOn": new Date(1996, 8, 26)
|
|
341
|
+
* },{
|
|
342
|
+
* "ProductID": 4,
|
|
343
|
+
* "ProductName": "Chef Anton's Cajun Seasoning",
|
|
344
|
+
* "UnitsInStock": 53,
|
|
345
|
+
* "Discontinued": false,
|
|
346
|
+
* "FirstOrderedOn": new Date(1996, 9, 19)
|
|
347
|
+
* }], dataState);
|
|
348
|
+
* },
|
|
349
|
+
* createAppState: function(dataState) {
|
|
350
|
+
* this.sort = dataState.sort;
|
|
351
|
+
* this.filter = dataState.filter;
|
|
352
|
+
* this.getData();
|
|
353
|
+
* },
|
|
354
|
+
* dataStateChange: function (event) {
|
|
355
|
+
* this.createAppState(event.data);
|
|
356
|
+
* },
|
|
357
|
+
* expandChange: function (event) {
|
|
358
|
+
* event.dataItem[event.target.$props.expandField] = event.value;
|
|
359
|
+
* //
|
|
360
|
+
* // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
|
|
361
|
+
* //
|
|
362
|
+
* // Vue.set(
|
|
363
|
+
* // event.dataItem,
|
|
364
|
+
* // event.target.$props.expandField,
|
|
365
|
+
* // event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
|
|
366
|
+
* // );
|
|
367
|
+
* //
|
|
368
|
+
* }
|
|
369
|
+
* },
|
|
370
|
+
* data: function () {
|
|
371
|
+
* return {
|
|
372
|
+
* filter: null,
|
|
373
|
+
* sort: [],
|
|
374
|
+
* gridData: [],
|
|
375
|
+
* columns: [
|
|
376
|
+
* { field: 'ProductID'},
|
|
377
|
+
* { field: 'ProductName', title: 'Product Name' },
|
|
378
|
+
* { field: 'UnitsInStock', title: 'Units In Stock', columnMenu: ColumnMenu }
|
|
379
|
+
* ]
|
|
380
|
+
* };
|
|
381
|
+
* }
|
|
382
|
+
* } );
|
|
383
|
+
* ```
|
|
384
|
+
*
|
|
385
|
+
*
|
|
386
|
+
* ### props <span class='code'>[GridColumnMenuSortProps]({% slug api_grid_columnmenusortprops %})</span>
|
|
387
|
+
*/
|
|
388
|
+
|
|
255
389
|
var GridColumnMenuSort = GridColumnMenuSortVue2;
|
|
256
390
|
exports.GridColumnMenuSort = GridColumnMenuSort;
|
|
@@ -33,8 +33,11 @@ export interface ColumnDraggableState {
|
|
|
33
33
|
export interface ColumnDraggableAll extends ColumnDraggableMethods, ColumnDraggableState {
|
|
34
34
|
}
|
|
35
35
|
/**
|
|
36
|
-
*
|
|
36
|
+
* @hidden
|
|
37
37
|
*/
|
|
38
38
|
declare let ColumnDraggableVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ColumnDraggableAll>, {}, RecordPropsDefinition<ColumnDraggableProps>>;
|
|
39
|
+
/**
|
|
40
|
+
* @hidden
|
|
41
|
+
*/
|
|
39
42
|
declare const ColumnDraggable: DefineComponent<ColumnDraggableProps, any, {}, {}, ColumnDraggableMethods, {}, {}, {}, string, ColumnDraggableProps, ColumnDraggableProps, {}>;
|
|
40
43
|
export { ColumnDraggable, ColumnDraggableVue2 };
|
|
@@ -12,7 +12,7 @@ var gh = allVue.h;
|
|
|
12
12
|
|
|
13
13
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
15
|
+
* @hidden
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
|
|
@@ -74,5 +74,9 @@ var ColumnDraggableVue2 = {
|
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
76
|
exports.ColumnDraggableVue2 = ColumnDraggableVue2;
|
|
77
|
+
/**
|
|
78
|
+
* @hidden
|
|
79
|
+
*/
|
|
80
|
+
|
|
77
81
|
var ColumnDraggable = ColumnDraggableVue2;
|
|
78
82
|
exports.ColumnDraggable = ColumnDraggable;
|
|
@@ -30,8 +30,11 @@ export interface ColumnResizerState {
|
|
|
30
30
|
export interface ColumnResizerAll extends ColumnResizerMethods, ColumnResizerState {
|
|
31
31
|
}
|
|
32
32
|
/**
|
|
33
|
-
*
|
|
33
|
+
* @hidden
|
|
34
34
|
*/
|
|
35
35
|
declare let ColumnResizerVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ColumnResizerAll>, {}, RecordPropsDefinition<ColumnResizerProps>>;
|
|
36
|
+
/**
|
|
37
|
+
* @hidden
|
|
38
|
+
*/
|
|
36
39
|
declare const ColumnResizer: DefineComponent<ColumnResizerProps, any, {}, {}, ColumnResizerMethods, {}, {}, {}, string, ColumnResizerProps, ColumnResizerProps, {}>;
|
|
37
40
|
export { ColumnResizer, ColumnResizerVue2 };
|
|
@@ -12,7 +12,7 @@ var gh = allVue.h;
|
|
|
12
12
|
|
|
13
13
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
15
|
+
* @hidden
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
|
|
@@ -90,5 +90,9 @@ var ColumnResizerVue2 = {
|
|
|
90
90
|
}
|
|
91
91
|
};
|
|
92
92
|
exports.ColumnResizerVue2 = ColumnResizerVue2;
|
|
93
|
+
/**
|
|
94
|
+
* @hidden
|
|
95
|
+
*/
|
|
96
|
+
|
|
93
97
|
var ColumnResizer = ColumnResizerVue2;
|
|
94
98
|
exports.ColumnResizer = ColumnResizer;
|
|
@@ -15,8 +15,11 @@ export interface DragClueData extends Vue2type {
|
|
|
15
15
|
status?: 'k-i-cancel' | 'k-i-add';
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
18
|
-
*
|
|
18
|
+
* @hidden
|
|
19
19
|
*/
|
|
20
20
|
declare let DragClueVue2: ComponentOptions<Vue2type, DefaultData<DragClueData>, DefaultMethods<{}>, {}, RecordPropsDefinition<{}>>;
|
|
21
|
+
/**
|
|
22
|
+
* @hidden
|
|
23
|
+
*/
|
|
21
24
|
declare const DragClue: DefineComponent<{}, any, DragClueData, {}, {}, {}, {}, {}, string, {}, {}, {}>;
|
|
22
25
|
export { DragClue, DragClueVue2 };
|
|
@@ -10,7 +10,7 @@ var Vue = require("vue");
|
|
|
10
10
|
var allVue = Vue;
|
|
11
11
|
var gh = allVue.h;
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* @hidden
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
var DragClueVue2 = {
|
|
@@ -51,5 +51,9 @@ var DragClueVue2 = {
|
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
exports.DragClueVue2 = DragClueVue2;
|
|
54
|
+
/**
|
|
55
|
+
* @hidden
|
|
56
|
+
*/
|
|
57
|
+
|
|
54
58
|
var DragClue = DragClueVue2;
|
|
55
59
|
exports.DragClue = DragClue;
|
|
@@ -14,8 +14,11 @@ export interface DropClueData extends Vue2type {
|
|
|
14
14
|
height?: number;
|
|
15
15
|
}
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* @hidden
|
|
18
18
|
*/
|
|
19
19
|
declare let DropClueVue2: ComponentOptions<Vue2type, DefaultData<DropClueData>, DefaultMethods<{}>, {}, RecordPropsDefinition<{}>>;
|
|
20
|
+
/**
|
|
21
|
+
* @hidden
|
|
22
|
+
*/
|
|
20
23
|
declare const DropClue: DefineComponent<{}, any, DropClueData, {}, {}, {}, {}, {}, string, {}, {}, {}>;
|
|
21
24
|
export { DropClue, DropClueVue2 };
|
|
@@ -10,7 +10,7 @@ var Vue = require("vue");
|
|
|
10
10
|
var allVue = Vue;
|
|
11
11
|
var gh = allVue.h;
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* @hidden
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
var DropClueVue2 = {
|
|
@@ -45,5 +45,9 @@ var DropClueVue2 = {
|
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
47
|
exports.DropClueVue2 = DropClueVue2;
|
|
48
|
+
/**
|
|
49
|
+
* @hidden
|
|
50
|
+
*/
|
|
51
|
+
|
|
48
52
|
var DropClue = DropClueVue2;
|
|
49
53
|
exports.DropClue = DropClue;
|
|
@@ -41,8 +41,11 @@ export interface GroupingIndicatorState {
|
|
|
41
41
|
export interface GroupingIndicatorAll extends GroupingIndicatorMethods, GroupingIndicatorState {
|
|
42
42
|
}
|
|
43
43
|
/**
|
|
44
|
-
*
|
|
44
|
+
* @hidden
|
|
45
45
|
*/
|
|
46
46
|
declare let GroupingIndicatorVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GroupingIndicatorAll>, {}, RecordPropsDefinition<GroupingIndicatorProps>>;
|
|
47
|
+
/**
|
|
48
|
+
* @hidden
|
|
49
|
+
*/
|
|
47
50
|
declare const GroupingIndicator: DefineComponent<GroupingIndicatorProps, any, {}, {}, GroupingIndicatorMethods, {}, {}, {}, string, GroupingIndicatorProps, GroupingIndicatorProps, {}>;
|
|
48
51
|
export { GroupingIndicator, GroupingIndicatorVue2 };
|
|
@@ -13,7 +13,7 @@ var ref = allVue.ref;
|
|
|
13
13
|
|
|
14
14
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
16
|
+
* @hidden
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
|
|
@@ -160,5 +160,9 @@ var GroupingIndicatorVue2 = {
|
|
|
160
160
|
}
|
|
161
161
|
};
|
|
162
162
|
exports.GroupingIndicatorVue2 = GroupingIndicatorVue2;
|
|
163
|
+
/**
|
|
164
|
+
* @hidden
|
|
165
|
+
*/
|
|
166
|
+
|
|
163
167
|
var GroupingIndicator = GroupingIndicatorVue2;
|
|
164
168
|
exports.GroupingIndicator = GroupingIndicator;
|
|
@@ -41,6 +41,12 @@ export interface FooterMethods {
|
|
|
41
41
|
*/
|
|
42
42
|
export interface FooterAllMethods extends Vue2type, FooterMethods, FooterData, FooterComputed, FooterState {
|
|
43
43
|
}
|
|
44
|
+
/**
|
|
45
|
+
* @hidden
|
|
46
|
+
*/
|
|
44
47
|
declare let FooterVue2: ComponentOptions<FooterAllMethods, DefaultData<FooterData>, DefaultMethods<FooterAllMethods>, FooterComputed, RecordPropsDefinition<FooterProps>>;
|
|
48
|
+
/**
|
|
49
|
+
* @hidden
|
|
50
|
+
*/
|
|
45
51
|
declare const Footer: DefineComponent<FooterProps, any, FooterData, FooterComputed, FooterMethods, {}, {}, {}, string, FooterProps, FooterProps, {}>;
|
|
46
52
|
export { Footer, FooterVue2 };
|
|
@@ -14,6 +14,10 @@ var ref = allVue.ref;
|
|
|
14
14
|
var browser_support_service_1 = require("../utils/browser-support.service");
|
|
15
15
|
|
|
16
16
|
var utils_1 = require("../utils");
|
|
17
|
+
/**
|
|
18
|
+
* @hidden
|
|
19
|
+
*/
|
|
20
|
+
|
|
17
21
|
|
|
18
22
|
var FooterVue2 = {
|
|
19
23
|
name: 'Footer',
|
|
@@ -106,5 +110,9 @@ var FooterVue2 = {
|
|
|
106
110
|
}
|
|
107
111
|
};
|
|
108
112
|
exports.FooterVue2 = FooterVue2;
|
|
113
|
+
/**
|
|
114
|
+
* @hidden
|
|
115
|
+
*/
|
|
116
|
+
|
|
109
117
|
var Footer = FooterVue2;
|
|
110
118
|
exports.Footer = Footer;
|
|
@@ -19,6 +19,12 @@ export interface FooterRowMethods {
|
|
|
19
19
|
*/
|
|
20
20
|
export interface FooterRowAllMethods extends Vue2type, FooterRowMethods {
|
|
21
21
|
}
|
|
22
|
+
/**
|
|
23
|
+
* @hidden
|
|
24
|
+
*/
|
|
22
25
|
declare let FooterRowVue2: ComponentOptions<FooterRowAllMethods, {}, DefaultMethods<FooterRowAllMethods>, {}, RecordPropsDefinition<FooterRowProps>>;
|
|
26
|
+
/**
|
|
27
|
+
* @hidden
|
|
28
|
+
*/
|
|
23
29
|
declare const FooterRow: DefineComponent<FooterRowProps, any, {}, {}, FooterRowMethods, {}, {}, {}, string, FooterRowProps, FooterRowProps, {}>;
|
|
24
30
|
export { FooterRow, FooterRowVue2 };
|
|
@@ -13,6 +13,10 @@ var gh = allVue.h;
|
|
|
13
13
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
14
14
|
|
|
15
15
|
var utils_1 = require("./../utils");
|
|
16
|
+
/**
|
|
17
|
+
* @hidden
|
|
18
|
+
*/
|
|
19
|
+
|
|
16
20
|
|
|
17
21
|
var FooterRowVue2 = {
|
|
18
22
|
name: 'FooterRow',
|
|
@@ -73,5 +77,9 @@ var FooterRowVue2 = {
|
|
|
73
77
|
}
|
|
74
78
|
};
|
|
75
79
|
exports.FooterRowVue2 = FooterRowVue2;
|
|
80
|
+
/**
|
|
81
|
+
* @hidden
|
|
82
|
+
*/
|
|
83
|
+
|
|
76
84
|
var FooterRow = FooterRowVue2;
|
|
77
85
|
exports.FooterRow = FooterRow;
|
|
@@ -26,8 +26,11 @@ export interface FilterRowMethods extends Vue2type {
|
|
|
26
26
|
setFilter: (value: string | number, operator: string | Function, field: string | undefined, e: any) => void;
|
|
27
27
|
}
|
|
28
28
|
/**
|
|
29
|
-
*
|
|
29
|
+
* @hidden
|
|
30
30
|
*/
|
|
31
31
|
declare let FilterRowVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<FilterRowMethods>, {}, RecordPropsDefinition<FilterRowProps>>;
|
|
32
|
+
/**
|
|
33
|
+
* @hidden
|
|
34
|
+
*/
|
|
32
35
|
declare const FilterRow: DefineComponent<FilterRowProps, any, {}, {}, FilterRowMethods, {}, {}, {}, string, FilterRowProps, FilterRowProps, {}>;
|
|
33
36
|
export { FilterRow, FilterRowVue2 };
|
|
@@ -21,7 +21,7 @@ var messages_1 = require("../messages");
|
|
|
21
21
|
|
|
22
22
|
var kendo_vue_data_tools_1 = require("@progress/kendo-vue-data-tools");
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* @hidden
|
|
25
25
|
*/
|
|
26
26
|
|
|
27
27
|
|
|
@@ -208,5 +208,9 @@ var FilterRowVue2 = {
|
|
|
208
208
|
}
|
|
209
209
|
};
|
|
210
210
|
exports.FilterRowVue2 = FilterRowVue2;
|
|
211
|
+
/**
|
|
212
|
+
* @hidden
|
|
213
|
+
*/
|
|
214
|
+
|
|
211
215
|
var FilterRow = FilterRowVue2;
|
|
212
216
|
exports.FilterRow = FilterRow;
|