@progress/kendo-vue-grid 3.3.3 → 3.3.5-dev.202206141337

package/dist/es/cells/GridSelectionCell.d.ts

@@ -24,8 +24,11 @@ export interface GridSelectionCellData {
 export interface GridSelectionCellAll extends GridSelectionCellMethods, GridSelectionCellData {
 }
 /**
- * Represents the default `GridSelectionCell` component.
+ * @hidden
  */
 declare let GridSelectionCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridSelectionCellMethods>, {}, RecordPropsDefinition<GridCellProps>>;
+/**
+ * @hidden
+ */
 declare const GridSelectionCell: DefineComponent<GridCellProps, any, GridSelectionCellData, {}, GridSelectionCellMethods, {}, {}, {}, string, GridCellProps, GridCellProps, {}>;
 export { GridSelectionCell, GridSelectionCellVue2 };

package/dist/es/cells/GridSelectionCell.js

@@ -6,7 +6,7 @@ import { getNestedValue } from './../utils';
 import { guid, getTemplate, noop } from '@progress/kendo-vue-common';
 import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
 /**
- * Represents the default `GridSelectionCell` component.
+ * @hidden
  */
 
 var GridSelectionCellVue2 = {
@@ -129,5 +129,9 @@ var GridSelectionCellVue2 = {
     });
   }
 };
+/**
+ * @hidden
+ */
+
 var GridSelectionCell = GridSelectionCellVue2;
 export { GridSelectionCell, GridSelectionCellVue2 };

package/dist/es/columnMenu/ColumnMenu.d.ts

@@ -46,8 +46,11 @@ export interface ColumnMenuState {
 export interface ColumnMenuAll extends ColumnMenuMethods, ColumnMenuData, ColumnMenuState, ColumnMenuComputed {
 }
 /**
- * Represents the default `ColumnMenu` component.
+ * @hidden
  */
 declare let ColumnMenuVue2: ComponentOptions<Vue2type, DefaultData<ColumnMenuData>, DefaultMethods<ColumnMenuAll>, {}, RecordPropsDefinition<GridColumnMenuProps>>;
+/**
+ * @hidden
+ */
 declare const ColumnMenu: DefineComponent<GridColumnMenuProps, any, ColumnMenuData, ColumnMenuComputed, ColumnMenuMethods, {}, {}, {}, string, GridColumnMenuProps, GridColumnMenuProps, {}>;
 export { ColumnMenu, ColumnMenuVue2 };

package/dist/es/columnMenu/ColumnMenu.js

@@ -10,7 +10,7 @@ import { tableKeyboardNavigationTools } from '@progress/kendo-vue-data-tools';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, columnMenu } from '../messages';
 /**
- * Represents the default `ColumnMenu` component.
+ * @hidden
  */
 
 var ColumnMenuVue2 = {
@@ -247,5 +247,9 @@ var ColumnMenuVue2 = {
     })])])]);
   }
 };
+/**
+ * @hidden
+ */
+
 var ColumnMenu = ColumnMenuVue2;
 export { ColumnMenu, ColumnMenuVue2 };

package/dist/es/columnMenu/ColumnMenuContent.d.ts

@@ -23,8 +23,11 @@ export interface ColumnMenuContentMethods extends Vue2type {
     filterChange: (newDescriptor: CompositeFilterDescriptor | null, e: any) => void;
 }
 /**
- * Represents the default `ColumnMenuContent` component.
+ * @hidden
  */
 declare let ColumnMenuContentVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ColumnMenuContentMethods>, {}, RecordPropsDefinition<ColumnMenuContentProps>>;
+/**
+ * @hidden
+ */
 declare const ColumnMenuContent: DefineComponent<ColumnMenuContentProps, any, {}, {}, ColumnMenuContentMethods, {}, {}, {}, string, ColumnMenuContentProps, ColumnMenuContentProps, {}>;
 export { ColumnMenuContent, ColumnMenuContentVue2 };

package/dist/es/columnMenu/ColumnMenuContent.js

@@ -6,7 +6,7 @@ import { GridColumnMenuSort } from './GridColumnMenuSort';
 import { GridColumnMenuFilter } from './GridColumnMenuFilter';
 import { getTemplate, Keys } from '@progress/kendo-vue-common';
 /**
- * Represents the default `ColumnMenuContent` component.
+ * @hidden
  */
 
 var ColumnMenuContentVue2 = {
@@ -114,5 +114,9 @@ var ColumnMenuContentVue2 = {
     });
   }
 };
+/**
+ * @hidden
+ */
+
 var ColumnMenuContent = ColumnMenuContentVue2;
 export { ColumnMenuContent, ColumnMenuContentVue2 };

package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.d.ts

@@ -76,8 +76,11 @@ export interface GridColumnMenuCheckboxFilterData {
 export interface GridColumnMenuCheckboxFilterAll extends GridColumnMenuCheckboxFilterMethods, GridColumnMenuCheckboxFilterData, GridColumnMenuCheckboxFilterState {
 }
 /**
- * Represents the default `GridColumnMenuCheckboxFilter` component.
+ * @hidden
  */
 declare let GridColumnMenuCheckboxFilterVue2: ComponentOptions<Vue2type, DefaultData<GridColumnMenuCheckboxFilterData>, DefaultMethods<GridColumnMenuCheckboxFilterAll>, {}, RecordPropsDefinition<GridColumnMenuCheckboxFilterProps>>;
+/**
+ * @hidden
+ */
 declare const GridColumnMenuCheckboxFilter: DefineComponent<GridColumnMenuCheckboxFilterProps, any, GridColumnMenuCheckboxFilterData, {}, GridColumnMenuCheckboxFilterMethods, {}, {}, {}, string, GridColumnMenuCheckboxFilterProps, GridColumnMenuCheckboxFilterProps, {}>;
 export { GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterVue2 };

package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.js

@@ -41,7 +41,7 @@ import { Checkbox } from '@progress/kendo-vue-inputs';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, filterClearButton, filterSubmitButton, filterTitle, searchPlaceholder, filterCheckAll } from '../messages';
 import { filterBy } from '@progress/kendo-data-query';
-import { clone } from '@progress/kendo-vue-common';
+import { clone, getListeners, getTemplate, templateRendering } from '@progress/kendo-vue-common';
 import { getNestedValue } from '../utils';
 /**
  * @hidden
@@ -57,7 +57,7 @@ var isArrayEqual = function isArrayEqual(firstArray, secondArray) {
   });
 };
 /**
- * Represents the default `GridColumnMenuCheckboxFilter` component.
+ * @hidden
  */
 
 
@@ -68,6 +68,8 @@ var GridColumnMenuCheckboxFilterVue2 = {
     filter: Object,
     filterable: Boolean,
     filterOperators: Object,
+    checkAllItem: [String, Object, Function],
+    item: [String, Object, Function],
     expanded: {
       type: Boolean,
       default: undefined
@@ -188,6 +190,40 @@ var GridColumnMenuCheckboxFilterVue2 = {
     var uniqueFilterValues = filterValues.filter(function (item, index) {
       return filterValues.indexOf(item) === index;
     });
+    var itemTemplate = templateRendering.call(this, this.$props.item, getListeners.call(this));
+    var checkAllItemTemplate = templateRendering.call(this, this.$props.checkAllItem, getListeners.call(this));
+    var defaultCheckAllRendering = h("li", {
+      "class": "k-item"
+    }, [// @ts-ignore  function children
+    h(Checkbox, {
+      label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
+      attrs: this.v3 ? undefined : {
+        label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
+        checked: this.isAllSelected()
+      },
+      onChange: function onChange(e) {
+        return _this.handleCheckBoxChange(e, 'all');
+      },
+      on: this.v3 ? undefined : {
+        "change": function onChange(e) {
+          return _this.handleCheckBoxChange(e, 'all');
+        }
+      },
+      checked: this.isAllSelected()
+    })]);
+    var checkAllItemRender = getTemplate.call(this, {
+      h: h,
+      template: checkAllItemTemplate,
+      defaultRendering: defaultCheckAllRendering,
+      additionalProps: {
+        checked: this.isAllSelected()
+      },
+      additionalListeners: {
+        change: function change(e) {
+          return _this.handleCheckBoxChange(e, 'all');
+        }
+      }
+    });
     return (// @ts-ignore  function children
       h(GridColumnMenuItemGroup, this.v3 ? function () {
         return [// @ts-ignore  function children
@@ -223,28 +259,10 @@ var GridColumnMenuCheckboxFilterVue2 = {
             "class": 'k-filter-menu-container'
           }, [searchBox.call(_this2), h("ul", {
             "class": "k-reset k-multicheck-wrap"
-          }, [h("li", {
-            "class": "k-item"
-          }, [// @ts-ignore  function children
-          h(Checkbox, {
-            label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
-            attrs: _this2.v3 ? undefined : {
-              label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
-              checked: _this2.isAllSelected()
-            },
-            onChange: function onChange(e) {
-              return _this.handleCheckBoxChange(e, 'all');
-            },
-            on: _this2.v3 ? undefined : {
-              "change": function onChange(e) {
-                return _this.handleCheckBoxChange(e, 'all');
-              }
-            },
-            checked: _this2.isAllSelected()
-          })]), _this2.currentData.map(function (item, index) {
+          }, [checkAllItemRender, _this2.currentData.map(function (item, index) {
             var _this = this;
 
-            return h("li", {
+            var defaultRendering = h("li", {
               "class": "k-item",
               key: index
             }, [// @ts-ignore  function children
@@ -264,6 +282,22 @@ var GridColumnMenuCheckboxFilterVue2 = {
               },
               checked: uniqueFilterValues.includes(item)
             })]);
+            var itemRender = getTemplate.call(this, {
+              h: h,
+              template: itemTemplate,
+              defaultRendering: defaultRendering,
+              additionalProps: {
+                item: item,
+                index: index,
+                checked: uniqueFilterValues.includes(item)
+              },
+              additionalListeners: {
+                change: function change(e) {
+                  return _this.handleCheckBoxChange(e, item);
+                }
+              }
+            });
+            return itemRender;
           }, _this2)]), h("div", {
             "class": 'k-columnmenu-actions'
           }, [// @ts-ignore function children
@@ -297,27 +331,10 @@ var GridColumnMenuCheckboxFilterVue2 = {
           "class": 'k-filter-menu-container'
         }, [searchBox.call(_this2), h("ul", {
           "class": "k-reset k-multicheck-wrap"
-        }, [h("li", {
-          "class": "k-item"
-        }, [h(Checkbox, {
-          label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
-          attrs: _this2.v3 ? undefined : {
-            label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
-            checked: _this2.isAllSelected()
-          },
-          onChange: function onChange(e) {
-            return _this.handleCheckBoxChange(e, 'all');
-          },
-          on: _this2.v3 ? undefined : {
-            "change": function onChange(e) {
-              return _this.handleCheckBoxChange(e, 'all');
-            }
-          },
-          checked: _this2.isAllSelected()
-        })]), _this2.currentData.map(function (item, index) {
+        }, [checkAllItemRender, _this2.currentData.map(function (item, index) {
           var _this = this;
 
-          return h("li", {
+          var defaultRendering = h("li", {
             "class": "k-item",
             key: index
           }, [h(Checkbox, {
@@ -336,6 +353,22 @@ var GridColumnMenuCheckboxFilterVue2 = {
             },
             checked: uniqueFilterValues.includes(item)
           })]);
+          var itemRender = getTemplate.call(this, {
+            h: h,
+            template: itemTemplate,
+            defaultRendering: defaultRendering,
+            additionalProps: {
+              item: item,
+              index: index,
+              checked: uniqueFilterValues.includes(item)
+            },
+            additionalListeners: {
+              change: function change(e) {
+                return _this.handleCheckBoxChange(e, item);
+              }
+            }
+          });
+          return itemRender;
         }, _this2)]), h("div", {
           "class": 'k-columnmenu-actions'
         }, [h(Button, {
@@ -384,27 +417,10 @@ var GridColumnMenuCheckboxFilterVue2 = {
           "class": 'k-filter-menu-container'
         }, [searchBox.call(_this2), h("ul", {
           "class": "k-reset k-multicheck-wrap"
-        }, [h("li", {
-          "class": "k-item"
-        }, [h(Checkbox, {
-          label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
-          attrs: _this2.v3 ? undefined : {
-            label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
-            checked: _this2.isAllSelected()
-          },
-          onChange: function onChange(e) {
-            return _this.handleCheckBoxChange(e, 'all');
-          },
-          on: _this2.v3 ? undefined : {
-            "change": function onChange(e) {
-              return _this.handleCheckBoxChange(e, 'all');
-            }
-          },
-          checked: _this2.isAllSelected()
-        })]), _this2.currentData.map(function (item, index) {
+        }, [checkAllItemRender, _this2.currentData.map(function (item, index) {
           var _this = this;
 
-          return h("li", {
+          var defaultRendering = h("li", {
             "class": "k-item",
             key: index
           }, [h(Checkbox, {
@@ -423,6 +439,22 @@ var GridColumnMenuCheckboxFilterVue2 = {
             },
             checked: uniqueFilterValues.includes(item)
           })]);
+          var itemRender = getTemplate.call(this, {
+            h: h,
+            template: itemTemplate,
+            defaultRendering: defaultRendering,
+            additionalProps: {
+              item: item,
+              index: index,
+              checked: uniqueFilterValues.includes(item)
+            },
+            additionalListeners: {
+              change: function change(e) {
+                return _this.handleCheckBoxChange(e, item);
+              }
+            }
+          });
+          return itemRender;
         }, _this2)]), h("div", {
           "class": 'k-columnmenu-actions'
         }, [h(Button, {
@@ -454,27 +486,10 @@ var GridColumnMenuCheckboxFilterVue2 = {
         "class": 'k-filter-menu-container'
       }, [searchBox.call(_this2), h("ul", {
         "class": "k-reset k-multicheck-wrap"
-      }, [h("li", {
-        "class": "k-item"
-      }, [h(Checkbox, {
-        label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
-        attrs: _this2.v3 ? undefined : {
-          label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
-          checked: _this2.isAllSelected()
-        },
-        onChange: function onChange(e) {
-          return _this.handleCheckBoxChange(e, 'all');
-        },
-        on: _this2.v3 ? undefined : {
-          "change": function onChange(e) {
-            return _this.handleCheckBoxChange(e, 'all');
-          }
-        },
-        checked: _this2.isAllSelected()
-      })]), _this2.currentData.map(function (item, index) {
+      }, [checkAllItemRender, _this2.currentData.map(function (item, index) {
         var _this = this;
 
-        return h("li", {
+        var defaultRendering = h("li", {
           "class": "k-item",
           key: index
         }, [h(Checkbox, {
@@ -493,6 +508,22 @@ var GridColumnMenuCheckboxFilterVue2 = {
           },
           checked: uniqueFilterValues.includes(item)
         })]);
+        var itemRender = getTemplate.call(this, {
+          h: h,
+          template: itemTemplate,
+          defaultRendering: defaultRendering,
+          additionalProps: {
+            item: item,
+            index: index,
+            checked: uniqueFilterValues.includes(item)
+          },
+          additionalListeners: {
+            change: function change(e) {
+              return _this.handleCheckBoxChange(e, item);
+            }
+          }
+        });
+        return itemRender;
       }, _this2)]), h("div", {
         "class": 'k-columnmenu-actions'
       }, [h(Button, {
@@ -673,5 +704,9 @@ var GridColumnMenuCheckboxFilterVue2 = {
     }
   }
 };
+/**
+ * @hidden
+ */
+
 var GridColumnMenuCheckboxFilter = GridColumnMenuCheckboxFilterVue2;
 export { GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterVue2 };

package/dist/es/columnMenu/GridColumnMenuFilter.d.ts

@@ -10,7 +10,7 @@ import { GridColumnMenuFilterBaseProps } from '../interfaces/GridColumnMenuFilte
  */
 export declare const rootFilterOrDefault: (rootFilter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor;
 /**
- * Can be used to check if filtering is applied to a specific field ([see example]({% slug column_menu_grid_native %}#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators.
+ * 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.
  */
 export declare const filterGroupByField: (field: string, filter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor | null;
 /**
@@ -196,8 +196,144 @@ export interface GridColumnMenuFilterData {
 export interface GridColumnMenuFilterAll extends GridColumnMenuFilterMethods, GridColumnMenuFilterData {
 }
 /**
- * Represents the default `GridColumnMenuFilter` component.
+ * @hidden
  */
 declare let GridColumnMenuFilterVue2: ComponentOptions<Vue2type, DefaultData<GridColumnMenuFilterData>, DefaultMethods<GridColumnMenuFilterAll>, {}, RecordPropsDefinition<GridColumnMenuFilterProps>>;
+/**
+ * Represents the GridColumnMenuFilter component.
+ *
+ * {% meta height:410 %}
+ *  ```html-preview
+ *  <div id="vueapp">
+ *     <Grid :style="{height: '280px'}"
+ *          :data-items="gridData"
+ *          :sortable="true"
+ *          :sort= "sort"
+ *          :filter="filter"
+ *          :expand-field="'Discontinued'"
+ *          @datastatechange="dataStateChange"
+ *          @expandchange="expandChange"
+ *          :columns="columns">
+ *       </Grid>
+ *  </div>
+ * ```
+ * ```js
+ * import { Grid, GridColumnMenuFilter } from '@progress/kendo-vue-grid';
+ * import { process } from '@progress/kendo-data-query';
+ *      const ColumnMenu = {
+ *        props: {
+ *            column: Object,
+ *            sortable: [Boolean, Object],
+ *            sort: {
+ *                type: Array
+ *            },
+ *            filter: Object,
+ *            filterable: Boolean
+ *        },
+ *        components: {
+ *            GridColumnMenuFilter
+ *        },
+ *        template: `<div>
+ *            <GridColumnMenuFilter
+ *                :column="column"
+ *                :filterable="filterable"
+ *                :filter="filter"
+ *                @closemenu ="closeMenu"
+ *                @expandchange = "expandChange"
+ *                @filterchange = "filterChange"
+ *            />
+ *        </div>`,
+ *        methods: {
+ *            expandChange () {
+ *                this.$emit('expandchange');
+ *            },
+ *            closeMenu () {
+ *                this.$emit('closemenu');
+ *            },
+ *            filterChange (newDescriptor, e) {
+ *                this.$emit('filterchange', newDescriptor, e);
+ *            }
+ *        }
+ *      };
+ *
+ *      Vue.component('Grid', Grid);
+ *      new Vue({
+ *          el: '#vueapp',
+ *          components: {
+ *            Grid
+ *          },
+ *          created: function() {
+ *             this.getData();
+ *          },
+ *          methods: {
+ *            getData: function () {
+ *                let dataState = {
+ *                    filter: this.filter,
+ *                    sort: this.sort
+ *                };
+ *                this.gridData = process([{
+ *                    "ProductID": 1,
+ *                    "ProductName": "Chai",
+ *                    "UnitsInStock": 39,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 8, 20)
+ *                },{
+ *                    "ProductID": 2,
+ *                    "ProductName": "Chang",
+ *                    "UnitsInStock": 17,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 7, 12)
+ *                },{
+ *                    "ProductID": 3,
+ *                    "ProductName": "Aniseed Syrup",
+ *                    "UnitsInStock": 13,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 8, 26)
+ *                },{
+ *                    "ProductID": 4,
+ *                    "ProductName": "Chef Anton's Cajun Seasoning",
+ *                    "UnitsInStock": 53,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 9, 19)
+ *                }], dataState);
+ *            },
+ *            createAppState: function(dataState) {
+ *                this.sort = dataState.sort;
+ *                this.filter = dataState.filter;
+ *                this.getData();
+ *            },
+ *            dataStateChange: function (event) {
+ *                this.createAppState(event.data);
+ *            },
+ *            expandChange: function (event) {
+ *                 event.dataItem[event.target.$props.expandField] = event.value;
+ *                 //
+ *                 // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+ *                 //
+ *                 //   Vue.set(
+ *                 //     event.dataItem,
+ *                 //     event.target.$props.expandField,
+ *                 //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+ *                 //   );
+ *                 //
+ *            }
+ *          },
+ *          data: function () {
+ *              return {
+ *                 filter: null,
+ *                 sort: [],
+ *                  gridData: [],
+ *                  columns: [
+ *                      { field: 'ProductID'},
+ *                      { field: 'ProductName', title: 'Product Name' },
+ *                      { field: 'UnitsInStock', title: 'Units In Stock', columnMenu: ColumnMenu }
+ *                  ]
+ *              };
+ *          }
+ *       } );
+ * ```
+ *
+ * ### props <span class='code'>[GridColumnMenuFilterProps]({% slug api_grid_columnmenufilterprops %})</span>
+ */
 declare const GridColumnMenuFilter: DefineComponent<GridColumnMenuFilterProps, any, GridColumnMenuFilterData, {}, GridColumnMenuFilterMethods, {}, {}, {}, string, GridColumnMenuFilterProps, GridColumnMenuFilterProps, {}>;
 export { GridColumnMenuFilter, GridColumnMenuFilterVue2 };