@progress/kendo-vue-grid 3.7.4-dev.202212300853 → 3.7.4-dev.202301120847

package/dist/npm/cells/GridCell.d.ts

@@ -8,7 +8,14 @@ import { IntlService } from '@progress/kendo-vue-intl';
 /**
  * @hidden
  */
-export interface GridCellAll extends Vue2type {
+export interface GridCellComputed {
+    [key: string]: any;
+    tdClass: object;
+}
+/**
+ * @hidden
+ */
+export interface GridCellAll extends Vue2type, GridCellComputed {
     _intl: IntlService;
     triggerKeydown: (e: any) => void;
     triggerClick: () => void;

package/dist/npm/cells/GridCell.js

@@ -85,6 +85,15 @@ var GridCellVue2 = {
   created: function created() {
     this._intl = (0, kendo_vue_intl_1.provideIntlService)(this);
   },
+  computed: {
+    tdClass: function tdClass() {
+      var _a;
+      var className = this.$props.className;
+      return _a = {
+        'k-table-td': true
+      }, _a[className] = className, _a;
+    }
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -101,7 +110,7 @@ var GridCellVue2 = {
     var navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
     if (this.$props.rowType === 'groupFooter') {
       defaultRendering = h("td", {
-        "class": this.$props.className
+        "class": this.tdClass
       });
     } else if (this.$props.field !== undefined && this.$props.rowType !== 'groupHeader') {
       var data = (0, main_1.getNestedValue)(this.$props.field, this.$props.dataItem);
@@ -121,7 +130,7 @@ var GridCellVue2 = {
           "data-keyboardnavlevel": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_LEVEL],
           "data-keyboardnavid": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_ID]
         },
-        "class": this.$props.className,
+        "class": this.tdClass,
         onKeydown: this.triggerKeydown,
         on: this.v3 ? undefined : {
           "keydown": this.triggerKeydown,

package/dist/npm/cells/GridDetailCell.js

@@ -56,7 +56,7 @@ var GridDetailCellVue2 = {
       });
     };
     return h("td", {
-      "class": "k-detail-cell",
+      "class": "k-table-td k-detail-cell",
       colspan: colSpan,
       attrs: this.v3 ? undefined : {
         colspan: colSpan,

package/dist/npm/cells/GridDetailHierarchyCell.js

@@ -38,7 +38,7 @@ var GridDetailHierarchyCellVue2 = {
     var h = gh || createElement;
     var navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
     return h("td", {
-      "class": "k-hierarchy-cell",
+      "class": "k-table-td k-hierarchy-cell",
       tabindex: navAttrs.tabIndex,
       attrs: this.v3 ? undefined : {
         tabindex: navAttrs.tabIndex,

package/dist/npm/cells/GridEditCell.d.ts

@@ -27,7 +27,14 @@ export interface GridEditCellData {
 /**
  * @hidden
  */
-export interface GridEditCellAll extends GridEditCellMethods, GridEditCellData {
+export interface GridEditCellComputed {
+    [key: string]: any;
+    tdClass: object;
+}
+/**
+ * @hidden
+ */
+export interface GridEditCellAll extends GridEditCellMethods, GridEditCellData, GridEditCellComputed {
 }
 /**
  * @hidden

package/dist/npm/cells/GridEditCell.js

@@ -55,6 +55,15 @@ var GridEditCellVue2 = {
       default: kendo_vue_common_1.noop
     }
   },
+  computed: {
+    tdClass: function tdClass() {
+      var _a;
+      var className = this.$props.className;
+      return _a = {
+        'k-table-td': true
+      }, _a[className] = className, _a;
+    }
+  },
   data: function data() {
     return {
       inputId: (0, kendo_vue_common_1.guid)()
@@ -132,7 +141,7 @@ var GridEditCellVue2 = {
             "data-keyboardnavlevel": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_LEVEL],
             "data-keyboardnavid": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_ID]
           },
-          "class": this.$props.className,
+          "class": this.tdClass,
           role: 'gridcell',
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,
@@ -173,7 +182,7 @@ var GridEditCellVue2 = {
             "data-keyboardnavlevel": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_LEVEL],
             "data-keyboardnavid": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_ID]
           },
-          "class": this.$props.className,
+          "class": this.tdClass,
           role: 'gridcell',
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,
@@ -214,7 +223,7 @@ var GridEditCellVue2 = {
             "data-keyboardnavlevel": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_LEVEL],
             "data-keyboardnavid": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_ID]
           },
-          "class": this.$props.className,
+          "class": this.tdClass,
           role: 'gridcell',
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,
@@ -263,7 +272,7 @@ var GridEditCellVue2 = {
             "data-keyboardnavlevel": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_LEVEL],
             "data-keyboardnavid": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_ID]
           },
-          "class": this.$props.className,
+          "class": this.tdClass,
           role: 'gridcell',
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,

package/dist/npm/cells/GridFilterCell.js

@@ -15,6 +15,7 @@ var main_1 = require("../messages/main");
 var kendo_vue_dropdowns_1 = require("@progress/kendo-vue-dropdowns");
 var kendo_vue_inputs_1 = require("@progress/kendo-vue-inputs");
 var kendo_vue_dateinputs_1 = require("@progress/kendo-vue-dateinputs");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var filterCommon_1 = require("../filterCommon");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
@@ -36,7 +37,8 @@ var GridFilterCellVue2 = {
     booleanValues: Array,
     onChange: Function,
     render: [String, Function, Object],
-    ariaLabel: String
+    ariaLabel: String,
+    size: String
   },
   inject: {
     kendoLocalizationService: {
@@ -88,6 +90,7 @@ var GridFilterCellVue2 = {
     var _this = this;
     var h = gh || createElement;
     var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    var size = this.$props.size;
     var selectedOperator = this.$props.operators.find(function (item) {
       return item.operator === _this.$props.operator;
     }) || null;
@@ -105,6 +108,7 @@ var GridFilterCellVue2 = {
           value: selectedOperator,
           attrs: this.v3 ? undefined : {
             value: selectedOperator,
+            size: size,
             iconClassName: "k-i-filter k-button-icon",
             "data-items": this.$props.operators,
             textField: "text",
@@ -114,6 +118,7 @@ var GridFilterCellVue2 = {
             },
             ariaLabel: 'filter'
           },
+          size: size,
           "class": "k-dropdown-operator",
           iconClassName: "k-i-filter k-button-icon",
           "data-items": this.$props.operators,
@@ -133,12 +138,14 @@ var GridFilterCellVue2 = {
           return (
             // @ts-ignore
             h(kendo_vue_inputs_1.NumericTextBox, {
-              value: value,
+              size: size,
               attrs: this.v3 ? undefined : {
+                size: size,
                 value: value,
                 title: this.$props.title,
                 ariaLabel: this.ariaLabel
               },
+              value: value,
               onChange: function onChange(e) {
                 _this.inputChange(e.value, e.event);
               },
@@ -155,12 +162,14 @@ var GridFilterCellVue2 = {
           return (
             // @ts-ignore
             h(kendo_vue_dateinputs_1.DatePicker, {
-              value: value,
+              size: size,
               attrs: this.v3 ? undefined : {
+                size: size,
                 value: value,
                 title: this.$props.title,
                 ariaLabel: this.ariaLabel
               },
+              value: value,
               onChange: function onChange(e) {
                 _this.inputChange(e.value, e);
               },
@@ -182,10 +191,9 @@ var GridFilterCellVue2 = {
               on: this.v3 ? undefined : {
                 "change": this.boolDropdownChange
               },
-              value: booleanValues.find(function (item) {
-                return item.operator === (value !== null ? value : '');
-              }),
+              size: size,
               attrs: this.v3 ? undefined : {
+                size: size,
                 value: booleanValues.find(function (item) {
                   return item.operator === (value !== null ? value : '');
                 }),
@@ -194,6 +202,9 @@ var GridFilterCellVue2 = {
                 title: this.$props.title,
                 ariaLabel: this.ariaLabel
               },
+              value: booleanValues.find(function (item) {
+                return item.operator === (value !== null ? value : '');
+              }),
               "data-items": booleanValues,
               textField: "text",
               title: this.$props.title,
@@ -201,14 +212,15 @@ var GridFilterCellVue2 = {
             })
           );
         default:
-          return h("span", {
-            "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
-          }, [h("input", {
-            "class": "k-input-inner",
-            value: this.v3 ? value || '' : null,
-            domProps: this.v3 ? undefined : {
-              "value": value || ''
+          return h(kendo_vue_inputs_1.Input, {
+            value: value || '',
+            attrs: this.v3 ? undefined : {
+              value: value || '',
+              size: size,
+              title: this.$props.title,
+              "aria-label": this.ariaLabel
             },
+            size: size,
             onInput: function onInput(e) {
               _this.inputChange(e.target.value, e);
             },
@@ -218,18 +230,14 @@ var GridFilterCellVue2 = {
               }
             },
             title: this.$props.title,
-            attrs: this.v3 ? undefined : {
-              title: this.$props.title,
-              "aria-label": this.ariaLabel
-            },
             "aria-label": this.ariaLabel
-          })]);
+          });
       }
     };
     var defaultRendering = h("div", {
-      "class": "k-cell-inner"
-    }, [h("span", {
-      "class": "k-link"
+      "class": "k-filtercell"
+    }, [h("div", {
+      "class": "k-filtercell-wrapper"
     }, [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
       "class": "k-filtercell-operator"
     }, [renderOperatorEditor.call(this),
@@ -238,10 +246,14 @@ var GridFilterCellVue2 = {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
+        size: size,
         icon: 'filter-clear',
+        svgIcon: kendo_svg_icons_1.filterClearIcon,
         title: localizationService.toLanguageString(main_1.filterClearButton, main_1.messages[main_1.filterClearButton])
       },
+      size: size,
       icon: 'filter-clear',
+      svgIcon: kendo_svg_icons_1.filterClearIcon,
       "class": {
         /* button is always visible if there is either value or operator */
         'k-disabled': !(!(this.$props.value === null || this.$props.value === '') || this.$props.operator)

package/dist/npm/cells/GridGroupCell.d.ts

@@ -15,9 +15,21 @@ export interface GridGroupCellMethods extends Vue2type {
 /**
  * @hidden
  */
-declare let GridGroupCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridGroupCellMethods>, {}, RecordPropsDefinition<GridCellProps>>;
+export interface GridGroupCellComputed {
+    [key: string]: any;
+    tdClass: object;
+}
+/**
+ * @hidden
+ */
+export interface GridGroupCellAll extends GridGroupCellMethods, GridGroupCellComputed {
+}
+/**
+ * @hidden
+ */
+declare let GridGroupCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridGroupCellAll>, {}, RecordPropsDefinition<GridCellProps>>;
 /**
  * @hidden
  */
-declare const GridGroupCell: DefineComponent<GridCellProps, any, {}, {}, GridGroupCellMethods, {}, {}, {}, string, GridCellProps, GridCellProps, {}>;
+declare const GridGroupCell: DefineComponent<GridCellProps, any, {}, {}, GridGroupCellAll, {}, {}, {}, string, GridCellProps, GridCellProps, {}>;
 export { GridGroupCell, GridGroupCellVue2 };

package/dist/npm/cells/GridGroupCell.js

@@ -11,6 +11,9 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_data_tools_1 = require("@progress/kendo-vue-data-tools");
+var main_1 = require("../messages/main");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -43,10 +46,22 @@ var GridGroupCellVue2 = {
     kendoIntlService: {
       default: null
     },
+    kendoLocalizationService: {
+      default: null
+    },
     getKeyboardNavigationAttributes: {
       default: kendo_vue_common_1.noop
     }
   },
+  computed: {
+    tdClass: function tdClass() {
+      var _a;
+      var className = this.$props.className;
+      return _a = {
+        'k-table-td': true
+      }, _a[className] = className, _a;
+    }
+  },
   methods: {
     triggerKeydown: function triggerKeydown(event, expanded) {
       this.$emit('cellkeydown', {
@@ -105,10 +120,12 @@ var GridGroupCellVue2 = {
       expanded = _a.expanded,
       render = _a.render;
     var navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
+    var groupCaretAriaLabelCollapseValue = (0, kendo_vue_intl_1.provideLocalizationService)(this).toLanguageString(main_1.groupCaretAriaLabelCollapse, main_1.messages[main_1.groupCaretAriaLabelCollapse]);
+    var groupCaretAriaLabelExpandValue = (0, kendo_vue_intl_1.provideLocalizationService)(this).toLanguageString(main_1.groupCaretAriaLabelExpand, main_1.messages[main_1.groupCaretAriaLabelExpand]);
     if (columnIndex === undefined || level === undefined || columnIndex < level || columnsCount === undefined || rowType !== 'groupHeader' || dataItem[field] === undefined) {
       defaultRendering = h("td", {
         key: 'g' + columnIndex,
-        "class": "k-group-cell"
+        "class": "k-table-td k-group-cell"
       });
     } else if (columnIndex <= level) {
       defaultRendering = h("td", {
@@ -121,12 +138,14 @@ var GridGroupCellVue2 = {
           }
         },
         key: 'g-colspan',
+        "class": this.tdClass,
         colspan: columnsCount - columnIndex,
         attrs: this.v3 ? undefined : {
           colspan: columnsCount - columnIndex,
           role: 'gridcell',
           "aria-colindex": this.$props.ariaColumnIndex,
           "aria-selected": this.$props.isSelected,
+          "aria-expanded": expanded,
           "data-grid-col-index": this.$props.columnIndex,
           tabindex: navAttrs.tabIndex,
           "data-keyboardnavlevel": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_LEVEL],
@@ -135,6 +154,7 @@ var GridGroupCellVue2 = {
         role: 'gridcell',
         "aria-colindex": this.$props.ariaColumnIndex,
         "aria-selected": this.$props.isSelected,
+        "aria-expanded": expanded,
         "data-grid-col-index": this.$props.columnIndex,
         tabindex: navAttrs.tabIndex,
         "data-keyboardnavlevel": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_LEVEL],
@@ -153,11 +173,21 @@ var GridGroupCellVue2 = {
         href: "#",
         attrs: this.v3 ? undefined : {
           href: "#",
-          tabindex: -1
+          tabindex: -1,
+          title: expanded ? groupCaretAriaLabelCollapseValue : groupCaretAriaLabelExpandValue,
+          ariaLable: expanded ? groupCaretAriaLabelCollapseValue : groupCaretAriaLabelExpandValue
         },
         tabindex: -1,
-        "class": expanded ? 'k-i-caret-alt-down k-icon' : 'k-i-caret-alt-right k-icon'
-      }), dataItem[field].toString()])]);
+        title: expanded ? groupCaretAriaLabelCollapseValue : groupCaretAriaLabelExpandValue,
+        ariaLable: expanded ? groupCaretAriaLabelCollapseValue : groupCaretAriaLabelExpandValue
+      }, [h(kendo_vue_common_1.Icon, {
+        name: expanded ? 'caret-alt-down' : 'caret-alt-right',
+        attrs: this.v3 ? undefined : {
+          name: expanded ? 'caret-alt-down' : 'caret-alt-right',
+          icon: expanded ? kendo_svg_icons_1.caretAltDownIcon : kendo_svg_icons_1.caretAltRightIcon
+        },
+        icon: expanded ? kendo_svg_icons_1.caretAltDownIcon : kendo_svg_icons_1.caretAltRightIcon
+      })]), dataItem[field].toString()])]);
     }
     return kendo_vue_common_1.getTemplate.call(this, {
       h: h,

package/dist/npm/cells/GridHierarchyCell.js

@@ -12,6 +12,9 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var main_1 = require("../utils/main");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_data_tools_1 = require("@progress/kendo-vue-data-tools");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var main_2 = require("../messages/main");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -44,6 +47,9 @@ var GridHierarchyCellVue2 = {
     kendoIntlService: {
       default: null
     },
+    kendoLocalizationService: {
+      default: null
+    },
     getKeyboardNavigationAttributes: {
       default: kendo_vue_common_1.noop
     }
@@ -84,6 +90,7 @@ var GridHierarchyCellVue2 = {
     wrapperClass: function wrapperClass() {
       var _a;
       return _a = {
+        'k-table-td': true,
         'k-hierarchy-cell': true
       }, _a[this.className || ''] = this.className, _a;
     }
@@ -101,13 +108,15 @@ var GridHierarchyCellVue2 = {
     var h = gh || createElement;
     var defaultRendering = null;
     var navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
+    var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    var collapseMessage = localizationService.toLanguageString(main_2.collapseDetailAriaLabel, main_2.messages[main_2.collapseDetailAriaLabel]);
+    var expandMessage = localizationService.toLanguageString(main_2.expandDetailAriaLabel, main_2.messages[main_2.expandDetailAriaLabel]);
     if (this.$props.rowType === 'groupFooter') {
       defaultRendering = h("td", {
         "class": this.wrapperClass
       });
     } else if (this.$props.rowType !== 'groupHeader') {
       var expanded_1 = (0, main_1.getNestedValue)(this.$props.field, this.$props.dataItem);
-      var className = expanded_1 ? 'k-icon k-i-minus' : 'k-icon k-i-plus';
       defaultRendering = h("td", {
         onKeydown: function onKeydown(ev) {
           _this.triggerKeydown(ev, expanded_1);
@@ -141,14 +150,24 @@ var GridHierarchyCellVue2 = {
             _this.clickHandler(e, _this.$props.dataItem, expanded_1);
           }
         },
-        "class": className,
         href: "#",
         attrs: this.v3 ? undefined : {
           href: "#",
-          tabindex: -1
+          tabindex: -1,
+          title: expanded_1 ? collapseMessage : expandMessage,
+          "aria-label": expanded_1 ? collapseMessage : expandMessage
+        },
+        tabindex: -1,
+        title: expanded_1 ? collapseMessage : expandMessage,
+        "aria-label": expanded_1 ? collapseMessage : expandMessage
+      }, [h(kendo_vue_common_1.Icon, {
+        name: expanded_1 ? 'minus' : 'plus',
+        attrs: this.v3 ? undefined : {
+          name: expanded_1 ? 'minus' : 'plus',
+          icon: expanded_1 ? kendo_svg_icons_1.minusIcon : kendo_svg_icons_1.plusIcon
         },
-        tabindex: -1
-      })]);
+        icon: expanded_1 ? kendo_svg_icons_1.minusIcon : kendo_svg_icons_1.plusIcon
+      })])]);
     }
     return kendo_vue_common_1.getTemplate.call(this, {
       h: h,

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

@@ -21,7 +21,14 @@ export interface GridSelectionCellData {
 /**
  * @hidden
  */
-export interface GridSelectionCellAll extends GridSelectionCellMethods, GridSelectionCellData {
+export interface GridSelectionCellComputed {
+    [key: string]: any;
+    tdClass: object;
+}
+/**
+ * @hidden
+ */
+export interface GridSelectionCellAll extends GridSelectionCellMethods, GridSelectionCellData, GridSelectionCellComputed {
 }
 /**
  * @hidden

package/dist/npm/cells/GridSelectionCell.js

@@ -52,6 +52,15 @@ var GridSelectionCellVue2 = {
       inputId: (0, kendo_vue_common_1.guid)()
     };
   },
+  computed: {
+    tdClass: function tdClass() {
+      var _a;
+      var className = this.$props.className;
+      return _a = {
+        'k-table-td': true
+      }, _a[className] = className, _a;
+    }
+  },
   methods: {
     triggerKeydown: function triggerKeydown(e) {
       this.$emit('cellkeydown', {
@@ -94,7 +103,7 @@ var GridSelectionCellVue2 = {
         "data-keyboardnavlevel": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_LEVEL],
         "data-keyboardnavid": navAttrs[kendo_vue_data_tools_1.KEYBOARD_NAV_DATA_ID]
       },
-      "class": this.$props.className,
+      "class": this.tdClass,
       "aria-colindex": this.$props.ariaColumnIndex,
       role: 'gridcell',
       tabindex: navAttrs.tabIndex,

package/dist/npm/columnMenu/ColumnMenu.js

@@ -12,6 +12,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_popup_1 = require("@progress/kendo-vue-popup");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var ColumnMenuContent_1 = require("./ColumnMenuContent");
 var kendo_vue_data_tools_1 = require("@progress/kendo-vue-data-tools");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
@@ -92,8 +93,8 @@ var ColumnMenuVue2 = {
     handleFocus: function handleFocus(_) {
       clearTimeout(this.blurTimeout);
     },
-    anchorClick: function anchorClick() {
-      var that = this;
+    anchorClick: function anchorClick(e) {
+      e.preventDefault();
       this.show = !this.show;
     },
     closeMenu: function closeMenu() {
@@ -126,24 +127,26 @@ var ColumnMenuVue2 = {
       style: {
         display: 'inline'
       }
-    }, [h("div", {
+    }, [h("a", {
       "class": 'k-grid-header-menu k-grid-column-menu',
-      tabindex: 0,
+      title: "".concat(this.$props.column.field, " ").concat(ls.toLanguageString(main_1.columnMenu, main_1.messages[main_1.columnMenu])),
       attrs: this.v3 ? undefined : {
-        tabindex: 0,
-        title: "".concat(this.$props.column.field, " ").concat(ls.toLanguageString(main_1.columnMenu, main_1.messages[main_1.columnMenu]))
+        title: "".concat(this.$props.column.field, " ").concat(ls.toLanguageString(main_1.columnMenu, main_1.messages[main_1.columnMenu])),
+        href: "#"
       },
-      title: "".concat(this.$props.column.field, " ").concat(ls.toLanguageString(main_1.columnMenu, main_1.messages[main_1.columnMenu])),
       ref: (0, kendo_vue_common_1.setRef)(this, 'kendoAnchor', this._anchor),
       onClick: this.anchorClick,
       on: this.v3 ? undefined : {
         "click": this.anchorClick
-      }
+      },
+      href: "#"
     }, [h(kendo_vue_common_1.Icon, {
       name: 'more-vertical',
       attrs: this.v3 ? undefined : {
-        name: 'more-vertical'
-      }
+        name: 'more-vertical',
+        icon: kendo_svg_icons_1.moreVerticalIcon
+      },
+      icon: kendo_svg_icons_1.moreVerticalIcon
     })]),
     // @ts-ignore function children
     h(kendo_vue_popup_1.Popup, {

package/dist/npm/columnMenu/GridColumnMenuCheckboxFilter.js

@@ -41,6 +41,7 @@ var main_1 = require("../messages/main");
 var kendo_data_query_1 = require("@progress/kendo-data-query");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var main_2 = require("../utils/main");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -154,8 +155,10 @@ var GridColumnMenuCheckboxFilterVue2 = {
       }, [h(kendo_vue_common_1.Icon, {
         name: 'search',
         attrs: this.v3 ? undefined : {
-          name: 'search'
+          name: 'search',
+          icon: kendo_svg_icons_1.searchIcon
         },
+        icon: kendo_svg_icons_1.searchIcon,
         "class": "k-input-icon"
       }), h("input", {
         ref: 'searchBox',
@@ -221,9 +224,11 @@ var GridColumnMenuCheckboxFilterVue2 = {
           title: localizationService.toLanguageString(main_1.filterTitle, main_1.messages[main_1.filterTitle]),
           attrs: _this2.v3 ? undefined : {
             title: localizationService.toLanguageString(main_1.filterTitle, main_1.messages[main_1.filterTitle]),
-            iconClass: 'k-i-filter'
+            icon: 'filter',
+            svgIcon: kendo_svg_icons_1.filterIcon
           },
-          iconClass: 'k-i-filter',
+          icon: 'filter',
+          svgIcon: kendo_svg_icons_1.filterIcon,
           onClick: _this2.onFilterExpand,
           on: _this2.v3 ? undefined : {
             "click": _this2.onFilterExpand
@@ -382,9 +387,11 @@ var GridColumnMenuCheckboxFilterVue2 = {
         title: localizationService.toLanguageString(main_1.filterTitle, main_1.messages[main_1.filterTitle]),
         attrs: _this2.v3 ? undefined : {
           title: localizationService.toLanguageString(main_1.filterTitle, main_1.messages[main_1.filterTitle]),
-          iconClass: 'k-i-filter'
+          icon: 'filter',
+          svgIcon: kendo_svg_icons_1.filterIcon
         },
-        iconClass: 'k-i-filter',
+        icon: 'filter',
+        svgIcon: kendo_svg_icons_1.filterIcon,
         onClick: _this2.onFilterExpand,
         on: _this2.v3 ? undefined : {
           "click": _this2.onFilterExpand

package/dist/npm/columnMenu/GridColumnMenuFilter.js

@@ -43,6 +43,7 @@ var main_1 = require("../messages/main");
 var GridColumnMenuFilterCell_1 = require("./GridColumnMenuFilterCell");
 var GridColumnMenuFilterOperators_1 = require("./GridColumnMenuFilterOperators");
 var kendo_vue_dropdowns_1 = require("@progress/kendo-vue-dropdowns");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -360,9 +361,11 @@ var GridColumnMenuFilterVue2 = {
           title: localizationService.toLanguageString(main_1.filterTitle, main_1.messages[main_1.filterTitle]),
           attrs: _this2.v3 ? undefined : {
             title: localizationService.toLanguageString(main_1.filterTitle, main_1.messages[main_1.filterTitle]),
-            iconClass: 'k-i-filter'
+            icon: 'filter',
+            svgIcon: kendo_svg_icons_1.filterIcon
           },
-          iconClass: 'k-i-filter',
+          icon: 'filter',
+          svgIcon: kendo_svg_icons_1.filterIcon,
           onMenuitemclick: _this2.onFilterExpand,
           on: _this2.v3 ? undefined : {
             "menuitemclick": _this2.onFilterExpand
@@ -649,9 +652,11 @@ var GridColumnMenuFilterVue2 = {
         title: localizationService.toLanguageString(main_1.filterTitle, main_1.messages[main_1.filterTitle]),
         attrs: _this2.v3 ? undefined : {
           title: localizationService.toLanguageString(main_1.filterTitle, main_1.messages[main_1.filterTitle]),
-          iconClass: 'k-i-filter'
+          icon: 'filter',
+          svgIcon: kendo_svg_icons_1.filterIcon
         },
-        iconClass: 'k-i-filter',
+        icon: 'filter',
+        svgIcon: kendo_svg_icons_1.filterIcon,
         onMenuitemclick: _this2.onFilterExpand,
         on: _this2.v3 ? undefined : {
           "menuitemclick": _this2.onFilterExpand