@progress/kendo-vue-grid 8.0.3-develop.4 → 8.1.0-develop.1

package/GridNav.d.ts

@@ -9,6 +9,7 @@
  * @hidden
  */
 declare const GridNav: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    columnsRef: ArrayConstructor;
     currentData: ArrayConstructor;
     id: StringConstructor;
 }>, {}, {}, {}, {
@@ -17,10 +18,19 @@ declare const GridNav: import('vue').DefineComponent<import('vue').ExtractPropTy
     onNavigationAction(options: {
         event: any;
         focusElement: any;
+        action?: 'moveToNextPage' | 'moveToPrevPage' | 'reorderToLeft' | 'reorderToRight' | 'select';
     }): void;
     getLeafDataItems(): any;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("keydown" | "navigationaction" | "keyboardselectionchange" | "movetonextpage" | "movetoprevpage" | "columnreorder")[], "keydown" | "navigationaction" | "keyboardselectionchange" | "movetonextpage" | "movetoprevpage" | "columnreorder", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    columnsRef: ArrayConstructor;
     currentData: ArrayConstructor;
     id: StringConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{
+    onKeydown?: (...args: any[]) => any;
+    onColumnreorder?: (...args: any[]) => any;
+    onNavigationaction?: (...args: any[]) => any;
+    onKeyboardselectionchange?: (...args: any[]) => any;
+    onMovetonextpage?: (...args: any[]) => any;
+    onMovetoprevpage?: (...args: any[]) => any;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { GridNav };

package/GridNav.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),e=require("@progress/kendo-vue-common"),n=o.defineComponent({name:"KendoGridNav",props:{currentData:Array,id:String},inject:{onNavKeyDown:{default:e.noop},onNavFocus:{default:e.noop},onNavMount:{default:e.noop},handleDispatchFocus:{default:e.noop},kbContext:{default:null},navigation:{default:null}},mounted(){this.onNavMount({scope:this.$el||void 0})},updated(){this.onNavMount({scope:this.$el||void 0})},methods:{onKeyDown(t){this.onNavKeyDown(t,{navigation:this.navigation,kbContext:this.kbContext,onNavigationAction:this.onNavigationAction}),this.$emit("keydown",{dataItems:this.getLeafDataItems(),componentId:this._gridId,selectedField:this.$props.selectedField,event:t})},onFocus(t){this.onNavFocus(t,{kbContext:this.kbContext})},onNavigationAction(t){this.$emit("navigationaction",{focusElement:t.focusElement,event:t.event})},getLeafDataItems(){return this.$props.currentData.filter(t=>t.rowType==="data").map(t=>t.dataItem)}},render(){const t=e.getDefaultSlots(this);return o.createVNode("div",{onKeydown:this.onKeyDown,onFocusin:this.onFocus,id:this.$props.id,"data-keyboardnavscope":!0},[t])}});exports.GridNav=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),n=require("@progress/kendo-vue-common"),r=a.defineComponent({name:"KendoGridNav",props:{columnsRef:Array,currentData:Array,id:String},emits:["keydown","navigationaction","keyboardselectionchange","movetonextpage","movetoprevpage","columnreorder"],inject:{onNavKeyDown:{default:n.noop},onNavFocus:{default:n.noop},onNavMount:{default:n.noop},onNavBeforeUpdate:{default:n.noop},onNavUpdate:{default:n.noop},handleDispatchFocus:{default:n.noop},kbContext:{default:null},navigation:{default:null}},mounted(){this.onNavMount({scope:this.$el||void 0})},updated(){this.onNavUpdate({scope:this.$el||void 0})},methods:{onKeyDown(e){this.onNavKeyDown(e,{navigation:this.navigation,kbContext:this.kbContext,onNavigationAction:this.onNavigationAction}),this.onNavBeforeUpdate({scope:this.$el||void 0,kbContext:this.kbContext,navigation:this.navigation}),this.$emit("keydown",{dataItems:this.getLeafDataItems(),componentId:this._gridId,selectedField:this.$props.selectedField,event:e})},onFocus(e){this.onNavFocus(e,{kbContext:this.kbContext})},onNavigationAction(e){const{columnsRef:o}=this.$props;if(e.action==="moveToNextPage"&&this.$emit("movetonextpage",e.event),e.action==="moveToPrevPage"&&this.$emit("movetoprevpage",e.event),e.focusElement&&(e.action==="reorderToRight"||e.action==="reorderToLeft")){const t=parseInt(e.focusElement.ariaColIndex,10)-1;if(!o[t].reorderable)return;if(e.action==="reorderToRight"&&t<this.$props.columnsRef.length-1){if(o[t+1].disableReorder)return;this.$emit("columnreorder",t,t+1,e.event)}if(e.action==="reorderToLeft"&&t>0){if(o[t-1].disableReorder)return;this.$emit("columnreorder",t,t-1,e.event)}}e.action==="select"&&this.$emit("keyboardselectionchange",e.event),this.$emit("navigationaction",{focusElement:e.focusElement,event:e.event})},getLeafDataItems(){return this.$props.currentData.filter(e=>e.rowType==="data").map(e=>e.dataItem)}},render(){const e=n.getDefaultSlots(this);return a.createVNode("div",{onKeydown:this.onKeyDown,onFocusin:this.onFocus,id:this.$props.id,"data-keyboardnavscope":!0},[e])}});exports.GridNav=r;

package/GridNav.mjs

@@ -5,26 +5,34 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as o, createVNode as n } from "vue";
-import { noop as e, getDefaultSlots as a } from "@progress/kendo-vue-common";
-const d = /* @__PURE__ */ o({
+import { defineComponent as i, createVNode as r } from "vue";
+import { noop as n, getDefaultSlots as d } from "@progress/kendo-vue-common";
+const m = /* @__PURE__ */ i({
   name: "KendoGridNav",
   props: {
+    columnsRef: Array,
     currentData: Array,
     id: String
   },
+  emits: ["keydown", "navigationaction", "keyboardselectionchange", "movetonextpage", "movetoprevpage", "columnreorder"],
   inject: {
     onNavKeyDown: {
-      default: e
+      default: n
     },
     onNavFocus: {
-      default: e
+      default: n
     },
     onNavMount: {
-      default: e
+      default: n
+    },
+    onNavBeforeUpdate: {
+      default: n
+    },
+    onNavUpdate: {
+      default: n
     },
     handleDispatchFocus: {
-      default: e
+      default: n
     },
     kbContext: {
       default: null
@@ -39,50 +47,70 @@ const d = /* @__PURE__ */ o({
     });
   },
   updated() {
-    this.onNavMount({
+    this.onNavUpdate({
       scope: this.$el || void 0
     });
   },
   methods: {
-    onKeyDown(t) {
-      this.onNavKeyDown(t, {
+    onKeyDown(e) {
+      this.onNavKeyDown(e, {
         navigation: this.navigation,
         kbContext: this.kbContext,
         onNavigationAction: this.onNavigationAction
+      }), this.onNavBeforeUpdate({
+        scope: this.$el || void 0,
+        kbContext: this.kbContext,
+        navigation: this.navigation
       }), this.$emit("keydown", {
         dataItems: this.getLeafDataItems(),
-        //     mode,
-        //     cell,
         componentId: this._gridId,
         selectedField: this.$props.selectedField,
-        event: t
+        event: e
       });
     },
-    onFocus(t) {
-      this.onNavFocus(t, {
+    onFocus(e) {
+      this.onNavFocus(e, {
         kbContext: this.kbContext
       });
     },
-    onNavigationAction(t) {
-      this.$emit("navigationaction", {
-        focusElement: t.focusElement,
-        event: t.event
+    onNavigationAction(e) {
+      const {
+        columnsRef: o
+      } = this.$props;
+      if (e.action === "moveToNextPage" && this.$emit("movetonextpage", e.event), e.action === "moveToPrevPage" && this.$emit("movetoprevpage", e.event), e.focusElement && (e.action === "reorderToRight" || e.action === "reorderToLeft")) {
+        const t = parseInt(e.focusElement.ariaColIndex, 10) - 1;
+        if (!o[t].reorderable)
+          return;
+        if (e.action === "reorderToRight" && t < this.$props.columnsRef.length - 1) {
+          if (o[t + 1].disableReorder)
+            return;
+          this.$emit("columnreorder", t, t + 1, e.event);
+        }
+        if (e.action === "reorderToLeft" && t > 0) {
+          if (o[t - 1].disableReorder)
+            return;
+          this.$emit("columnreorder", t, t - 1, e.event);
+        }
+      }
+      e.action === "select" && this.$emit("keyboardselectionchange", e.event), this.$emit("navigationaction", {
+        focusElement: e.focusElement,
+        event: e.event
       });
     },
     getLeafDataItems() {
-      return this.$props.currentData.filter((t) => t.rowType === "data").map((t) => t.dataItem);
+      return this.$props.currentData.filter((e) => e.rowType === "data").map((e) => e.dataItem);
     }
   },
   render() {
-    const t = a(this);
-    return n("div", {
+    const e = d(this);
+    return r("div", {
       onKeydown: this.onKeyDown,
       onFocusin: this.onFocus,
       id: this.$props.id,
       "data-keyboardnavscope": !0
-    }, [t]);
+    }, [e]);
   }
 });
 export {
-  d as GridNav
+  m as GridNav
 };

package/GridState.d.ts

@@ -6,12 +6,13 @@
  *-------------------------------------------------------------------------------------------
  */
 import { GridProps } from './interfaces/GridProps';
-import { GridDataStateChangeEvent, GridDetailExpandChangeEvent, GridFilterChangeEvent, GridGroupChangeEvent, GridGroupExpandChangeEvent, GridPageChangeEvent, GridSearchChangeEvent, GridSortChangeEvent } from './interfaces/events';
+import { GridDataStateChangeEvent, GridDetailExpandChangeEvent, GridFilterChangeEvent, GridGroupChangeEvent, GridGroupExpandChangeEvent, GridPageChangeEvent, GridSearchChangeEvent, GridSortChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent } from './interfaces/events';
 /** @hidden */
 export type GridState = {
     filter?: GridProps['filter'];
     highlight?: GridProps['highlight'];
     search?: GridProps['search'];
+    select?: GridProps['select'];
     sort?: GridProps['sort'];
     skip?: GridProps['skip'];
     take?: GridProps['take'];
@@ -72,13 +73,16 @@ declare const GridStateProvider: import('vue').DefineComponent<{
     fixedScroll?: boolean;
     expandField?: string;
     selectedField?: string;
-    onSelectionchange?: (event: import('./interfaces/events').GridSelectionChangeEvent) => void;
+    onSelectionchange?: (event: GridSelectionChangeEvent) => void;
     highlight?: {
         [id: string]: boolean | {
             [id: string]: boolean;
         };
     };
-    onHeaderselectionchange?: (event: import('./interfaces/events').GridHeaderSelectionChangeEvent) => void;
+    defaultSelect?: import('@progress/kendo-vue-data-tools').SelectDescriptor;
+    select?: import('@progress/kendo-vue-data-tools').SelectDescriptor;
+    selectable?: boolean | import('./interfaces/GridSelectableSettings').GridSelectableSettings;
+    onHeaderselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
     onRowclick?: (event: import('./interfaces/events').GridRowClickEvent) => void;
     onRowdblclick?: (event: import('./interfaces/events').GridRowClickEvent) => void;
     onCellclick?: (event: any) => void;
@@ -172,13 +176,16 @@ declare const GridStateProvider: import('vue').DefineComponent<{
     fixedScroll?: boolean;
     expandField?: string;
     selectedField?: string;
-    onSelectionchange?: (event: import('./interfaces/events').GridSelectionChangeEvent) => void;
+    onSelectionchange?: (event: GridSelectionChangeEvent) => void;
     highlight?: {
         [id: string]: boolean | {
             [id: string]: boolean;
         };
     };
-    onHeaderselectionchange?: (event: import('./interfaces/events').GridHeaderSelectionChangeEvent) => void;
+    defaultSelect?: import('@progress/kendo-vue-data-tools').SelectDescriptor;
+    select?: import('@progress/kendo-vue-data-tools').SelectDescriptor;
+    selectable?: boolean | import('./interfaces/GridSelectableSettings').GridSelectableSettings;
+    onHeaderselectionchange?: (event: GridHeaderSelectionChangeEvent) => void;
     onRowclick?: (event: import('./interfaces/events').GridRowClickEvent) => void;
     onRowdblclick?: (event: import('./interfaces/events').GridRowClickEvent) => void;
     onCellclick?: (event: any) => void;

package/GridState.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),T=require("./key.js"),V=require("./common.js"),j=require("@progress/kendo-vue-common"),A=n.defineComponent({name:"KendoVueGridStateProvider",inheritAttrs:!1,props:V.gridProps,setup(e,{emit:l}){var u,c,d,o,h,g,r,i,s;const t=n.ref({filter:(u=e.defaultFilter)!=null?u:e.filter,highlight:e.highlight,search:(c=e.defaultSearch)!=null?c:e.search,sort:(d=e.defaultSort)!=null?d:e.sort,take:(o=e.defaultTake)!=null?o:e.take,skip:(h=e.defaultSkip)!=null?h:e.skip,group:(g=e.defaultGroup)!=null?g:e.group,detailExpand:(r=e.defaultDetailExpand)!=null?r:e.detailExpand,groupExpand:(i=e.defaultGroupExpand)!=null?i:e.groupExpand,columnsState:(s=e.defaultColumnsState)!=null?s:e.columnsState}),f=a=>{t.value={...t.value,...a.data},l("datastatechange",a)},v=n.computed(()=>e.filter||t.value.filter||null),x=a=>{t.value.filter=a.filter,l("filterchange",a)};n.watch(()=>e.filter,a=>{t.value.filter=a});const S=n.computed(()=>e.search||t.value.search||null),k=a=>{t.value.search=a.search,t.value.skip=0,l("searchchange",a)};n.watch(()=>e.search,a=>{t.value.search=a});const E=n.computed(()=>e.sort||t.value.sort||[]),m=a=>{t.value.sort=a.sort,l("sortchange",a)};n.watch(()=>e.sort,a=>{t.value.sort=a});const C=n.computed(()=>e.skip||t.value.skip),p=n.computed(()=>e.take||t.value.take),w=a=>{t.value.skip=a.page.skip,t.value.take=a.page.take,l("pagechange",a)};n.watch(()=>e.skip,a=>{t.value.skip=a}),n.watch(()=>e.take,a=>{t.value.take=a});const G=n.computed(()=>e.group||t.value.group||[]),P=a=>{t.value.group=a.group,l("groupchange",a)};n.watch(()=>e.group,a=>{t.value.group=a});const q=n.computed(()=>e.detailExpand||t.value.detailExpand||{}),y=a=>{t.value.detailExpand=a.detailExpand,l("detailexpandchange",a)};n.watch(()=>e.detailExpand,a=>{t.value.detailExpand=a});const D=n.computed(()=>e.groupExpand||t.value.groupExpand||[]),K=a=>{t.value.groupExpand=a.groupExpand,l("groupexpandchange",a)};n.watch(()=>e.groupExpand,a=>{t.value.groupExpand=a});const b=n.computed(()=>e.columnsState||e.defaultColumnsState||[]),F=a=>{t.value.columnsState=a.columnsState,l("columnsstatechange",a)};n.watch(()=>e.columnsState,a=>{t.value.columnsState=a}),n.provide(T.KendoKey,{sort:E,sortchange:m,filter:v,filterchange:x,search:S,searchchange:k,skip:C,take:p,pagechange:w,group:G,groupchange:P,detailExpand:q,detailexpandchange:y,groupExpand:D,groupexpandchange:K,columnsState:b,columnsstatechange:F,datastatechange:f})},render(){return j.getDefaultSlots(this)}});exports.GridStateProvider=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue"),H=require("./key.js"),M=require("./common.js"),O=require("@progress/kendo-vue-common"),z=l.defineComponent({name:"KendoVueGridStateProvider",inheritAttrs:!1,props:M.gridProps,setup(a,{emit:n}){var c,u,d,o,h,g,r,s,i,f;const t=l.ref({filter:(c=a.defaultFilter)!=null?c:a.filter,highlight:a.highlight,select:(u=a.defaultSelect)!=null?u:a.select,search:(d=a.defaultSearch)!=null?d:a.search,sort:(o=a.defaultSort)!=null?o:a.sort,take:(h=a.defaultTake)!=null?h:a.take,skip:(g=a.defaultSkip)!=null?g:a.skip,group:(r=a.defaultGroup)!=null?r:a.group,detailExpand:(s=a.defaultDetailExpand)!=null?s:a.detailExpand,groupExpand:(i=a.defaultGroupExpand)!=null?i:a.groupExpand,columnsState:(f=a.defaultColumnsState)!=null?f:a.columnsState}),S=e=>{t.value={...t.value,...e.data},n("datastatechange",e)},v=l.computed(()=>a.filter||t.value.filter||null),x=e=>{t.value.filter=e.filter,n("filterchange",e)};l.watch(()=>a.filter,e=>{t.value.filter=e});const k=l.computed(()=>a.search||t.value.search||null),E=e=>{t.value.search=e.search,t.value.skip=0,n("searchchange",e)};l.watch(()=>a.search,e=>{t.value.search=e});const m=l.computed(()=>a.select||t.value.select||null),C=e=>{t.value.select=e.select,n("selectionchange",e)},w=e=>{t.value.select=e.select,n("headerselectionchange",e)},G=l.computed(()=>a.sort||t.value.sort||[]),P=e=>{t.value.sort=e.sort,n("sortchange",e)};l.watch(()=>a.sort,e=>{t.value.sort=e});const p=l.computed(()=>a.skip||t.value.skip),q=l.computed(()=>a.take||t.value.take),y=e=>{t.value.skip=e.page.skip,t.value.take=e.page.take,n("pagechange",e)};l.watch(()=>a.skip,e=>{t.value.skip=e}),l.watch(()=>a.take,e=>{t.value.take=e});const D=l.computed(()=>a.group||t.value.group||[]),K=e=>{t.value.group=e.group,n("groupchange",e)};l.watch(()=>a.group,e=>{t.value.group=e});const b=l.computed(()=>a.detailExpand||t.value.detailExpand||{}),F=e=>{t.value.detailExpand=e.detailExpand,n("detailexpandchange",e)};l.watch(()=>a.detailExpand,e=>{t.value.detailExpand=e});const T=l.computed(()=>a.groupExpand||t.value.groupExpand||[]),V=e=>{t.value.groupExpand=e.groupExpand,n("groupexpandchange",e)};l.watch(()=>a.groupExpand,e=>{t.value.groupExpand=e});const j=l.computed(()=>a.columnsState||a.defaultColumnsState||[]),A=e=>{t.value.columnsState=e.columnsState,n("columnsstatechange",e)};l.watch(()=>a.columnsState,e=>{t.value.columnsState=e}),l.provide(H.KendoKey,{sort:G,sortchange:P,filter:v,filterchange:x,search:k,searchchange:E,skip:p,take:q,pagechange:y,select:m,selectionchange:C,headerselectionchange:w,group:D,groupchange:K,detailExpand:b,detailexpandchange:F,groupExpand:T,groupexpandchange:V,columnsState:j,columnsstatechange:A,datastatechange:S})},render(){return O.getDefaultSlots(this)}});exports.GridStateProvider=z;

package/GridState.mjs

@@ -5,110 +5,117 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as b, ref as j, computed as n, watch as u, provide as q } from "vue";
-import { KendoKey as z } from "./key.mjs";
-import { gridProps as B } from "./common.mjs";
-import { getDefaultSlots as H } from "@progress/kendo-vue-common";
-const N = /* @__PURE__ */ b({
+import { defineComponent as B, ref as I, computed as n, watch as u, provide as J } from "vue";
+import { KendoKey as L } from "./key.mjs";
+import { gridProps as M } from "./common.mjs";
+import { getDefaultSlots as N } from "@progress/kendo-vue-common";
+const W = /* @__PURE__ */ B({
   name: "KendoVueGridStateProvider",
   inheritAttrs: !1,
-  props: B,
-  setup(e, {
+  props: M,
+  setup(a, {
     emit: l
   }) {
-    var d, c, o, g, h, r, i, s, f;
-    const t = j({
+    var c, d, h, o, g, r, i, s, f, x;
+    const t = I({
       // edit: props.defaultEdit ?? props.edit,
-      filter: (d = e.defaultFilter) != null ? d : e.filter,
-      highlight: e.highlight,
-      // select: props.defaultSelect ?? props.select,
-      search: (c = e.defaultSearch) != null ? c : e.search,
-      sort: (o = e.defaultSort) != null ? o : e.sort,
-      take: (g = e.defaultTake) != null ? g : e.take,
-      skip: (h = e.defaultSkip) != null ? h : e.skip,
-      group: (r = e.defaultGroup) != null ? r : e.group,
-      detailExpand: (i = e.defaultDetailExpand) != null ? i : e.detailExpand,
-      groupExpand: (s = e.defaultGroupExpand) != null ? s : e.groupExpand,
-      columnsState: (f = e.defaultColumnsState) != null ? f : e.columnsState
-    }), x = (a) => {
+      filter: (c = a.defaultFilter) != null ? c : a.filter,
+      highlight: a.highlight,
+      select: (d = a.defaultSelect) != null ? d : a.select,
+      search: (h = a.defaultSearch) != null ? h : a.search,
+      sort: (o = a.defaultSort) != null ? o : a.sort,
+      take: (g = a.defaultTake) != null ? g : a.take,
+      skip: (r = a.defaultSkip) != null ? r : a.skip,
+      group: (i = a.defaultGroup) != null ? i : a.group,
+      detailExpand: (s = a.defaultDetailExpand) != null ? s : a.detailExpand,
+      groupExpand: (f = a.defaultGroupExpand) != null ? f : a.groupExpand,
+      columnsState: (x = a.defaultColumnsState) != null ? x : a.columnsState
+    }), S = (e) => {
       t.value = {
         ...t.value,
-        ...a.data
-      }, l("datastatechange", a);
-    }, v = n(() => e.filter || t.value.filter || null), S = (a) => {
-      t.value.filter = a.filter, l("filterchange", a);
+        ...e.data
+      }, l("datastatechange", e);
+    }, v = n(() => a.filter || t.value.filter || null), E = (e) => {
+      t.value.filter = e.filter, l("filterchange", e);
     };
-    u(() => e.filter, (a) => {
-      t.value.filter = a;
+    u(() => a.filter, (e) => {
+      t.value.filter = e;
     });
-    const E = n(() => e.search || t.value.search || null), k = (a) => {
-      t.value.search = a.search, t.value.skip = 0, l("searchchange", a);
+    const k = n(() => a.search || t.value.search || null), C = (e) => {
+      t.value.search = e.search, t.value.skip = 0, l("searchchange", e);
     };
-    u(() => e.search, (a) => {
-      t.value.search = a;
+    u(() => a.search, (e) => {
+      t.value.search = e;
     });
-    const m = n(() => e.sort || t.value.sort || []), C = (a) => {
-      t.value.sort = a.sort, l("sortchange", a);
+    const m = n(() => a.select || t.value.select || null), G = (e) => {
+      t.value.select = e.select, l("selectionchange", e);
+    }, D = (e) => {
+      t.value.select = e.select, l("headerselectionchange", e);
+    }, P = n(() => a.sort || t.value.sort || []), K = (e) => {
+      t.value.sort = e.sort, l("sortchange", e);
     };
-    u(() => e.sort, (a) => {
-      t.value.sort = a;
+    u(() => a.sort, (e) => {
+      t.value.sort = e;
     });
-    const G = n(() => e.skip || t.value.skip), p = n(() => e.take || t.value.take), D = (a) => {
-      t.value.skip = a.page.skip, t.value.take = a.page.take, l("pagechange", a);
+    const F = n(() => a.skip || t.value.skip), w = n(() => a.take || t.value.take), y = (e) => {
+      t.value.skip = e.page.skip, t.value.take = e.page.take, l("pagechange", e);
     };
-    u(() => e.skip, (a) => {
-      t.value.skip = a;
-    }), u(() => e.take, (a) => {
-      t.value.take = a;
+    u(() => a.skip, (e) => {
+      t.value.skip = e;
+    }), u(() => a.take, (e) => {
+      t.value.take = e;
     });
-    const P = n(() => e.group || t.value.group || []), K = (a) => {
-      t.value.group = a.group, l("groupchange", a);
+    const A = n(() => a.group || t.value.group || []), H = (e) => {
+      t.value.group = e.group, l("groupchange", e);
     };
-    u(() => e.group, (a) => {
-      t.value.group = a;
+    u(() => a.group, (e) => {
+      t.value.group = e;
     });
-    const F = n(() => e.detailExpand || t.value.detailExpand || {}), w = (a) => {
-      t.value.detailExpand = a.detailExpand, l("detailexpandchange", a);
+    const T = n(() => a.detailExpand || t.value.detailExpand || {}), V = (e) => {
+      t.value.detailExpand = e.detailExpand, l("detailexpandchange", e);
     };
-    u(() => e.detailExpand, (a) => {
-      t.value.detailExpand = a;
+    u(() => a.detailExpand, (e) => {
+      t.value.detailExpand = e;
     });
-    const y = n(() => e.groupExpand || t.value.groupExpand || []), A = (a) => {
-      t.value.groupExpand = a.groupExpand, l("groupexpandchange", a);
+    const b = n(() => a.groupExpand || t.value.groupExpand || []), j = (e) => {
+      t.value.groupExpand = e.groupExpand, l("groupexpandchange", e);
     };
-    u(() => e.groupExpand, (a) => {
-      t.value.groupExpand = a;
+    u(() => a.groupExpand, (e) => {
+      t.value.groupExpand = e;
     });
-    const T = n(() => e.columnsState || e.defaultColumnsState || []), V = (a) => {
-      t.value.columnsState = a.columnsState, l("columnsstatechange", a);
+    const q = n(() => a.columnsState || a.defaultColumnsState || []), z = (e) => {
+      t.value.columnsState = e.columnsState, l("columnsstatechange", e);
     };
-    u(() => e.columnsState, (a) => {
-      t.value.columnsState = a;
-    }), q(z, {
-      sort: m,
-      sortchange: C,
+    u(() => a.columnsState, (e) => {
+      t.value.columnsState = e;
+    }), J(L, {
+      sort: P,
+      sortchange: K,
       filter: v,
-      filterchange: S,
-      search: E,
-      searchchange: k,
-      skip: G,
-      take: p,
-      pagechange: D,
-      group: P,
-      groupchange: K,
-      detailExpand: F,
-      detailexpandchange: w,
-      groupExpand: y,
-      groupexpandchange: A,
-      columnsState: T,
-      columnsstatechange: V,
-      datastatechange: x
+      filterchange: E,
+      search: k,
+      searchchange: C,
+      skip: F,
+      take: w,
+      pagechange: y,
+      select: m,
+      selectionchange: G,
+      headerselectionchange: D,
+      group: A,
+      groupchange: H,
+      detailExpand: T,
+      detailexpandchange: V,
+      groupExpand: b,
+      groupexpandchange: j,
+      columnsState: q,
+      columnsstatechange: z,
+      datastatechange: S
     });
   },
   render() {
-    return H(this);
+    return N(this);
   }
 });
 export {
-  N as GridStateProvider
+  W as GridStateProvider
 };

package/RootGrid.d.ts

@@ -139,6 +139,9 @@ export declare const RootGrid: import('vue').DefineComponent<import('vue').Extra
     defaultDetailExpand: import('vue').PropType<import('@progress/kendo-vue-data-tools').DetailExpandDescriptor>;
     editField: import('vue').PropType<string>;
     rowClass: import('vue').PropType<Function>;
+    select: import('vue').PropType<import('@progress/kendo-vue-data-tools').SelectDescriptor>;
+    defaultSelect: import('vue').PropType<import('@progress/kendo-vue-data-tools').SelectDescriptor>;
+    selectable: import('vue').PropType<boolean | import('./interfaces/GridSelectableSettings').GridSelectableSettings>;
     scrollable: {
         type: import('vue').PropType<string>;
         default: string;
@@ -321,6 +324,9 @@ export declare const RootGrid: import('vue').DefineComponent<import('vue').Extra
     defaultDetailExpand: import('vue').PropType<import('@progress/kendo-vue-data-tools').DetailExpandDescriptor>;
     editField: import('vue').PropType<string>;
     rowClass: import('vue').PropType<Function>;
+    select: import('vue').PropType<import('@progress/kendo-vue-data-tools').SelectDescriptor>;
+    defaultSelect: import('vue').PropType<import('@progress/kendo-vue-data-tools').SelectDescriptor>;
+    selectable: import('vue').PropType<boolean | import('./interfaces/GridSelectableSettings').GridSelectableSettings>;
     scrollable: {
         type: import('vue').PropType<string>;
         default: string;

package/RootGrid.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),v=require("./Grid.js"),x=require("./GridState.js"),L=require("./common.js"),n=require("@progress/kendo-vue-common"),P=c.defineComponent({name:"KendoVueGrid",props:L.gridProps,setup(l,{expose:r}){const o=c.ref(null);r({get element(){var e;return((e=o.value)==null?void 0:e.element)||null},get props(){return l},get columns(){var e;return((e=o.value)==null?void 0:e.columns)||[]},scrollIntoView:e=>{var s;(s=o.value)==null||s.scrollIntoView(e)},fitColumns:e=>{var s;(s=o.value)==null||s.fitColumns(e)},exportAsPdf:()=>{var e;(e=o.value)==null||e.exportAsPdf()}})},computed:{columnsWithTemplates(){const l=n.getListeners.call(this);return n.mapTree(this.$props.columns||[],"children",r=>{const o={...r},e=n.templateRendering.call(this,o.cell,l),s=n.templateRendering.call(this,o.headerCell,l),m=n.templateRendering.call(this,o.filterCell,l),u=n.templateRendering.call(this,o.footerCell,l),p=n.templateRendering.call(this,o.columnMenu,l);return{...o,cell:e,headerCell:s,filterCell:m,footerCell:u,columnMenu:p}})}},render(){const l=n.getDefaultSlots(this)||[],r=n.getListeners.call(this),o=l.filter(t=>{var a,i;return t.tag&&t.tag.toLowerCase().indexOf("toolbar")!==-1||t.componentOptions&&((a=t.componentOptions.tag)==null?void 0:a.toLowerCase().indexOf("toolbar"))!==-1||((i=t==null?void 0:t.type)==null?void 0:i.name.toLowerCase().indexOf("toolbar"))!==-1}),e=l.filter(t=>{var a,i;return t.tag&&t.tag.toLowerCase().indexOf("records")!==-1||t.componentOptions&&((a=t.componentOptions.tag)==null?void 0:a.toLowerCase().indexOf("records"))!==-1||((i=t==null?void 0:t.type)==null?void 0:i.name.toLowerCase().indexOf("records"))!==-1}),{cellRender:s,detail:m,columns:u,rowRender:p,pager:g,loader:f,...d}=this.$props,R=n.templateRendering.call(this,m,r),C=n.templateRendering.call(this,s,r),T=n.templateRendering.call(this,p,r),w=n.templateRendering.call(this,g,r),O=n.templateRendering.call(this,f,r),h=this.columnsWithTemplates;return c.createVNode(x.GridStateProvider,d,{default:()=>[c.createVNode(v.Grid,c.mergeProps(d,r,{class:this.$attrs.class,style:this.$attrs.style,columns:h,cellRender:C,rowRender:T,pager:w,loader:O,detail:R,toolbar:o,noRecords:e}),null)]})}});exports.RootGrid=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),v=require("./Grid.js"),x=require("./GridState.js"),L=require("./common.js"),n=require("@progress/kendo-vue-common"),P=c.defineComponent({name:"KendoVueGrid",props:L.gridProps,setup(l,{expose:r}){const t=c.ref(null);r({get element(){var e;return((e=t.value)==null?void 0:e.element)||null},get props(){return l},get columns(){var e;return((e=t.value)==null?void 0:e.columns)||[]},scrollIntoView:e=>{var s;(s=t.value)==null||s.scrollIntoView(e)},fitColumns:e=>{var s;(s=t.value)==null||s.fitColumns(e)},exportAsPdf:()=>{var e;(e=t.value)==null||e.exportAsPdf()}})},computed:{columnsWithTemplates(){const l=n.getListeners.call(this);return n.mapTree(this.$props.columns||[],"children",r=>{const t={...r},e=n.templateRendering.call(this,t.cell,l),s=n.templateRendering.call(this,t.headerCell,l),m=n.templateRendering.call(this,t.filterCell,l),u=n.templateRendering.call(this,t.footerCell,l),p=t.columnMenu!==!1?n.templateRendering.call(this,t.columnMenu,l):!1;return{...t,cell:e,headerCell:s,filterCell:m,footerCell:u,columnMenu:p}})}},render(){const l=n.getDefaultSlots(this)||[],r=n.getListeners.call(this),t=l.filter(o=>{var a,i;return o.tag&&o.tag.toLowerCase().indexOf("toolbar")!==-1||o.componentOptions&&((a=o.componentOptions.tag)==null?void 0:a.toLowerCase().indexOf("toolbar"))!==-1||((i=o==null?void 0:o.type)==null?void 0:i.name.toLowerCase().indexOf("toolbar"))!==-1}),e=l.filter(o=>{var a,i;return o.tag&&o.tag.toLowerCase().indexOf("records")!==-1||o.componentOptions&&((a=o.componentOptions.tag)==null?void 0:a.toLowerCase().indexOf("records"))!==-1||((i=o==null?void 0:o.type)==null?void 0:i.name.toLowerCase().indexOf("records"))!==-1}),{cellRender:s,detail:m,columns:u,rowRender:p,pager:g,loader:f,...d}=this.$props,R=n.templateRendering.call(this,m,r),C=n.templateRendering.call(this,s,r),T=n.templateRendering.call(this,p,r),w=n.templateRendering.call(this,g,r),O=n.templateRendering.call(this,f,r),h=this.columnsWithTemplates;return c.createVNode(x.GridStateProvider,d,{default:()=>[c.createVNode(v.Grid,c.mergeProps(d,r,{class:this.$attrs.class,style:this.$attrs.style,columns:h,cellRender:C,rowRender:T,pager:w,loader:O,detail:R,toolbar:t,noRecords:e}),null)]})}});exports.RootGrid=P;

package/RootGrid.mjs

@@ -5,80 +5,80 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as L, createVNode as d, mergeProps as P, ref as v } from "vue";
+import { defineComponent as L, createVNode as f, mergeProps as P, ref as v } from "vue";
 import { Grid as b } from "./Grid.mjs";
 import { GridStateProvider as y } from "./GridState.mjs";
 import { gridProps as G } from "./common.mjs";
-import { getDefaultSlots as V, getListeners as f, templateRendering as n, mapTree as $ } from "@progress/kendo-vue-common";
+import { getDefaultSlots as M, getListeners as d, templateRendering as n, mapTree as V } from "@progress/kendo-vue-common";
 const I = /* @__PURE__ */ L({
   name: "KendoVueGrid",
   props: G,
   setup(l, {
     expose: r
   }) {
-    const o = v(null);
+    const t = v(null);
     r({
       get element() {
         var e;
-        return ((e = o.value) == null ? void 0 : e.element) || null;
+        return ((e = t.value) == null ? void 0 : e.element) || null;
       },
       get props() {
         return l;
       },
       get columns() {
         var e;
-        return ((e = o.value) == null ? void 0 : e.columns) || [];
+        return ((e = t.value) == null ? void 0 : e.columns) || [];
       },
       scrollIntoView: (e) => {
         var s;
-        (s = o.value) == null || s.scrollIntoView(e);
+        (s = t.value) == null || s.scrollIntoView(e);
       },
       fitColumns: (e) => {
         var s;
-        (s = o.value) == null || s.fitColumns(e);
+        (s = t.value) == null || s.fitColumns(e);
       },
       exportAsPdf: () => {
         var e;
-        (e = o.value) == null || e.exportAsPdf();
+        (e = t.value) == null || e.exportAsPdf();
       }
     });
   },
   computed: {
     columnsWithTemplates() {
-      const l = f.call(this);
-      return $(this.$props.columns || [], "children", (r) => {
-        const o = {
+      const l = d.call(this);
+      return V(this.$props.columns || [], "children", (r) => {
+        const t = {
           ...r
-        }, e = n.call(this, o.cell, l), s = n.call(this, o.headerCell, l), i = n.call(this, o.filterCell, l), p = n.call(this, o.footerCell, l), m = n.call(this, o.columnMenu, l);
+        }, e = n.call(this, t.cell, l), s = n.call(this, t.headerCell, l), m = n.call(this, t.filterCell, l), p = n.call(this, t.footerCell, l), i = t.columnMenu !== !1 ? n.call(this, t.columnMenu, l) : !1;
         return {
-          ...o,
+          ...t,
           cell: e,
           headerCell: s,
-          filterCell: i,
+          filterCell: m,
           footerCell: p,
-          columnMenu: m
+          columnMenu: i
         };
       });
     }
   },
   render() {
-    const l = V(this) || [], r = f.call(this), o = l.filter((t) => {
+    const l = M(this) || [], r = d.call(this), t = l.filter((o) => {
       var a, c;
-      return t.tag && t.tag.toLowerCase().indexOf("toolbar") !== -1 || t.componentOptions && ((a = t.componentOptions.tag) == null ? void 0 : a.toLowerCase().indexOf("toolbar")) !== -1 || ((c = t == null ? void 0 : t.type) == null ? void 0 : c.name.toLowerCase().indexOf("toolbar")) !== -1;
-    }), e = l.filter((t) => {
+      return o.tag && o.tag.toLowerCase().indexOf("toolbar") !== -1 || o.componentOptions && ((a = o.componentOptions.tag) == null ? void 0 : a.toLowerCase().indexOf("toolbar")) !== -1 || ((c = o == null ? void 0 : o.type) == null ? void 0 : c.name.toLowerCase().indexOf("toolbar")) !== -1;
+    }), e = l.filter((o) => {
       var a, c;
-      return t.tag && t.tag.toLowerCase().indexOf("records") !== -1 || t.componentOptions && ((a = t.componentOptions.tag) == null ? void 0 : a.toLowerCase().indexOf("records")) !== -1 || ((c = t == null ? void 0 : t.type) == null ? void 0 : c.name.toLowerCase().indexOf("records")) !== -1;
+      return o.tag && o.tag.toLowerCase().indexOf("records") !== -1 || o.componentOptions && ((a = o.componentOptions.tag) == null ? void 0 : a.toLowerCase().indexOf("records")) !== -1 || ((c = o == null ? void 0 : o.type) == null ? void 0 : c.name.toLowerCase().indexOf("records")) !== -1;
     }), {
       cellRender: s,
-      detail: i,
+      detail: m,
       columns: p,
-      rowRender: m,
+      rowRender: i,
       pager: g,
       loader: C,
       ...u
-    } = this.$props, R = n.call(this, i, r), w = n.call(this, s, r), T = n.call(this, m, r), h = n.call(this, g, r), O = n.call(this, C, r), x = this.columnsWithTemplates;
-    return d(y, u, {
-      default: () => [d(b, P(u, r, {
+    } = this.$props, R = n.call(this, m, r), w = n.call(this, s, r), T = n.call(this, i, r), h = n.call(this, g, r), O = n.call(this, C, r), x = this.columnsWithTemplates;
+    return f(y, u, {
+      default: () => [f(b, P(u, r, {
         class: this.$attrs.class,
         style: this.$attrs.style,
         columns: x,
@@ -87,7 +87,7 @@ const I = /* @__PURE__ */ L({
         pager: h,
         loader: O,
         detail: R,
-        toolbar: o,
+        toolbar: t,
         noRecords: e
       }), null)]
     });