@progress/kendo-vue-grid 3.3.4 → 3.3.6-dev.202206170937
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 +5 -1
- 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/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 +5 -1
- 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/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
|
@@ -24,8 +24,11 @@ export interface GridSelectionCellData {
|
|
|
24
24
|
export interface GridSelectionCellAll extends GridSelectionCellMethods, GridSelectionCellData {
|
|
25
25
|
}
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* @hidden
|
|
28
28
|
*/
|
|
29
29
|
declare let GridSelectionCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridSelectionCellMethods>, {}, RecordPropsDefinition<GridCellProps>>;
|
|
30
|
+
/**
|
|
31
|
+
* @hidden
|
|
32
|
+
*/
|
|
30
33
|
declare const GridSelectionCell: DefineComponent<GridCellProps, any, GridSelectionCellData, {}, GridSelectionCellMethods, {}, {}, {}, string, GridCellProps, GridCellProps, {}>;
|
|
31
34
|
export { GridSelectionCell, GridSelectionCellVue2 };
|
|
@@ -6,7 +6,7 @@ import { getNestedValue } from './../utils';
|
|
|
6
6
|
import { guid, getTemplate, noop } from '@progress/kendo-vue-common';
|
|
7
7
|
import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* @hidden
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
var GridSelectionCellVue2 = {
|
|
@@ -129,5 +129,9 @@ var GridSelectionCellVue2 = {
|
|
|
129
129
|
});
|
|
130
130
|
}
|
|
131
131
|
};
|
|
132
|
+
/**
|
|
133
|
+
* @hidden
|
|
134
|
+
*/
|
|
135
|
+
|
|
132
136
|
var GridSelectionCell = GridSelectionCellVue2;
|
|
133
137
|
export { GridSelectionCell, GridSelectionCellVue2 };
|
|
@@ -46,8 +46,11 @@ export interface ColumnMenuState {
|
|
|
46
46
|
export interface ColumnMenuAll extends ColumnMenuMethods, ColumnMenuData, ColumnMenuState, ColumnMenuComputed {
|
|
47
47
|
}
|
|
48
48
|
/**
|
|
49
|
-
*
|
|
49
|
+
* @hidden
|
|
50
50
|
*/
|
|
51
51
|
declare let ColumnMenuVue2: ComponentOptions<Vue2type, DefaultData<ColumnMenuData>, DefaultMethods<ColumnMenuAll>, {}, RecordPropsDefinition<GridColumnMenuProps>>;
|
|
52
|
+
/**
|
|
53
|
+
* @hidden
|
|
54
|
+
*/
|
|
52
55
|
declare const ColumnMenu: DefineComponent<GridColumnMenuProps, any, ColumnMenuData, ColumnMenuComputed, ColumnMenuMethods, {}, {}, {}, string, GridColumnMenuProps, GridColumnMenuProps, {}>;
|
|
53
56
|
export { ColumnMenu, ColumnMenuVue2 };
|
|
@@ -10,7 +10,7 @@ import { tableKeyboardNavigationTools } from '@progress/kendo-vue-data-tools';
|
|
|
10
10
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
11
11
|
import { messages, columnMenu } from '../messages';
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* @hidden
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
var ColumnMenuVue2 = {
|
|
@@ -247,5 +247,9 @@ var ColumnMenuVue2 = {
|
|
|
247
247
|
})])])]);
|
|
248
248
|
}
|
|
249
249
|
};
|
|
250
|
+
/**
|
|
251
|
+
* @hidden
|
|
252
|
+
*/
|
|
253
|
+
|
|
250
254
|
var ColumnMenu = ColumnMenuVue2;
|
|
251
255
|
export { ColumnMenu, ColumnMenuVue2 };
|
|
@@ -23,8 +23,11 @@ export interface ColumnMenuContentMethods extends Vue2type {
|
|
|
23
23
|
filterChange: (newDescriptor: CompositeFilterDescriptor | null, e: any) => void;
|
|
24
24
|
}
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
26
|
+
* @hidden
|
|
27
27
|
*/
|
|
28
28
|
declare let ColumnMenuContentVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ColumnMenuContentMethods>, {}, RecordPropsDefinition<ColumnMenuContentProps>>;
|
|
29
|
+
/**
|
|
30
|
+
* @hidden
|
|
31
|
+
*/
|
|
29
32
|
declare const ColumnMenuContent: DefineComponent<ColumnMenuContentProps, any, {}, {}, ColumnMenuContentMethods, {}, {}, {}, string, ColumnMenuContentProps, ColumnMenuContentProps, {}>;
|
|
30
33
|
export { ColumnMenuContent, ColumnMenuContentVue2 };
|
|
@@ -6,7 +6,7 @@ import { GridColumnMenuSort } from './GridColumnMenuSort';
|
|
|
6
6
|
import { GridColumnMenuFilter } from './GridColumnMenuFilter';
|
|
7
7
|
import { getTemplate, Keys } from '@progress/kendo-vue-common';
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* @hidden
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
var ColumnMenuContentVue2 = {
|
|
@@ -114,5 +114,9 @@ var ColumnMenuContentVue2 = {
|
|
|
114
114
|
});
|
|
115
115
|
}
|
|
116
116
|
};
|
|
117
|
+
/**
|
|
118
|
+
* @hidden
|
|
119
|
+
*/
|
|
120
|
+
|
|
117
121
|
var ColumnMenuContent = ColumnMenuContentVue2;
|
|
118
122
|
export { ColumnMenuContent, ColumnMenuContentVue2 };
|
|
@@ -76,8 +76,11 @@ export interface GridColumnMenuCheckboxFilterData {
|
|
|
76
76
|
export interface GridColumnMenuCheckboxFilterAll extends GridColumnMenuCheckboxFilterMethods, GridColumnMenuCheckboxFilterData, GridColumnMenuCheckboxFilterState {
|
|
77
77
|
}
|
|
78
78
|
/**
|
|
79
|
-
*
|
|
79
|
+
* @hidden
|
|
80
80
|
*/
|
|
81
81
|
declare let GridColumnMenuCheckboxFilterVue2: ComponentOptions<Vue2type, DefaultData<GridColumnMenuCheckboxFilterData>, DefaultMethods<GridColumnMenuCheckboxFilterAll>, {}, RecordPropsDefinition<GridColumnMenuCheckboxFilterProps>>;
|
|
82
|
+
/**
|
|
83
|
+
* @hidden
|
|
84
|
+
*/
|
|
82
85
|
declare const GridColumnMenuCheckboxFilter: DefineComponent<GridColumnMenuCheckboxFilterProps, any, GridColumnMenuCheckboxFilterData, {}, GridColumnMenuCheckboxFilterMethods, {}, {}, {}, string, GridColumnMenuCheckboxFilterProps, GridColumnMenuCheckboxFilterProps, {}>;
|
|
83
86
|
export { GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterVue2 };
|
|
@@ -57,7 +57,7 @@ var isArrayEqual = function isArrayEqual(firstArray, secondArray) {
|
|
|
57
57
|
});
|
|
58
58
|
};
|
|
59
59
|
/**
|
|
60
|
-
*
|
|
60
|
+
* @hidden
|
|
61
61
|
*/
|
|
62
62
|
|
|
63
63
|
|
|
@@ -704,5 +704,9 @@ var GridColumnMenuCheckboxFilterVue2 = {
|
|
|
704
704
|
}
|
|
705
705
|
}
|
|
706
706
|
};
|
|
707
|
+
/**
|
|
708
|
+
* @hidden
|
|
709
|
+
*/
|
|
710
|
+
|
|
707
711
|
var GridColumnMenuCheckboxFilter = GridColumnMenuCheckboxFilterVue2;
|
|
708
712
|
export { GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterVue2 };
|
|
@@ -10,7 +10,7 @@ import { GridColumnMenuFilterBaseProps } from '../interfaces/GridColumnMenuFilte
|
|
|
10
10
|
*/
|
|
11
11
|
export declare const rootFilterOrDefault: (rootFilter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor;
|
|
12
12
|
/**
|
|
13
|
-
* Can be used to check if filtering is applied to a specific field ([see example]({% slug
|
|
13
|
+
* Can be used to check if filtering is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators.
|
|
14
14
|
*/
|
|
15
15
|
export declare const filterGroupByField: (field: string, filter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor | null;
|
|
16
16
|
/**
|
|
@@ -196,8 +196,144 @@ export interface GridColumnMenuFilterData {
|
|
|
196
196
|
export interface GridColumnMenuFilterAll extends GridColumnMenuFilterMethods, GridColumnMenuFilterData {
|
|
197
197
|
}
|
|
198
198
|
/**
|
|
199
|
-
*
|
|
199
|
+
* @hidden
|
|
200
200
|
*/
|
|
201
201
|
declare let GridColumnMenuFilterVue2: ComponentOptions<Vue2type, DefaultData<GridColumnMenuFilterData>, DefaultMethods<GridColumnMenuFilterAll>, {}, RecordPropsDefinition<GridColumnMenuFilterProps>>;
|
|
202
|
+
/**
|
|
203
|
+
* Represents the GridColumnMenuFilter component.
|
|
204
|
+
*
|
|
205
|
+
* {% meta height:410 %}
|
|
206
|
+
* ```html-preview
|
|
207
|
+
* <div id="vueapp">
|
|
208
|
+
* <Grid :style="{height: '280px'}"
|
|
209
|
+
* :data-items="gridData"
|
|
210
|
+
* :sortable="true"
|
|
211
|
+
* :sort= "sort"
|
|
212
|
+
* :filter="filter"
|
|
213
|
+
* :expand-field="'Discontinued'"
|
|
214
|
+
* @datastatechange="dataStateChange"
|
|
215
|
+
* @expandchange="expandChange"
|
|
216
|
+
* :columns="columns">
|
|
217
|
+
* </Grid>
|
|
218
|
+
* </div>
|
|
219
|
+
* ```
|
|
220
|
+
* ```js
|
|
221
|
+
* import { Grid, GridColumnMenuFilter } from '@progress/kendo-vue-grid';
|
|
222
|
+
* import { process } from '@progress/kendo-data-query';
|
|
223
|
+
* const ColumnMenu = {
|
|
224
|
+
* props: {
|
|
225
|
+
* column: Object,
|
|
226
|
+
* sortable: [Boolean, Object],
|
|
227
|
+
* sort: {
|
|
228
|
+
* type: Array
|
|
229
|
+
* },
|
|
230
|
+
* filter: Object,
|
|
231
|
+
* filterable: Boolean
|
|
232
|
+
* },
|
|
233
|
+
* components: {
|
|
234
|
+
* GridColumnMenuFilter
|
|
235
|
+
* },
|
|
236
|
+
* template: `<div>
|
|
237
|
+
* <GridColumnMenuFilter
|
|
238
|
+
* :column="column"
|
|
239
|
+
* :filterable="filterable"
|
|
240
|
+
* :filter="filter"
|
|
241
|
+
* @closemenu ="closeMenu"
|
|
242
|
+
* @expandchange = "expandChange"
|
|
243
|
+
* @filterchange = "filterChange"
|
|
244
|
+
* />
|
|
245
|
+
* </div>`,
|
|
246
|
+
* methods: {
|
|
247
|
+
* expandChange () {
|
|
248
|
+
* this.$emit('expandchange');
|
|
249
|
+
* },
|
|
250
|
+
* closeMenu () {
|
|
251
|
+
* this.$emit('closemenu');
|
|
252
|
+
* },
|
|
253
|
+
* filterChange (newDescriptor, e) {
|
|
254
|
+
* this.$emit('filterchange', newDescriptor, e);
|
|
255
|
+
* }
|
|
256
|
+
* }
|
|
257
|
+
* };
|
|
258
|
+
*
|
|
259
|
+
* Vue.component('Grid', Grid);
|
|
260
|
+
* new Vue({
|
|
261
|
+
* el: '#vueapp',
|
|
262
|
+
* components: {
|
|
263
|
+
* Grid
|
|
264
|
+
* },
|
|
265
|
+
* created: function() {
|
|
266
|
+
* this.getData();
|
|
267
|
+
* },
|
|
268
|
+
* methods: {
|
|
269
|
+
* getData: function () {
|
|
270
|
+
* let dataState = {
|
|
271
|
+
* filter: this.filter,
|
|
272
|
+
* sort: this.sort
|
|
273
|
+
* };
|
|
274
|
+
* this.gridData = process([{
|
|
275
|
+
* "ProductID": 1,
|
|
276
|
+
* "ProductName": "Chai",
|
|
277
|
+
* "UnitsInStock": 39,
|
|
278
|
+
* "Discontinued": false,
|
|
279
|
+
* "FirstOrderedOn": new Date(1996, 8, 20)
|
|
280
|
+
* },{
|
|
281
|
+
* "ProductID": 2,
|
|
282
|
+
* "ProductName": "Chang",
|
|
283
|
+
* "UnitsInStock": 17,
|
|
284
|
+
* "Discontinued": false,
|
|
285
|
+
* "FirstOrderedOn": new Date(1996, 7, 12)
|
|
286
|
+
* },{
|
|
287
|
+
* "ProductID": 3,
|
|
288
|
+
* "ProductName": "Aniseed Syrup",
|
|
289
|
+
* "UnitsInStock": 13,
|
|
290
|
+
* "Discontinued": false,
|
|
291
|
+
* "FirstOrderedOn": new Date(1996, 8, 26)
|
|
292
|
+
* },{
|
|
293
|
+
* "ProductID": 4,
|
|
294
|
+
* "ProductName": "Chef Anton's Cajun Seasoning",
|
|
295
|
+
* "UnitsInStock": 53,
|
|
296
|
+
* "Discontinued": false,
|
|
297
|
+
* "FirstOrderedOn": new Date(1996, 9, 19)
|
|
298
|
+
* }], dataState);
|
|
299
|
+
* },
|
|
300
|
+
* createAppState: function(dataState) {
|
|
301
|
+
* this.sort = dataState.sort;
|
|
302
|
+
* this.filter = dataState.filter;
|
|
303
|
+
* this.getData();
|
|
304
|
+
* },
|
|
305
|
+
* dataStateChange: function (event) {
|
|
306
|
+
* this.createAppState(event.data);
|
|
307
|
+
* },
|
|
308
|
+
* expandChange: function (event) {
|
|
309
|
+
* event.dataItem[event.target.$props.expandField] = event.value;
|
|
310
|
+
* //
|
|
311
|
+
* // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
|
|
312
|
+
* //
|
|
313
|
+
* // Vue.set(
|
|
314
|
+
* // event.dataItem,
|
|
315
|
+
* // event.target.$props.expandField,
|
|
316
|
+
* // event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
|
|
317
|
+
* // );
|
|
318
|
+
* //
|
|
319
|
+
* }
|
|
320
|
+
* },
|
|
321
|
+
* data: function () {
|
|
322
|
+
* return {
|
|
323
|
+
* filter: null,
|
|
324
|
+
* sort: [],
|
|
325
|
+
* gridData: [],
|
|
326
|
+
* columns: [
|
|
327
|
+
* { field: 'ProductID'},
|
|
328
|
+
* { field: 'ProductName', title: 'Product Name' },
|
|
329
|
+
* { field: 'UnitsInStock', title: 'Units In Stock', columnMenu: ColumnMenu }
|
|
330
|
+
* ]
|
|
331
|
+
* };
|
|
332
|
+
* }
|
|
333
|
+
* } );
|
|
334
|
+
* ```
|
|
335
|
+
*
|
|
336
|
+
* ### props <span class='code'>[GridColumnMenuFilterProps]({% slug api_grid_columnmenufilterprops %})</span>
|
|
337
|
+
*/
|
|
202
338
|
declare const GridColumnMenuFilter: DefineComponent<GridColumnMenuFilterProps, any, GridColumnMenuFilterData, {}, GridColumnMenuFilterMethods, {}, {}, {}, string, GridColumnMenuFilterProps, GridColumnMenuFilterProps, {}>;
|
|
203
339
|
export { GridColumnMenuFilter, GridColumnMenuFilterVue2 };
|
|
@@ -55,7 +55,7 @@ export var rootFilterOrDefault = function rootFilterOrDefault(rootFilter) {
|
|
|
55
55
|
}; // tslint:disable:max-line-length
|
|
56
56
|
|
|
57
57
|
/**
|
|
58
|
-
* Can be used to check if filtering is applied to a specific field ([see example]({% slug
|
|
58
|
+
* Can be used to check if filtering is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators.
|
|
59
59
|
*/
|
|
60
60
|
// tslint:enable:max-line-length
|
|
61
61
|
|
|
@@ -73,7 +73,7 @@ export var filterGroupByField = function filterGroupByField(field, filter) {
|
|
|
73
73
|
return compositeFilters[0] || null;
|
|
74
74
|
};
|
|
75
75
|
/**
|
|
76
|
-
*
|
|
76
|
+
* @hidden
|
|
77
77
|
*/
|
|
78
78
|
|
|
79
79
|
var GridColumnMenuFilterVue2 = {
|
|
@@ -621,5 +621,142 @@ var GridColumnMenuFilterVue2 = {
|
|
|
621
621
|
);
|
|
622
622
|
}
|
|
623
623
|
};
|
|
624
|
+
/**
|
|
625
|
+
* Represents the GridColumnMenuFilter component.
|
|
626
|
+
*
|
|
627
|
+
* {% meta height:410 %}
|
|
628
|
+
* ```html-preview
|
|
629
|
+
* <div id="vueapp">
|
|
630
|
+
* <Grid :style="{height: '280px'}"
|
|
631
|
+
* :data-items="gridData"
|
|
632
|
+
* :sortable="true"
|
|
633
|
+
* :sort= "sort"
|
|
634
|
+
* :filter="filter"
|
|
635
|
+
* :expand-field="'Discontinued'"
|
|
636
|
+
* @datastatechange="dataStateChange"
|
|
637
|
+
* @expandchange="expandChange"
|
|
638
|
+
* :columns="columns">
|
|
639
|
+
* </Grid>
|
|
640
|
+
* </div>
|
|
641
|
+
* ```
|
|
642
|
+
* ```js
|
|
643
|
+
* import { Grid, GridColumnMenuFilter } from '@progress/kendo-vue-grid';
|
|
644
|
+
* import { process } from '@progress/kendo-data-query';
|
|
645
|
+
* const ColumnMenu = {
|
|
646
|
+
* props: {
|
|
647
|
+
* column: Object,
|
|
648
|
+
* sortable: [Boolean, Object],
|
|
649
|
+
* sort: {
|
|
650
|
+
* type: Array
|
|
651
|
+
* },
|
|
652
|
+
* filter: Object,
|
|
653
|
+
* filterable: Boolean
|
|
654
|
+
* },
|
|
655
|
+
* components: {
|
|
656
|
+
* GridColumnMenuFilter
|
|
657
|
+
* },
|
|
658
|
+
* template: `<div>
|
|
659
|
+
* <GridColumnMenuFilter
|
|
660
|
+
* :column="column"
|
|
661
|
+
* :filterable="filterable"
|
|
662
|
+
* :filter="filter"
|
|
663
|
+
* @closemenu ="closeMenu"
|
|
664
|
+
* @expandchange = "expandChange"
|
|
665
|
+
* @filterchange = "filterChange"
|
|
666
|
+
* />
|
|
667
|
+
* </div>`,
|
|
668
|
+
* methods: {
|
|
669
|
+
* expandChange () {
|
|
670
|
+
* this.$emit('expandchange');
|
|
671
|
+
* },
|
|
672
|
+
* closeMenu () {
|
|
673
|
+
* this.$emit('closemenu');
|
|
674
|
+
* },
|
|
675
|
+
* filterChange (newDescriptor, e) {
|
|
676
|
+
* this.$emit('filterchange', newDescriptor, e);
|
|
677
|
+
* }
|
|
678
|
+
* }
|
|
679
|
+
* };
|
|
680
|
+
*
|
|
681
|
+
* Vue.component('Grid', Grid);
|
|
682
|
+
* new Vue({
|
|
683
|
+
* el: '#vueapp',
|
|
684
|
+
* components: {
|
|
685
|
+
* Grid
|
|
686
|
+
* },
|
|
687
|
+
* created: function() {
|
|
688
|
+
* this.getData();
|
|
689
|
+
* },
|
|
690
|
+
* methods: {
|
|
691
|
+
* getData: function () {
|
|
692
|
+
* let dataState = {
|
|
693
|
+
* filter: this.filter,
|
|
694
|
+
* sort: this.sort
|
|
695
|
+
* };
|
|
696
|
+
* this.gridData = process([{
|
|
697
|
+
* "ProductID": 1,
|
|
698
|
+
* "ProductName": "Chai",
|
|
699
|
+
* "UnitsInStock": 39,
|
|
700
|
+
* "Discontinued": false,
|
|
701
|
+
* "FirstOrderedOn": new Date(1996, 8, 20)
|
|
702
|
+
* },{
|
|
703
|
+
* "ProductID": 2,
|
|
704
|
+
* "ProductName": "Chang",
|
|
705
|
+
* "UnitsInStock": 17,
|
|
706
|
+
* "Discontinued": false,
|
|
707
|
+
* "FirstOrderedOn": new Date(1996, 7, 12)
|
|
708
|
+
* },{
|
|
709
|
+
* "ProductID": 3,
|
|
710
|
+
* "ProductName": "Aniseed Syrup",
|
|
711
|
+
* "UnitsInStock": 13,
|
|
712
|
+
* "Discontinued": false,
|
|
713
|
+
* "FirstOrderedOn": new Date(1996, 8, 26)
|
|
714
|
+
* },{
|
|
715
|
+
* "ProductID": 4,
|
|
716
|
+
* "ProductName": "Chef Anton's Cajun Seasoning",
|
|
717
|
+
* "UnitsInStock": 53,
|
|
718
|
+
* "Discontinued": false,
|
|
719
|
+
* "FirstOrderedOn": new Date(1996, 9, 19)
|
|
720
|
+
* }], dataState);
|
|
721
|
+
* },
|
|
722
|
+
* createAppState: function(dataState) {
|
|
723
|
+
* this.sort = dataState.sort;
|
|
724
|
+
* this.filter = dataState.filter;
|
|
725
|
+
* this.getData();
|
|
726
|
+
* },
|
|
727
|
+
* dataStateChange: function (event) {
|
|
728
|
+
* this.createAppState(event.data);
|
|
729
|
+
* },
|
|
730
|
+
* expandChange: function (event) {
|
|
731
|
+
* event.dataItem[event.target.$props.expandField] = event.value;
|
|
732
|
+
* //
|
|
733
|
+
* // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
|
|
734
|
+
* //
|
|
735
|
+
* // Vue.set(
|
|
736
|
+
* // event.dataItem,
|
|
737
|
+
* // event.target.$props.expandField,
|
|
738
|
+
* // event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
|
|
739
|
+
* // );
|
|
740
|
+
* //
|
|
741
|
+
* }
|
|
742
|
+
* },
|
|
743
|
+
* data: function () {
|
|
744
|
+
* return {
|
|
745
|
+
* filter: null,
|
|
746
|
+
* sort: [],
|
|
747
|
+
* gridData: [],
|
|
748
|
+
* columns: [
|
|
749
|
+
* { field: 'ProductID'},
|
|
750
|
+
* { field: 'ProductName', title: 'Product Name' },
|
|
751
|
+
* { field: 'UnitsInStock', title: 'Units In Stock', columnMenu: ColumnMenu }
|
|
752
|
+
* ]
|
|
753
|
+
* };
|
|
754
|
+
* }
|
|
755
|
+
* } );
|
|
756
|
+
* ```
|
|
757
|
+
*
|
|
758
|
+
* ### props <span class='code'>[GridColumnMenuFilterProps]({% slug api_grid_columnmenufilterprops %})</span>
|
|
759
|
+
*/
|
|
760
|
+
|
|
624
761
|
var GridColumnMenuFilter = GridColumnMenuFilterVue2;
|
|
625
762
|
export { GridColumnMenuFilter, GridColumnMenuFilterVue2 };
|
|
@@ -35,8 +35,11 @@ export interface GridColumnMenuFilterCellMethods extends Vue2type {
|
|
|
35
35
|
boolDropdownChange: (value: any, e: any) => void;
|
|
36
36
|
}
|
|
37
37
|
/**
|
|
38
|
-
*
|
|
38
|
+
* @hidden
|
|
39
39
|
*/
|
|
40
40
|
declare let GridColumnMenuFilterCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridColumnMenuFilterCellMethods>, {}, RecordPropsDefinition<ColumnMenuFilterCellProps>>;
|
|
41
|
+
/**
|
|
42
|
+
* @hidden
|
|
43
|
+
*/
|
|
41
44
|
declare const GridColumnMenuFilterCell: DefineComponent<ColumnMenuFilterCellProps, any, {}, {}, GridColumnMenuFilterCellMethods, {}, {}, {}, string, ColumnMenuFilterCellProps, ColumnMenuFilterCellProps, {}>;
|
|
42
45
|
export { GridColumnMenuFilterCell, GridColumnMenuFilterCellVue2 };
|
|
@@ -7,7 +7,7 @@ import { NumericTextBox } from '@progress/kendo-vue-inputs';
|
|
|
7
7
|
import { DatePicker } from '@progress/kendo-vue-dateinputs';
|
|
8
8
|
import { cellBoolDropdownChange, cellInputChange, cellOperatorChange } from '../filterCommon';
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* @hidden
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
var GridColumnMenuFilterCellVue2 = {
|
|
@@ -166,5 +166,9 @@ var GridColumnMenuFilterCellVue2 = {
|
|
|
166
166
|
}), filterComponent.call(this, this.$props.filterType, this.$props.value, this.$props.booleanValues)]);
|
|
167
167
|
}
|
|
168
168
|
};
|
|
169
|
+
/**
|
|
170
|
+
* @hidden
|
|
171
|
+
*/
|
|
172
|
+
|
|
169
173
|
var GridColumnMenuFilterCell = GridColumnMenuFilterCellVue2;
|
|
170
174
|
export { GridColumnMenuFilterCell, GridColumnMenuFilterCellVue2 };
|
|
@@ -14,8 +14,11 @@ export interface GridColumnMenuFilterUIMethods extends Vue2type {
|
|
|
14
14
|
logicChange: (e: any) => void;
|
|
15
15
|
}
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* @hidden
|
|
18
18
|
*/
|
|
19
19
|
declare let GridColumnMenuFilterUIVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridColumnMenuFilterUIMethods>, {}, RecordPropsDefinition<GridColumnMenuFilterUIProps>>;
|
|
20
|
+
/**
|
|
21
|
+
* @hidden
|
|
22
|
+
*/
|
|
20
23
|
declare const GridColumnMenuFilterUI: DefineComponent<GridColumnMenuFilterUIProps, any, {}, {}, GridColumnMenuFilterUIMethods, {}, {}, {}, string, GridColumnMenuFilterUIProps, GridColumnMenuFilterUIProps, {}>;
|
|
21
24
|
export { GridColumnMenuFilterUI, GridColumnMenuFilterUIVue2 };
|
|
@@ -6,7 +6,7 @@ import { GridColumnMenuFilterCell } from './GridColumnMenuFilterCell';
|
|
|
6
6
|
import { DropDownList } from '@progress/kendo-vue-dropdowns';
|
|
7
7
|
import { getTemplate } from '@progress/kendo-vue-common';
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* @hidden
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
var GridColumnMenuFilterUIVue2 = {
|
|
@@ -146,5 +146,9 @@ var GridColumnMenuFilterUIVue2 = {
|
|
|
146
146
|
});
|
|
147
147
|
}
|
|
148
148
|
};
|
|
149
|
+
/**
|
|
150
|
+
* @hidden
|
|
151
|
+
*/
|
|
152
|
+
|
|
149
153
|
var GridColumnMenuFilterUI = GridColumnMenuFilterUIVue2;
|
|
150
154
|
export { GridColumnMenuFilterUI, GridColumnMenuFilterUIVue2 };
|
|
@@ -32,8 +32,11 @@ export interface GridColumnMenuItemMethods extends Vue2type {
|
|
|
32
32
|
onKeyDown: () => void;
|
|
33
33
|
}
|
|
34
34
|
/**
|
|
35
|
-
*
|
|
35
|
+
* @hidden
|
|
36
36
|
*/
|
|
37
37
|
declare let GridColumnMenuItemVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridColumnMenuItemMethods>, {}, RecordPropsDefinition<GridColumnMenuItemProps>>;
|
|
38
|
+
/**
|
|
39
|
+
* @hidden
|
|
40
|
+
*/
|
|
38
41
|
declare const GridColumnMenuItem: DefineComponent<GridColumnMenuItemProps, any, {}, {}, GridColumnMenuItemMethods, {}, {}, {}, string, GridColumnMenuItemProps, GridColumnMenuItemProps, {}>;
|
|
39
42
|
export { GridColumnMenuItem, GridColumnMenuItemVue2 };
|
|
@@ -4,7 +4,7 @@ var allVue = Vue;
|
|
|
4
4
|
var gh = allVue.h;
|
|
5
5
|
import { Keys } from '@progress/kendo-vue-common';
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* @hidden
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
var GridColumnMenuItemVue2 = {
|
|
@@ -54,5 +54,9 @@ var GridColumnMenuItemVue2 = {
|
|
|
54
54
|
}), title]);
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
|
+
/**
|
|
58
|
+
* @hidden
|
|
59
|
+
*/
|
|
60
|
+
|
|
57
61
|
var GridColumnMenuItem = GridColumnMenuItemVue2;
|
|
58
62
|
export { GridColumnMenuItem, GridColumnMenuItemVue2 };
|
|
@@ -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 };
|
|
@@ -5,7 +5,7 @@ var gh = allVue.h;
|
|
|
5
5
|
import { getDefaultSlots } from '@progress/kendo-vue-common';
|
|
6
6
|
import { Reveal } from '@progress/kendo-vue-animation';
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* @hidden
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
11
|
var GridColumnMenuItemContentVue2 = {
|
|
@@ -42,5 +42,9 @@ var GridColumnMenuItemContentVue2 = {
|
|
|
42
42
|
} : [_this.$props.show ? defaultSlot : null])]);
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
|
+
/**
|
|
46
|
+
* @hidden
|
|
47
|
+
*/
|
|
48
|
+
|
|
45
49
|
var GridColumnMenuItemContent = GridColumnMenuItemContentVue2;
|
|
46
50
|
export { GridColumnMenuItemContent, GridColumnMenuItemContentVue2 };
|
|
@@ -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 };
|
|
@@ -4,7 +4,7 @@ var allVue = Vue;
|
|
|
4
4
|
var gh = allVue.h;
|
|
5
5
|
import { getDefaultSlots } from '@progress/kendo-vue-common';
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* @hidden
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
var GridColumnMenuItemGroupVue2 = {
|
|
@@ -24,5 +24,9 @@ var GridColumnMenuItemGroupVue2 = {
|
|
|
24
24
|
}, [defaultSlot]);
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
|
+
/**
|
|
28
|
+
* @hidden
|
|
29
|
+
*/
|
|
30
|
+
|
|
27
31
|
var GridColumnMenuItemGroup = GridColumnMenuItemGroupVue2;
|
|
28
32
|
export { GridColumnMenuItemGroup, GridColumnMenuItemGroupVue2 };
|