@progress/kendo-vue-grid 3.5.2 → 3.5.4-dev.202209071223

package/dist/es/Grid.js

@@ -119,6 +119,7 @@ var GridVue2 = {
     group: Array,
     groupable: [Boolean, Object],
     editField: String,
+    rowClass: Function,
     scrollable: {
       type: String,
       default: 'scrollable'
@@ -1582,7 +1583,8 @@ var GridVue2 = {
         render: rowRenderFunction,
         ariaRowIndex: currentAriaRowIndex,
         dataIndex: dataIndex,
-        isSelected: dataRow.isSelected
+        isSelected: dataRow.isSelected,
+        "class": this.$props.rowClass ? this.$props.rowClass(item) : ''
       }, this.v3 ? function () {
         return [dataRow.call(_this2, item, rowId, dataIndex).row];
       } : [dataRow.call(_this2, item, rowId, dataIndex).row]), this.$props.detail && item.rowType === 'data' && item.expanded && h("tr", {
@@ -1692,10 +1694,6 @@ var GridVue2 = {
     };
 
     var colGroups = h("colgroup", {
-      role: "presentation",
-      attrs: this.v3 ? undefined : {
-        role: "presentation"
-      },
       ref: setRef(this, 'colGroup')
     }, [columnsWithColGroup.map(function (column, index) {
       return h("col", {

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

@@ -7,7 +7,7 @@ import { GridFilterCellProps } from '../interfaces/GridFilterCellProps';
 /**
  * @hidden
  */
-export interface GridFilterCellMethods extends Vue2type {
+export interface GridFilterCellMethods {
     triggerClick: () => void;
     inputChange: (value: any, e: any) => void;
     operatorChange: (operatorValue: any, e: any) => void;
@@ -18,7 +18,12 @@ export interface GridFilterCellMethods extends Vue2type {
 /**
  * @hidden
  */
-declare let GridFilterCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridFilterCellMethods>, {}, RecordPropsDefinition<GridFilterCellProps>>;
+export interface GridFilterCellAll extends GridFilterCellMethods, GridFilterCellProps, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let GridFilterCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridFilterCellAll>, {}, RecordPropsDefinition<GridFilterCellProps>>;
 /**
  * @hidden
  */

package/dist/es/cells/GridFilterCell.js

@@ -30,7 +30,8 @@ var GridFilterCellVue2 = {
     operators: Array,
     booleanValues: Array,
     onChange: Function,
-    render: [String, Function, Object]
+    render: [String, Function, Object],
+    ariaLabel: String
   },
   inject: {
     kendoLocalizationService: {
@@ -107,7 +108,8 @@ var GridFilterCellVue2 = {
             title: localizationService.toLanguageString(filterChooseOperator, messages[filterChooseOperator]),
             popupSettings: {
               width: ''
-            }
+            },
+            ariaLabel: 'filter'
           },
           "class": "k-dropdown-operator",
           iconClassName: "k-i-filter k-icon",
@@ -116,7 +118,8 @@ var GridFilterCellVue2 = {
           title: localizationService.toLanguageString(filterChooseOperator, messages[filterChooseOperator]),
           popupSettings: {
             width: ''
-          }
+          },
+          ariaLabel: 'filter'
         })
       );
     };
@@ -131,7 +134,8 @@ var GridFilterCellVue2 = {
               value: value,
               attrs: this.v3 ? undefined : {
                 value: value,
-                title: this.$props.title
+                title: this.$props.title,
+                ariaLabel: this.ariaLabel
               },
               onChange: function onChange(e) {
                 _this.inputChange(e.value, e.event);
@@ -141,7 +145,8 @@ var GridFilterCellVue2 = {
                   _this.inputChange(e.value, e.event);
                 }
               },
-              title: this.$props.title
+              title: this.$props.title,
+              ariaLabel: this.ariaLabel
             })
           );
 
@@ -151,7 +156,8 @@ var GridFilterCellVue2 = {
               value: value,
               attrs: this.v3 ? undefined : {
                 value: value,
-                title: this.$props.title
+                title: this.$props.title,
+                ariaLabel: this.ariaLabel
               },
               onChange: function onChange(e) {
                 _this.inputChange(e.value, e);
@@ -161,7 +167,8 @@ var GridFilterCellVue2 = {
                   _this.inputChange(e.value, e);
                 }
               },
-              title: this.$props.title
+              title: this.$props.title,
+              ariaLabel: this.ariaLabel
             })
           );
 
@@ -182,11 +189,13 @@ var GridFilterCellVue2 = {
                 }),
                 "data-items": booleanValues,
                 textField: "text",
-                title: this.$props.title
+                title: this.$props.title,
+                ariaLabel: this.ariaLabel
               },
               "data-items": booleanValues,
               textField: "text",
-              title: this.$props.title
+              title: this.$props.title,
+              ariaLabel: this.ariaLabel
             })
           );
 
@@ -209,17 +218,19 @@ var GridFilterCellVue2 = {
             },
             title: this.$props.title,
             attrs: this.v3 ? undefined : {
-              title: this.$props.title
-            }
+              title: this.$props.title,
+              "aria-label": this.ariaLabel
+            },
+            "aria-label": this.ariaLabel
           })]);
       }
     };
 
     var defaultRendering = h("div", {
       "class": "k-filtercell"
-    }, [h("div", {
-      "class": "k-filtercell-wrapper"
-    }, [filterComponent.call(this, this.$props.filterType, this.$props.value), renderOperatorEditor.call(this), // @ts-ignore function children 
+    }, [h("span", [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
+      "class": "k-filtercell-operator"
+    }, [renderOperatorEditor.call(this), // @ts-ignore function children 
     h(Button, {
       type: "button",
       attrs: this.v3 ? undefined : {
@@ -237,7 +248,7 @@ var GridFilterCellVue2 = {
       on: this.v3 ? undefined : {
         "click": this.clear
       }
-    })])]);
+    })])])]);
     var gridListeners = this.$props.grid ? getListeners.call(this.$props.grid) : null;
     var cellRenderFunction = templateRendering.call(this.$props.grid, this.$props.render, gridListeners);
     return getTemplate.call(this, {

package/dist/es/cells/GridGroupCell.js

@@ -155,7 +155,7 @@ var GridGroupCellVue2 = {
           tabindex: -1
         },
         tabindex: -1,
-        "class": expanded ? 'k-i-collapse k-icon' : 'k-i-expand k-icon'
+        "class": expanded ? 'k-i-caret-alt-down k-icon' : 'k-i-caret-alt-right k-icon'
       }), dataItem[field].toString()])]);
     }
 

package/dist/es/columnMenu/ColumnMenu.js

@@ -126,7 +126,7 @@ var ColumnMenuVue2 = {
         display: 'inline'
       }
     }, [h("div", {
-      "class": 'k-grid-column-menu k-grid-filter',
+      "class": 'k-grid-header-menu k-grid-column-menu',
       tabindex: 0,
       attrs: this.v3 ? undefined : {
         tabindex: 0,

package/dist/es/drag/CommonDragLogic.js

@@ -151,7 +151,7 @@ var CommonDragLogic = /** @class */ (function () {
         this.dragElementClue.top = (event.pageY + 10);
         this.dragElementClue.left = event.pageX;
         this.dragElementClue.innerText = innerText;
-        this.dragElementClue.status = (invalidIndex || !targetElement) ? 'k-i-cancel' : 'k-i-add';
+        this.dragElementClue.status = (invalidIndex || !targetElement) ? 'k-i-cancel' : 'k-i-plus';
     };
     CommonDragLogic.prototype.updateDropElementClue = function (event, element, targetElement, invalidIndex) {
         if (!this.dropElementClue) {

package/dist/es/drag/DragClue.d.ts

@@ -12,7 +12,7 @@ export interface DragClueData extends Vue2type {
     top?: number;
     left?: number;
     innerText?: string;
-    status?: 'k-i-cancel' | 'k-i-add';
+    status?: 'k-i-cancel' | 'k-i-plus';
 }
 /**
  * @hidden

package/dist/es/drag/GroupingIndicator.js

@@ -80,7 +80,7 @@ var GroupingIndicatorVue2 = {
         }, [h("div", {
           "class": "k-chip k-chip-lg k-rounded-md k-chip-solid k-chip-solid-base"
         }, [h("span", {
-          "class": 'k-chip-icon k-icon k-i-sort-' + _this.$props.dir + '-sm'
+          "class": 'k-chip-icon k-icon k-i-sort-' + _this.$props.dir + '-small'
         }), h("span", {
           "class": "k-chip-content",
           tabindex: -1,
@@ -96,7 +96,7 @@ var GroupingIndicatorVue2 = {
         }, [_this.$props.title])]), h("span", {
           "class": "k-chip-actions"
         }, [h("span", {
-          "class": "k-chip-action",
+          "class": "k-chip-action k-chip-remove-action",
           tabindex: -1,
           attrs: _this.v3 ? undefined : {
             tabindex: -1
@@ -114,7 +114,7 @@ var GroupingIndicatorVue2 = {
       }, [h("div", {
         "class": "k-chip k-chip-lg k-rounded-md k-chip-solid k-chip-solid-base"
       }, [h("span", {
-        "class": 'k-chip-icon k-icon k-i-sort-' + _this.$props.dir + '-sm'
+        "class": 'k-chip-icon k-icon k-i-sort-' + _this.$props.dir + '-small'
       }), h("span", {
         "class": "k-chip-content",
         tabindex: -1,
@@ -130,7 +130,7 @@ var GroupingIndicatorVue2 = {
       }, [_this.$props.title])]), h("span", {
         "class": "k-chip-actions"
       }, [h("span", {
-        "class": "k-chip-action",
+        "class": "k-chip-action k-chip-remove-action",
         tabindex: -1,
         attrs: _this.v3 ? undefined : {
           tabindex: -1

package/dist/es/footer/FooterRow.js

@@ -62,7 +62,12 @@ var FooterRowVue2 = {
       }, [footerCellRendering]);
     };
 
-    return h("tr", [footerColumns(this.$props.columns).map(renderCell, this)]);
+    return h("tr", {
+      role: 'row',
+      attrs: this.v3 ? undefined : {
+        role: 'row'
+      }
+    }, [footerColumns(this.$props.columns).map(renderCell, this)]);
   }
 };
 /**

package/dist/es/header/FilterRow.d.ts

@@ -17,18 +17,24 @@ export interface FilterRowProps {
     sort?: SortDescriptor[];
     cellRender?: any;
     isRtl?: boolean;
+    ariaRowIndex?: number;
 }
 /**
  * @hidden
  */
-export interface FilterRowMethods extends Vue2type {
+export interface FilterRowMethods {
     headerCellClassName: (field?: string, locked?: boolean) => string;
     setFilter: (value: string | number, operator: string | Function, field: string | undefined, e: any) => void;
 }
 /**
  * @hidden
  */
-declare let FilterRowVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<FilterRowMethods>, {}, RecordPropsDefinition<FilterRowProps>>;
+export interface FilterRowAll extends FilterRowMethods, FilterRowProps, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let FilterRowVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<FilterRowAll>, {}, RecordPropsDefinition<FilterRowProps>>;
 /**
  * @hidden
  */

package/dist/es/header/FilterRow.js

@@ -22,7 +22,8 @@ var FilterRowVue2 = {
     filterOperators: Object,
     sort: [Object, Array],
     cellRender: [String, Function, Object],
-    isRtl: Boolean
+    isRtl: Boolean,
+    ariaRowIndex: Number
   },
   inject: {
     kendoLocalizationService: {
@@ -191,7 +192,13 @@ var FilterRowVue2 = {
       });
     }, this);
     return h("tr", {
-      "class": "k-filter-row"
+      "class": "k-filter-row",
+      "aria-rowindex": this.ariaRowIndex,
+      attrs: this.v3 ? undefined : {
+        "aria-rowindex": this.ariaRowIndex,
+        role: 'row'
+      },
+      role: 'row'
     }, [filterCells]);
   }
 };

package/dist/es/header/GridHeaderCell.d.ts

@@ -7,7 +7,7 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } fr
 /**
  * @hidden
  */
-export interface GridHeaderCellMethods extends Vue2type {
+export interface GridHeaderCellMethods extends GridHeaderCellProps, Vue2type {
     clickHandler: (event: any) => void;
 }
 /**

package/dist/es/header/GridHeaderCell.js

@@ -17,7 +17,9 @@ var GridHeaderCellVue2 = {
   },
   methods: {
     clickHandler: function clickHandler(event) {
-      this.$emit('headercellclick', event);
+      if (this.sortable) {
+        this.$emit('headercellclick', event);
+      }
     }
   },
   // @ts-ignore
@@ -33,14 +35,15 @@ var GridHeaderCellVue2 = {
     var defaultSlot = getDefaultSlots(this);
     var renderTemplate = this.$props.render;
     var textInCell = this.$props.title || this.$props.field || "\xA0";
-    var defaultRendering = this.$props.sortable ? h("span", {
-      "class": "k-link",
+    var defaultRendering = h("span", {
+      "class": 'k-link',
       onClick: this.clickHandler,
       on: this.v3 ? undefined : {
         "click": this.clickHandler
       }
-    }, [textInCell, defaultSlot]) : defaultSlot ? h("span", [textInCell, defaultSlot]) // @ts-ignore
-    : this.v3 ? textInCell : this._v(textInCell);
+    }, [h("span", {
+      "class": 'k-column-title'
+    }, [textInCell]), defaultSlot]);
     return getTemplate.call(this, {
       h: h,
       template: renderTemplate,

package/dist/es/header/Header.js

@@ -107,10 +107,6 @@ var HeaderVue2 = {
         role: "presentation"
       }
     }, [h("colgroup", {
-      role: "presentation",
-      attrs: this.v3 ? undefined : {
-        role: "presentation"
-      },
       ref: setRef(this, 'colGroupHeader')
     }, [this.$props.cols]), this.$props.headerRow])])]);
   }

package/dist/es/header/HeaderRow.js

@@ -6,8 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 import { normalize } from '../interfaces/GridSortSettings';
 import { ColumnResizer } from '../drag/ColumnResizer';
 import { ColumnDraggable } from '../drag/ColumnDraggable';
-import { GridHeaderCell } from './GridHeaderCell'; // import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps';
-
+import { GridHeaderCell } from './GridHeaderCell';
 import { ColumnMenu } from '../columnMenu/ColumnMenu';
 import { templateRendering, hasListener, getListeners, Keys, noop } from '@progress/kendo-vue-common';
 import { HeaderThElement } from '@progress/kendo-vue-data-tools'; // from '../../../datatools/src/main';
@@ -220,7 +219,7 @@ var HeaderRowVue2 = {
 
           return iconSortIndex >= 0 && [h("span", {
             key: 1,
-            "class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-sm'
+            "class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-small'
           }), _this.$props.sort.length > 1 && h("span", {
             key: 2,
             "class": "k-sort-order"
@@ -316,7 +315,9 @@ var HeaderRowVue2 = {
               filterOperators: _this2.$props.filterOperators,
               onFilterchange: _this2.filterChangeHandler,
               render: columnMenuRender
-            }), column.internalHeaderCell && // @ts-ignore function children
+            }), column.internalHeaderCell && h("span", {
+              "class": 'k-cell-inner'
+            }, [// @ts-ignore function children
             h(column.internalHeaderCell, {
               key: 1,
               field: column.field,
@@ -343,7 +344,9 @@ var HeaderRowVue2 = {
               render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
             }, _this2.v3 ? function () {
               return [sortIcon];
-            } : [sortIcon]) || // @ts-ignore function children
+            } : [sortIcon])]) || h("span", {
+              "class": 'k-cell-inner'
+            }, [// @ts-ignore function children
             h(GridHeaderCell, {
               key: 1,
               field: column.field,
@@ -368,7 +371,7 @@ var HeaderRowVue2 = {
               render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
             }, _this2.v3 ? function () {
               return [sortIcon];
-            } : [sortIcon]), _this2.$props.columnResize && _this2.$props.columnResize.resizable // @ts-ignore
+            } : [sortIcon])]), _this2.$props.columnResize && _this2.$props.columnResize.resizable // @ts-ignore
             && column.resizable && h(ColumnResizer, {
               key: 2,
               onResize: function onResize(e, element, end) {
@@ -416,7 +419,9 @@ var HeaderRowVue2 = {
             filterOperators: _this2.$props.filterOperators,
             onFilterchange: _this2.filterChangeHandler,
             render: columnMenuRender
-          }), column.internalHeaderCell && h(column.internalHeaderCell, {
+          }), column.internalHeaderCell && h("span", {
+            "class": 'k-cell-inner'
+          }, [h(column.internalHeaderCell, {
             key: 1,
             field: column.field,
             attrs: _this2.v3 ? undefined : {
@@ -442,7 +447,9 @@ var HeaderRowVue2 = {
             render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
           }, _this2.v3 ? function () {
             return [sortIcon];
-          } : [sortIcon]) || h(GridHeaderCell, {
+          } : [sortIcon])]) || h("span", {
+            "class": 'k-cell-inner'
+          }, [h(GridHeaderCell, {
             key: 1,
             field: column.field,
             attrs: _this2.v3 ? undefined : {
@@ -466,7 +473,7 @@ var HeaderRowVue2 = {
             render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
           }, _this2.v3 ? function () {
             return [sortIcon];
-          } : [sortIcon]), _this2.$props.columnResize && _this2.$props.columnResize.resizable && column.resizable && h(ColumnResizer, {
+          } : [sortIcon])]), _this2.$props.columnResize && _this2.$props.columnResize.resizable && column.resizable && h(ColumnResizer, {
             key: 2,
             onResize: function onResize(e, element, end) {
               return _this.$props.columnResize && _this.$props.columnResize.dragHandler(e, column, element, end);
@@ -505,7 +512,12 @@ var HeaderRowVue2 = {
         onReleaseHandler: this.releaseHandler
       }, this.v3 ? function () {
         return [cells.call(_this3, rowIndexes)];
-      } : [cells.call(_this3, rowIndexes)]) || h("tr", [cells.call(this, rowIndexes)]);
+      } : [cells.call(_this3, rowIndexes)]) || h("tr", {
+        role: 'row',
+        attrs: this.v3 ? undefined : {
+          role: 'row'
+        }
+      }, [cells.call(this, rowIndexes)]);
     }, this), this.$props.filterRow]);
   }
 };

package/dist/es/interfaces/GridFilterCellProps.d.ts

@@ -61,4 +61,8 @@ export interface GridFilterCellProps {
      * The method for rendering the filter cell.
      */
     render?: any;
+    /**
+     * The ariaLabel of the filter editor.
+     */
+    ariaLabel?: string;
 }

package/dist/es/interfaces/GridProps.d.ts

@@ -192,6 +192,11 @@ export interface GridProps {
      * item ([more information and examples]({% slug editing_inline_grid %})).
      */
     editField?: string;
+    /**
+     * A function that returns a custom class applied to the row.
+     * @param item - the item for the row.
+     */
+    rowClass?: Function;
     /**
      * Defines the scroll mode that is used by the Grid ([see example]({% slug scrollmmodes_grid %}).
      *

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-grid',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1662110652,
+    publishDate: 1662553066,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/Grid.js

@@ -119,6 +119,7 @@ var GridVue2 = {
     group: Array,
     groupable: [Boolean, Object],
     editField: String,
+    rowClass: Function,
     scrollable: {
       type: String,
       default: 'scrollable'
@@ -1582,7 +1583,8 @@ var GridVue2 = {
         render: rowRenderFunction,
         ariaRowIndex: currentAriaRowIndex,
         dataIndex: dataIndex,
-        isSelected: dataRow.isSelected
+        isSelected: dataRow.isSelected,
+        "class": this.$props.rowClass ? this.$props.rowClass(item) : ''
       }, this.v3 ? function () {
         return [dataRow.call(_this2, item, rowId, dataIndex).row];
       } : [dataRow.call(_this2, item, rowId, dataIndex).row]), this.$props.detail && item.rowType === 'data' && item.expanded && h("tr", {
@@ -1692,10 +1694,6 @@ var GridVue2 = {
     };
 
     var colGroups = h("colgroup", {
-      role: "presentation",
-      attrs: this.v3 ? undefined : {
-        role: "presentation"
-      },
       ref: setRef(this, 'colGroup')
     }, [columnsWithColGroup.map(function (column, index) {
       return h("col", {

package/dist/esm/cells/GridFilterCell.d.ts

@@ -7,7 +7,7 @@ import { GridFilterCellProps } from '../interfaces/GridFilterCellProps';
 /**
  * @hidden
  */
-export interface GridFilterCellMethods extends Vue2type {
+export interface GridFilterCellMethods {
     triggerClick: () => void;
     inputChange: (value: any, e: any) => void;
     operatorChange: (operatorValue: any, e: any) => void;
@@ -18,7 +18,12 @@ export interface GridFilterCellMethods extends Vue2type {
 /**
  * @hidden
  */
-declare let GridFilterCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridFilterCellMethods>, {}, RecordPropsDefinition<GridFilterCellProps>>;
+export interface GridFilterCellAll extends GridFilterCellMethods, GridFilterCellProps, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let GridFilterCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridFilterCellAll>, {}, RecordPropsDefinition<GridFilterCellProps>>;
 /**
  * @hidden
  */

package/dist/esm/cells/GridFilterCell.js

@@ -30,7 +30,8 @@ var GridFilterCellVue2 = {
     operators: Array,
     booleanValues: Array,
     onChange: Function,
-    render: [String, Function, Object]
+    render: [String, Function, Object],
+    ariaLabel: String
   },
   inject: {
     kendoLocalizationService: {
@@ -107,7 +108,8 @@ var GridFilterCellVue2 = {
             title: localizationService.toLanguageString(filterChooseOperator, messages[filterChooseOperator]),
             popupSettings: {
               width: ''
-            }
+            },
+            ariaLabel: 'filter'
           },
           "class": "k-dropdown-operator",
           iconClassName: "k-i-filter k-icon",
@@ -116,7 +118,8 @@ var GridFilterCellVue2 = {
           title: localizationService.toLanguageString(filterChooseOperator, messages[filterChooseOperator]),
           popupSettings: {
             width: ''
-          }
+          },
+          ariaLabel: 'filter'
         })
       );
     };
@@ -131,7 +134,8 @@ var GridFilterCellVue2 = {
               value: value,
               attrs: this.v3 ? undefined : {
                 value: value,
-                title: this.$props.title
+                title: this.$props.title,
+                ariaLabel: this.ariaLabel
               },
               onChange: function onChange(e) {
                 _this.inputChange(e.value, e.event);
@@ -141,7 +145,8 @@ var GridFilterCellVue2 = {
                   _this.inputChange(e.value, e.event);
                 }
               },
-              title: this.$props.title
+              title: this.$props.title,
+              ariaLabel: this.ariaLabel
             })
           );
 
@@ -151,7 +156,8 @@ var GridFilterCellVue2 = {
               value: value,
               attrs: this.v3 ? undefined : {
                 value: value,
-                title: this.$props.title
+                title: this.$props.title,
+                ariaLabel: this.ariaLabel
               },
               onChange: function onChange(e) {
                 _this.inputChange(e.value, e);
@@ -161,7 +167,8 @@ var GridFilterCellVue2 = {
                   _this.inputChange(e.value, e);
                 }
               },
-              title: this.$props.title
+              title: this.$props.title,
+              ariaLabel: this.ariaLabel
             })
           );
 
@@ -182,11 +189,13 @@ var GridFilterCellVue2 = {
                 }),
                 "data-items": booleanValues,
                 textField: "text",
-                title: this.$props.title
+                title: this.$props.title,
+                ariaLabel: this.ariaLabel
               },
               "data-items": booleanValues,
               textField: "text",
-              title: this.$props.title
+              title: this.$props.title,
+              ariaLabel: this.ariaLabel
             })
           );
 
@@ -209,17 +218,19 @@ var GridFilterCellVue2 = {
             },
             title: this.$props.title,
             attrs: this.v3 ? undefined : {
-              title: this.$props.title
-            }
+              title: this.$props.title,
+              "aria-label": this.ariaLabel
+            },
+            "aria-label": this.ariaLabel
           })]);
       }
     };
 
     var defaultRendering = h("div", {
       "class": "k-filtercell"
-    }, [h("div", {
-      "class": "k-filtercell-wrapper"
-    }, [filterComponent.call(this, this.$props.filterType, this.$props.value), renderOperatorEditor.call(this), // @ts-ignore function children 
+    }, [h("span", [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
+      "class": "k-filtercell-operator"
+    }, [renderOperatorEditor.call(this), // @ts-ignore function children 
     h(Button, {
       type: "button",
       attrs: this.v3 ? undefined : {
@@ -237,7 +248,7 @@ var GridFilterCellVue2 = {
       on: this.v3 ? undefined : {
         "click": this.clear
       }
-    })])]);
+    })])])]);
     var gridListeners = this.$props.grid ? getListeners.call(this.$props.grid) : null;
     var cellRenderFunction = templateRendering.call(this.$props.grid, this.$props.render, gridListeners);
     return getTemplate.call(this, {