@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.
Files changed (168) hide show
  1. package/dist/cdn/js/kendo-vue-grid.js +1 -1
  2. package/dist/es/Grid.d.ts +35 -2
  3. package/dist/es/Grid.js +41 -9
  4. package/dist/es/GridNav.d.ts +4 -1
  5. package/dist/es/GridNav.js +5 -1
  6. package/dist/es/GridNoRecords.d.ts +4 -1
  7. package/dist/es/GridNoRecords.js +30 -26
  8. package/dist/es/GridToolbar.d.ts +46 -4
  9. package/dist/es/GridToolbar.js +48 -6
  10. package/dist/es/additionalTypes.ts +11 -0
  11. package/dist/es/cells/GridCell.d.ts +4 -1
  12. package/dist/es/cells/GridCell.js +5 -1
  13. package/dist/es/cells/GridDetailCell.d.ts +4 -1
  14. package/dist/es/cells/GridDetailCell.js +5 -1
  15. package/dist/es/cells/GridDetailHierarchyCell.d.ts +4 -1
  16. package/dist/es/cells/GridDetailHierarchyCell.js +5 -1
  17. package/dist/es/cells/GridEditCell.d.ts +4 -1
  18. package/dist/es/cells/GridEditCell.js +5 -1
  19. package/dist/es/cells/GridFilterCell.d.ts +4 -1
  20. package/dist/es/cells/GridFilterCell.js +5 -1
  21. package/dist/es/cells/GridGroupCell.d.ts +4 -1
  22. package/dist/es/cells/GridGroupCell.js +5 -1
  23. package/dist/es/cells/GridHierarchyCell.d.ts +4 -1
  24. package/dist/es/cells/GridHierarchyCell.js +5 -1
  25. package/dist/es/cells/GridSelectionCell.d.ts +4 -1
  26. package/dist/es/cells/GridSelectionCell.js +5 -1
  27. package/dist/es/columnMenu/ColumnMenu.d.ts +4 -1
  28. package/dist/es/columnMenu/ColumnMenu.js +5 -1
  29. package/dist/es/columnMenu/ColumnMenuContent.d.ts +4 -1
  30. package/dist/es/columnMenu/ColumnMenuContent.js +5 -1
  31. package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.d.ts +4 -1
  32. package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.js +114 -79
  33. package/dist/es/columnMenu/GridColumnMenuFilter.d.ts +138 -2
  34. package/dist/es/columnMenu/GridColumnMenuFilter.js +139 -2
  35. package/dist/es/columnMenu/GridColumnMenuFilterCell.d.ts +4 -1
  36. package/dist/es/columnMenu/GridColumnMenuFilterCell.js +5 -1
  37. package/dist/es/columnMenu/GridColumnMenuFilterUI.d.ts +4 -1
  38. package/dist/es/columnMenu/GridColumnMenuFilterUI.js +5 -1
  39. package/dist/es/columnMenu/GridColumnMenuItem.d.ts +4 -1
  40. package/dist/es/columnMenu/GridColumnMenuItem.js +5 -1
  41. package/dist/es/columnMenu/GridColumnMenuItemContent.d.ts +4 -1
  42. package/dist/es/columnMenu/GridColumnMenuItemContent.js +5 -1
  43. package/dist/es/columnMenu/GridColumnMenuItemGroup.d.ts +4 -1
  44. package/dist/es/columnMenu/GridColumnMenuItemGroup.js +5 -1
  45. package/dist/es/columnMenu/GridColumnMenuSort.d.ts +135 -2
  46. package/dist/es/columnMenu/GridColumnMenuSort.js +136 -2
  47. package/dist/es/drag/ColumnDraggable.d.ts +4 -1
  48. package/dist/es/drag/ColumnDraggable.js +5 -1
  49. package/dist/es/drag/ColumnResizer.d.ts +4 -1
  50. package/dist/es/drag/ColumnResizer.js +5 -1
  51. package/dist/es/drag/DragClue.d.ts +4 -1
  52. package/dist/es/drag/DragClue.js +5 -1
  53. package/dist/es/drag/DropClue.d.ts +4 -1
  54. package/dist/es/drag/DropClue.js +5 -1
  55. package/dist/es/drag/GroupingIndicator.d.ts +4 -1
  56. package/dist/es/drag/GroupingIndicator.js +5 -1
  57. package/dist/es/footer/Footer.d.ts +6 -0
  58. package/dist/es/footer/Footer.js +8 -0
  59. package/dist/es/footer/FooterRow.d.ts +6 -0
  60. package/dist/es/footer/FooterRow.js +8 -0
  61. package/dist/es/header/FilterRow.d.ts +4 -1
  62. package/dist/es/header/FilterRow.js +5 -1
  63. package/dist/es/header/GridHeaderCell.d.ts +4 -1
  64. package/dist/es/header/GridHeaderCell.js +5 -1
  65. package/dist/es/header/GridHeaderSelectionCell.d.ts +4 -1
  66. package/dist/es/header/GridHeaderSelectionCell.js +5 -1
  67. package/dist/es/header/GroupPanel.d.ts +4 -1
  68. package/dist/es/header/GroupPanel.js +5 -1
  69. package/dist/es/header/Header.d.ts +4 -1
  70. package/dist/es/header/Header.js +5 -1
  71. package/dist/es/header/HeaderRow.d.ts +4 -1
  72. package/dist/es/header/HeaderRow.js +5 -1
  73. package/dist/es/interfaces/GridCellProps.d.ts +2 -2
  74. package/dist/es/interfaces/GridColumnMenuFilterBaseProps.d.ts +8 -0
  75. package/dist/es/interfaces/GridColumnProps.d.ts +2 -2
  76. package/dist/es/interfaces/GridDetailRowProps.d.ts +0 -4
  77. package/dist/es/interfaces/GridFilterCellProps.d.ts +1 -1
  78. package/dist/es/interfaces/GridGroupableSettings.d.ts +1 -1
  79. package/dist/es/interfaces/GridProps.d.ts +27 -27
  80. package/dist/es/package-metadata.js +1 -1
  81. package/dist/es/rows/GridDetailRow.d.ts +2 -5
  82. package/dist/es/rows/GridDetailRow.js +4 -7
  83. package/dist/es/rows/GridRow.d.ts +4 -1
  84. package/dist/es/rows/GridRow.js +5 -1
  85. package/dist/npm/Grid.d.ts +35 -2
  86. package/dist/npm/Grid.js +40 -8
  87. package/dist/npm/GridNav.d.ts +4 -1
  88. package/dist/npm/GridNav.js +5 -1
  89. package/dist/npm/GridNoRecords.d.ts +4 -1
  90. package/dist/npm/GridNoRecords.js +32 -28
  91. package/dist/npm/GridToolbar.d.ts +46 -4
  92. package/dist/npm/GridToolbar.js +48 -6
  93. package/dist/npm/additionalTypes.ts +11 -0
  94. package/dist/npm/cells/GridCell.d.ts +4 -1
  95. package/dist/npm/cells/GridCell.js +5 -1
  96. package/dist/npm/cells/GridDetailCell.d.ts +4 -1
  97. package/dist/npm/cells/GridDetailCell.js +5 -1
  98. package/dist/npm/cells/GridDetailHierarchyCell.d.ts +4 -1
  99. package/dist/npm/cells/GridDetailHierarchyCell.js +5 -1
  100. package/dist/npm/cells/GridEditCell.d.ts +4 -1
  101. package/dist/npm/cells/GridEditCell.js +5 -1
  102. package/dist/npm/cells/GridFilterCell.d.ts +4 -1
  103. package/dist/npm/cells/GridFilterCell.js +5 -1
  104. package/dist/npm/cells/GridGroupCell.d.ts +4 -1
  105. package/dist/npm/cells/GridGroupCell.js +5 -1
  106. package/dist/npm/cells/GridHierarchyCell.d.ts +4 -1
  107. package/dist/npm/cells/GridHierarchyCell.js +5 -1
  108. package/dist/npm/cells/GridSelectionCell.d.ts +4 -1
  109. package/dist/npm/cells/GridSelectionCell.js +5 -1
  110. package/dist/npm/columnMenu/ColumnMenu.d.ts +4 -1
  111. package/dist/npm/columnMenu/ColumnMenu.js +5 -1
  112. package/dist/npm/columnMenu/ColumnMenuContent.d.ts +4 -1
  113. package/dist/npm/columnMenu/ColumnMenuContent.js +5 -1
  114. package/dist/npm/columnMenu/GridColumnMenuCheckboxFilter.d.ts +4 -1
  115. package/dist/npm/columnMenu/GridColumnMenuCheckboxFilter.js +113 -78
  116. package/dist/npm/columnMenu/GridColumnMenuFilter.d.ts +138 -2
  117. package/dist/npm/columnMenu/GridColumnMenuFilter.js +139 -2
  118. package/dist/npm/columnMenu/GridColumnMenuFilterCell.d.ts +4 -1
  119. package/dist/npm/columnMenu/GridColumnMenuFilterCell.js +5 -1
  120. package/dist/npm/columnMenu/GridColumnMenuFilterUI.d.ts +4 -1
  121. package/dist/npm/columnMenu/GridColumnMenuFilterUI.js +5 -1
  122. package/dist/npm/columnMenu/GridColumnMenuItem.d.ts +4 -1
  123. package/dist/npm/columnMenu/GridColumnMenuItem.js +5 -1
  124. package/dist/npm/columnMenu/GridColumnMenuItemContent.d.ts +4 -1
  125. package/dist/npm/columnMenu/GridColumnMenuItemContent.js +5 -1
  126. package/dist/npm/columnMenu/GridColumnMenuItemGroup.d.ts +4 -1
  127. package/dist/npm/columnMenu/GridColumnMenuItemGroup.js +5 -1
  128. package/dist/npm/columnMenu/GridColumnMenuSort.d.ts +135 -2
  129. package/dist/npm/columnMenu/GridColumnMenuSort.js +136 -2
  130. package/dist/npm/drag/ColumnDraggable.d.ts +4 -1
  131. package/dist/npm/drag/ColumnDraggable.js +5 -1
  132. package/dist/npm/drag/ColumnResizer.d.ts +4 -1
  133. package/dist/npm/drag/ColumnResizer.js +5 -1
  134. package/dist/npm/drag/DragClue.d.ts +4 -1
  135. package/dist/npm/drag/DragClue.js +5 -1
  136. package/dist/npm/drag/DropClue.d.ts +4 -1
  137. package/dist/npm/drag/DropClue.js +5 -1
  138. package/dist/npm/drag/GroupingIndicator.d.ts +4 -1
  139. package/dist/npm/drag/GroupingIndicator.js +5 -1
  140. package/dist/npm/footer/Footer.d.ts +6 -0
  141. package/dist/npm/footer/Footer.js +8 -0
  142. package/dist/npm/footer/FooterRow.d.ts +6 -0
  143. package/dist/npm/footer/FooterRow.js +8 -0
  144. package/dist/npm/header/FilterRow.d.ts +4 -1
  145. package/dist/npm/header/FilterRow.js +5 -1
  146. package/dist/npm/header/GridHeaderCell.d.ts +4 -1
  147. package/dist/npm/header/GridHeaderCell.js +5 -1
  148. package/dist/npm/header/GridHeaderSelectionCell.d.ts +4 -1
  149. package/dist/npm/header/GridHeaderSelectionCell.js +5 -1
  150. package/dist/npm/header/GroupPanel.d.ts +4 -1
  151. package/dist/npm/header/GroupPanel.js +5 -1
  152. package/dist/npm/header/Header.d.ts +4 -1
  153. package/dist/npm/header/Header.js +5 -1
  154. package/dist/npm/header/HeaderRow.d.ts +4 -1
  155. package/dist/npm/header/HeaderRow.js +5 -1
  156. package/dist/npm/interfaces/GridCellProps.d.ts +2 -2
  157. package/dist/npm/interfaces/GridColumnMenuFilterBaseProps.d.ts +8 -0
  158. package/dist/npm/interfaces/GridColumnProps.d.ts +2 -2
  159. package/dist/npm/interfaces/GridDetailRowProps.d.ts +0 -4
  160. package/dist/npm/interfaces/GridFilterCellProps.d.ts +1 -1
  161. package/dist/npm/interfaces/GridGroupableSettings.d.ts +1 -1
  162. package/dist/npm/interfaces/GridProps.d.ts +27 -27
  163. package/dist/npm/package-metadata.js +1 -1
  164. package/dist/npm/rows/GridDetailRow.d.ts +2 -5
  165. package/dist/npm/rows/GridDetailRow.js +4 -7
  166. package/dist/npm/rows/GridRow.d.ts +4 -1
  167. package/dist/npm/rows/GridRow.js +5 -1
  168. 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
- * Represents the default `GridColumnMenuItem` component.
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
- * Represents the default `GridColumnMenuItemContent` component.
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
- * Represents the default `GridColumnMenuItemContent` component.
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
- * The GridColumnMenuItemGroup that will be used inside the Grid ColumnMenu.
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
- * The GridColumnMenuItemGroup that will be used inside the Grid ColumnMenu.
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 column_menu_grid_native %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
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
- * Represents the default `GridColumnMenuSort` component.
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 column_menu_grid_native %}#toc-styling-the-column-menu-icon)). Useful for creating active sort indicators.
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
- * Represents the default `GridColumnMenuSort` component.
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
- * Represents the default `ColumnDraggable` component.
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
- * Represents the default `ColumnDraggable` component.
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
- * Represents the default `ColumnResizer` component.
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
- * Represents the default `ColumnResizer` component.
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
- * Represents the default `DragClue` component.
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
- * Represents the default `DragClue` component.
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
- * Represents the default `DropClue` component.
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
- * Represents the default `DropClue` component.
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
- * Represents the default `GroupingIndicator` component.
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
- * Represents the default `GroupingIndicator` component.
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
- * Represents the default `FilterRow` component.
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
- * Represents the default `FilterRow` component.
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;