@progress/kendo-vue-grid 7.0.3-develop.1 → 7.1.0-develop.2

package/GridColumn.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={filterable:!0,editable:!0,sortable:!0,resizable:!0,reorderable:!0,groupable:!0};exports.gridDefaultProps=e;

package/GridColumn.mjs

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+const e = {
+  filterable: !0,
+  editable: !0,
+  sortable: !0,
+  resizable: !0,
+  reorderable: !0,
+  groupable: !0
+};
+export {
+  e as gridDefaultProps
+};

package/GridSearchBox.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),l=require("@progress/kendo-vue-inputs"),d=require("./key.js"),g=require("@progress/kendo-vue-data-tools"),S=require("@progress/kendo-vue-common"),m=require("@progress/kendo-svg-icons"),p=e.defineComponent({name:"KendoVueGridSearchBox",inheritAttrs:!1,props:{onChange:Function,className:String,placeholder:String},setup(o,{emit:t}){const a=e.inject("kendoLocalizationService",{}),{searchChange:r}=e.inject("kendo",{}),{search:c}=e.inject(d.KendoKey,{}),s=n=>{r&&r(n),t("change",n),o.onChange&&o.onChange.call(void 0,n)},i=e.computed(()=>g.getStringFromSearch(c.value)),u=e.computed(()=>({"k-grid-search":!0,"k-searchbox":!0})),h=e.computed(()=>{const n=a;return n!=null&&n.toLanguageString?n.toLanguageString("searchboxPlaceholder","Search..."):o.placeholder||"Search..."});return{handleChange:s,value:i,rootClassName:u,placeholder:h}},render(){return e.createVNode(l.TextBox,e.mergeProps({placeholder:this.placeholder,value:this.value,prefix:()=>e.createVNode(S.SvgIcon,{icon:m.searchIcon},null)},this.$attrs,{class:this.rootClassName,onInput:this.handleChange}),null)}});exports.GridSearchBox=p;

package/GridSearchBox.mjs

@@ -0,0 +1,60 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as g, createVNode as a, mergeProps as m, inject as o, computed as n } from "vue";
+import { TextBox as p } from "@progress/kendo-vue-inputs";
+import { KendoKey as S } from "./key.mjs";
+import { getStringFromSearch as f } from "@progress/kendo-vue-data-tools";
+import { SvgIcon as C } from "@progress/kendo-vue-common";
+import { searchIcon as x } from "@progress/kendo-svg-icons";
+const K = /* @__PURE__ */ g({
+  name: "KendoVueGridSearchBox",
+  inheritAttrs: !1,
+  props: {
+    onChange: Function,
+    className: String,
+    placeholder: String
+  },
+  setup(r, {
+    emit: c
+  }) {
+    const i = o("kendoLocalizationService", {}), {
+      searchChange: t
+    } = o("kendo", {}), {
+      search: s
+    } = o(S, {}), h = (e) => {
+      t && t(e), c("change", e), r.onChange && r.onChange.call(void 0, e);
+    }, l = n(() => f(s.value)), d = n(() => ({
+      "k-grid-search": !0,
+      "k-searchbox": !0
+    })), u = n(() => {
+      const e = i;
+      return e != null && e.toLanguageString ? e.toLanguageString("searchboxPlaceholder", "Search...") : r.placeholder || "Search...";
+    });
+    return {
+      handleChange: h,
+      value: l,
+      rootClassName: d,
+      placeholder: u
+    };
+  },
+  render() {
+    return a(p, m({
+      placeholder: this.placeholder,
+      value: this.value,
+      prefix: () => a(C, {
+        icon: x
+      }, null)
+    }, this.$attrs, {
+      class: this.rootClassName,
+      onInput: this.handleChange
+    }), null);
+  }
+});
+export {
+  K as GridSearchBox
+};

package/GridState.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),w=require("./key.js"),m=require("./common.js"),G=require("@progress/kendo-vue-common"),P=t.defineComponent({name:"KendoVueGridStateProvider",inheritAttrs:!1,props:m.gridProps,setup(a,{emit:n}){const l=t.ref(a.filter||a.defaultFilter||null),f=e=>{l.value=e.filter,n("filterchange",e)};t.watch(()=>a.filter,e=>{l.value=e});const u=t.ref(a.search||a.defaultSearch||null),s=e=>{u.value=e.search,n("searchchange",e)};t.watch(()=>a.search,e=>{u.value=e});const c=t.ref(a.sort||a.defaultSort||[]),S=e=>{c.value=e.sort,n("sortchange",e)};t.watch(()=>a.sort,e=>{c.value=e});const d=t.ref(a.skip||a.defaultSkip||0),r=t.ref(a.take||a.defaultTake),v=e=>{d.value=e.page.skip,r.value=e.page.take,n("pagechange",e)};t.watch(()=>a.skip,e=>{d.value=e}),t.watch(()=>a.take,e=>{r.value=e});const h=t.ref(a.group||a.defaultGroup||[]),x=e=>{h.value=e.group,n("groupchange",e)};t.watch(()=>a.group,e=>{h.value=e});const o=t.ref(a.detailExpand||a.defaultDetailExpand||{}),k=e=>{o.value=e.detailExpand,n("detailexpandchange",e)};t.watch(()=>a.detailExpand,e=>{o.value=e});const g=t.ref(a.groupExpand||a.defaultGroupExpand||[]),C=e=>{g.value=e.groupExpand,n("groupexpandchange",e)};t.watch(()=>a.groupExpand,e=>{g.value=e});const i=t.ref(a.columnsState||a.defaultColumnsState||[]),E=e=>{i.value=e.columnsState,n("columnsstatechange",e)};t.watch(()=>a.columnsState,e=>{i.value=e}),t.provide(w.KendoKey,{sort:c,sortchange:S,filter:l,filterchange:f,search:u,searchchange:s,skip:d,take:r,pagechange:v,group:h,groupchange:x,detailExpand:o,detailexpandchange:k,groupExpand:g,groupexpandchange:C,columnsState:i,columnsstatechange:E})},render(){return G.getDefaultSlots(this)}});exports.GridStateProvider=P;

package/GridState.mjs

@@ -0,0 +1,94 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as G, ref as t, watch as n, provide as P } from "vue";
+import { KendoKey as D } from "./key.mjs";
+import { gridProps as K } from "./common.mjs";
+import { getDefaultSlots as F } from "@progress/kendo-vue-common";
+const V = /* @__PURE__ */ G({
+  name: "KendoVueGridStateProvider",
+  inheritAttrs: !1,
+  props: K,
+  setup(e, {
+    emit: l
+  }) {
+    const u = t(e.filter || e.defaultFilter || null), s = (a) => {
+      u.value = a.filter, l("filterchange", a);
+    };
+    n(() => e.filter, (a) => {
+      u.value = a;
+    });
+    const d = t(e.search || e.defaultSearch || null), x = (a) => {
+      d.value = a.search, l("searchchange", a);
+    };
+    n(() => e.search, (a) => {
+      d.value = a;
+    });
+    const c = t(e.sort || e.defaultSort || []), S = (a) => {
+      c.value = a.sort, l("sortchange", a);
+    };
+    n(() => e.sort, (a) => {
+      c.value = a;
+    });
+    const o = t(e.skip || e.defaultSkip || 0), h = t(e.take || e.defaultTake), v = (a) => {
+      o.value = a.page.skip, h.value = a.page.take, l("pagechange", a);
+    };
+    n(() => e.skip, (a) => {
+      o.value = a;
+    }), n(() => e.take, (a) => {
+      h.value = a;
+    });
+    const g = t(e.group || e.defaultGroup || []), E = (a) => {
+      g.value = a.group, l("groupchange", a);
+    };
+    n(() => e.group, (a) => {
+      g.value = a;
+    });
+    const r = t(e.detailExpand || e.defaultDetailExpand || {}), m = (a) => {
+      r.value = a.detailExpand, l("detailexpandchange", a);
+    };
+    n(() => e.detailExpand, (a) => {
+      r.value = a;
+    });
+    const i = t(e.groupExpand || e.defaultGroupExpand || []), C = (a) => {
+      i.value = a.groupExpand, l("groupexpandchange", a);
+    };
+    n(() => e.groupExpand, (a) => {
+      i.value = a;
+    });
+    const f = t(e.columnsState || e.defaultColumnsState || []), k = (a) => {
+      f.value = a.columnsState, l("columnsstatechange", a);
+    };
+    n(() => e.columnsState, (a) => {
+      f.value = a;
+    }), P(D, {
+      sort: c,
+      sortchange: S,
+      filter: u,
+      filterchange: s,
+      search: d,
+      searchchange: x,
+      skip: o,
+      take: h,
+      pagechange: v,
+      group: g,
+      groupchange: E,
+      detailExpand: r,
+      detailexpandchange: m,
+      groupExpand: i,
+      groupexpandchange: C,
+      columnsState: f,
+      columnsstatechange: k
+    });
+  },
+  render() {
+    return F(this);
+  }
+});
+export {
+  V as GridStateProvider
+};

package/RootGrid.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * 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;

package/RootGrid.mjs

@@ -0,0 +1,98 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * 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 { 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";
+const I = /* @__PURE__ */ L({
+  name: "KendoVueGrid",
+  props: G,
+  setup(l, {
+    expose: r
+  }) {
+    const o = v(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 = f.call(this);
+      return $(this.$props.columns || [], "children", (r) => {
+        const o = {
+          ...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);
+        return {
+          ...o,
+          cell: e,
+          headerCell: s,
+          filterCell: i,
+          footerCell: p,
+          columnMenu: m
+        };
+      });
+    }
+  },
+  render() {
+    const l = V(this) || [], r = f.call(this), o = l.filter((t) => {
+      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) => {
+      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;
+    }), {
+      cellRender: s,
+      detail: i,
+      columns: p,
+      rowRender: m,
+      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, {
+        class: this.$attrs.class,
+        style: this.$attrs.style,
+        columns: x,
+        cellRender: w,
+        rowRender: T,
+        pager: h,
+        loader: O,
+        detail: R,
+        toolbar: o,
+        noRecords: e
+      }), null)]
+    });
+  }
+});
+export {
+  I as RootGrid
+};

package/cells/GridGroupCell.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"),d=require("@progress/kendo-vue-common"),m=require("@progress/kendo-vue-data-tools"),r=require("../messages/main.js"),f=require("@progress/kendo-vue-intl"),p=require("@progress/kendo-svg-icons"),v=n.defineComponent({name:"KendoGridGroupCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,colSpan:Number,className:String,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,expanded:Boolean,editor:String,dataIndex:Number,isSelected:Boolean,isRtl:Boolean,ariaColumnIndex:Number,render:[String,Function,Object]},emits:{change:null,cellkeydown:null},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null},getKeyboardNavigationAttributes:{default:d.noop}},computed:{tdClass(){const{className:e}=this.$props;return{"k-table-td":!0,[e]:e}}},methods:{triggerKeydown(e,t){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,field:this.$props.field,expanded:this.$props.expanded}),!e.defaultPrevented&&e.keyCode===d.Keys.enter&&(e.preventDefault(),this.$emit("change",{dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,event:e,level:this.$props.level,field:void 0,value:!t}))},clickHandler(e,t,i){e.preventDefault(),this.$emit("change",{dataItem:t,dataIndex:this.$props.dataIndex,event:e,level:this.$props.level,field:void 0,value:!i})}},render(){let e=null;const{columnIndex:t,level:i,columnsCount:u,rowType:b,dataItem:l,field:o,expanded:a,render:I}=this.$props,s=this.getKeyboardNavigationAttributes(this.$props.id),g=f.provideLocalizationService(this).toLanguageString(r.groupCaretAriaLabelCollapse,r.messages[r.groupCaretAriaLabelCollapse]),h=f.provideLocalizationService(this).toLanguageString(r.groupCaretAriaLabelExpand,r.messages[r.groupCaretAriaLabelExpand]);return t===void 0||i===void 0||t<i||u===void 0||b!=="groupHeader"||l[o]===void 0?e=n.createVNode("td",{style:this.$attrs.style,key:"g"+t,class:"k-table-td k-group-cell"},null):t<=i&&(e=n.createVNode("td",{style:this.$attrs.style,onKeydown:c=>{this.triggerKeydown(c,a)},key:"g-colspan",class:this.tdClass,colspan:u-t,role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,"aria-selected":this.$props.isSelected,"aria-expanded":a,"data-grid-col-index":this.$props.columnIndex,tabindex:s.tabIndex,"data-keyboardnavlevel":s[m.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":s[m.KEYBOARD_NAV_DATA_ID]},[n.createVNode("p",{class:"k-reset"},[n.createVNode("a",{onClick:c=>{this.clickHandler(c,l,a)},href:"#",tabindex:-1,title:a?g:h,"aria-label":a?g:h},[n.createVNode(d.Icon,{name:a?"caret-alt-down":this.isRtl?"caret-alt-left":"caret-alt-right",icon:a?p.caretAltDownIcon:this.isRtl?p.caretAltLeftIcon:p.caretAltRightIcon},null)]),l[o]?l[o].toString():""])])),d.getTemplate.call(this,{h:n.h,template:I,defaultRendering:e,additionalProps:this.$props,additionalListeners:{keydown:this.triggerKeydown,click:this.clickHandler}})}});exports.GridGroupCell=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),o=require("@progress/kendo-vue-common"),c=require("@progress/kendo-vue-data-tools"),r=require("../messages/main.js"),f=require("@progress/kendo-vue-intl"),u=require("@progress/kendo-svg-icons"),k=n.defineComponent({name:"KendoGridGroupCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,colSpan:Number,className:String,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,expanded:Boolean,editor:String,dataIndex:Number,isSelected:Boolean,isRtl:Boolean,ariaColumnIndex:Number,group:Object,render:[String,Function,Object]},emits:{change:null,cellkeydown:null},inject:{kendo:{default:null},kendoIntlService:{default:null},kendoLocalizationService:{default:null},getKeyboardNavigationAttributes:{default:o.noop}},computed:{tdClass(){const{className:e}=this.$props;return{"k-table-td":!0,[e]:e}}},methods:{triggerStateChange(){var t;const e=this.kendo;(t=e==null?void 0:e.dispatchGroupExpand)==null||t.call(e,{type:c.GROUP_EXPAND_ACTION.TOGGLE,group:this.$props.group})},triggerKeydown(e,t){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,field:this.$props.field,expanded:this.$props.expanded}),!e.defaultPrevented&&e.keyCode===o.Keys.enter&&(e.preventDefault(),this.$emit("change",{dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,event:e,level:this.$props.level,field:void 0,value:!t}),this.triggerStateChange())},clickHandler(e,t,i){e.preventDefault(),this.$emit("change",{dataItem:t,dataIndex:this.$props.dataIndex,event:e,level:this.$props.level,field:void 0,value:!i}),this.triggerStateChange()}},render(){let e=null;const{columnIndex:t,level:i,columnsCount:g,rowType:b,dataItem:l,field:d,expanded:a,render:I}=this.$props,s=this.getKeyboardNavigationAttributes(this.$props.id),h=f.provideLocalizationService(this).toLanguageString(r.groupCaretAriaLabelCollapse,r.messages[r.groupCaretAriaLabelCollapse]),m=f.provideLocalizationService(this).toLanguageString(r.groupCaretAriaLabelExpand,r.messages[r.groupCaretAriaLabelExpand]);return t===void 0||i===void 0||t<i||g===void 0||b!=="groupHeader"||l[d]===void 0?e=n.createVNode("td",{style:this.$attrs.style,key:"g"+t,class:"k-table-td k-group-cell"},null):t<=i&&(e=n.createVNode("td",{style:this.$attrs.style,onKeydown:p=>{this.triggerKeydown(p,a)},key:"g-colspan",class:this.tdClass,colspan:g-t,role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,"aria-selected":this.$props.isSelected,"aria-expanded":a,"data-grid-col-index":this.$props.columnIndex,tabindex:s.tabIndex,"data-keyboardnavlevel":s[c.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":s[c.KEYBOARD_NAV_DATA_ID]},[n.createVNode("p",{class:"k-reset"},[n.createVNode("a",{onClick:p=>{this.clickHandler(p,l,a)},href:"#",tabindex:-1,title:a?h:m,"aria-label":a?h:m},[n.createVNode(o.Icon,{name:a?"caret-alt-down":this.isRtl?"caret-alt-left":"caret-alt-right",icon:a?u.caretAltDownIcon:this.isRtl?u.caretAltLeftIcon:u.caretAltRightIcon},null)]),l[d]?l[d].toString():""])])),o.getTemplate.call(this,{h:n.h,template:I,defaultRendering:e,additionalProps:this.$props,additionalListeners:{keydown:this.triggerKeydown,click:this.clickHandler}})}});exports.GridGroupCell=k;

package/cells/GridGroupCell.mjs

@@ -5,13 +5,13 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as x, createVNode as i, h as b } from "vue";
-import { noop as y, Icon as $, getTemplate as v, Keys as k } from "@progress/kendo-vue-common";
-import { KEYBOARD_NAV_DATA_ID as A, KEYBOARD_NAV_DATA_LEVEL as C } from "@progress/kendo-vue-data-tools";
-import { groupCaretAriaLabelCollapse as u, messages as m, groupCaretAriaLabelExpand as g } from "../messages/main.mjs";
-import { provideLocalizationService as h } from "@progress/kendo-vue-intl";
-import { caretAltDownIcon as S, caretAltRightIcon as N, caretAltLeftIcon as L } from "@progress/kendo-svg-icons";
-const _ = /* @__PURE__ */ x({
+import { defineComponent as b, createVNode as n, h as x } from "vue";
+import { noop as y, Icon as $, getTemplate as k, Keys as A } from "@progress/kendo-vue-common";
+import { KEYBOARD_NAV_DATA_ID as v, KEYBOARD_NAV_DATA_LEVEL as S, GROUP_EXPAND_ACTION as C } from "@progress/kendo-vue-data-tools";
+import { groupCaretAriaLabelCollapse as u, messages as g, groupCaretAriaLabelExpand as h } from "../messages/main.mjs";
+import { provideLocalizationService as m } from "@progress/kendo-vue-intl";
+import { caretAltDownIcon as N, caretAltRightIcon as L, caretAltLeftIcon as w } from "@progress/kendo-svg-icons";
+const _ = /* @__PURE__ */ b({
   name: "KendoGridGroupCell",
   inheritAttrs: !1,
   props: {
@@ -32,6 +32,7 @@ const _ = /* @__PURE__ */ x({
     isSelected: Boolean,
     isRtl: Boolean,
     ariaColumnIndex: Number,
+    group: Object,
     render: [String, Function, Object]
   },
   emits: {
@@ -39,6 +40,9 @@ const _ = /* @__PURE__ */ x({
     cellkeydown: null
   },
   inject: {
+    kendo: {
+      default: null
+    },
     kendoIntlService: {
       default: null
     },
@@ -61,6 +65,14 @@ const _ = /* @__PURE__ */ x({
     }
   },
   methods: {
+    triggerStateChange() {
+      var t;
+      const e = this.kendo;
+      (t = e == null ? void 0 : e.dispatchGroupExpand) == null || t.call(e, {
+        type: C.TOGGLE,
+        group: this.$props.group
+      });
+    },
     triggerKeydown(e, t) {
       this.$emit("cellkeydown", {
         event: e,
@@ -68,43 +80,43 @@ const _ = /* @__PURE__ */ x({
         dataIndex: this.$props.dataIndex,
         field: this.$props.field,
         expanded: this.$props.expanded
-      }), !e.defaultPrevented && e.keyCode === k.enter && (e.preventDefault(), this.$emit("change", {
+      }), !e.defaultPrevented && e.keyCode === A.enter && (e.preventDefault(), this.$emit("change", {
         dataItem: this.$props.dataItem,
         dataIndex: this.$props.dataIndex,
         event: e,
         level: this.$props.level,
         field: void 0,
         value: !t
-      }));
+      }), this.triggerStateChange());
     },
-    clickHandler(e, t, n) {
+    clickHandler(e, t, r) {
       e.preventDefault(), this.$emit("change", {
         dataItem: t,
         dataIndex: this.$props.dataIndex,
         event: e,
         level: this.$props.level,
         field: void 0,
-        value: !n
-      });
+        value: !r
+      }), this.triggerStateChange();
     }
   },
   render() {
     let e = null;
     const {
       columnIndex: t,
-      level: n,
+      level: r,
       columnsCount: s,
       rowType: f,
-      dataItem: r,
+      dataItem: i,
       field: l,
       expanded: a,
       render: I
-    } = this.$props, d = this.getKeyboardNavigationAttributes(this.$props.id), p = h(this).toLanguageString(u, m[u]), c = h(this).toLanguageString(g, m[g]);
-    return t === void 0 || n === void 0 || t < n || s === void 0 || f !== "groupHeader" || r[l] === void 0 ? e = i("td", {
+    } = this.$props, d = this.getKeyboardNavigationAttributes(this.$props.id), p = m(this).toLanguageString(u, g[u]), c = m(this).toLanguageString(h, g[h]);
+    return t === void 0 || r === void 0 || t < r || s === void 0 || f !== "groupHeader" || i[l] === void 0 ? e = n("td", {
       style: this.$attrs.style,
       key: "g" + t,
       class: "k-table-td k-group-cell"
-    }, null) : t <= n && (e = i("td", {
+    }, null) : t <= r && (e = n("td", {
       style: this.$attrs.style,
       onKeydown: (o) => {
         this.triggerKeydown(o, a);
@@ -118,23 +130,23 @@ const _ = /* @__PURE__ */ x({
       "aria-expanded": a,
       "data-grid-col-index": this.$props.columnIndex,
       tabindex: d.tabIndex,
-      "data-keyboardnavlevel": d[C],
-      "data-keyboardnavid": d[A]
-    }, [i("p", {
+      "data-keyboardnavlevel": d[S],
+      "data-keyboardnavid": d[v]
+    }, [n("p", {
       class: "k-reset"
-    }, [i("a", {
+    }, [n("a", {
       onClick: (o) => {
-        this.clickHandler(o, r, a);
+        this.clickHandler(o, i, a);
       },
       href: "#",
       tabindex: -1,
       title: a ? p : c,
       "aria-label": a ? p : c
-    }, [i($, {
+    }, [n($, {
       name: a ? "caret-alt-down" : this.isRtl ? "caret-alt-left" : "caret-alt-right",
-      icon: a ? S : this.isRtl ? L : N
-    }, null)]), r[l] ? r[l].toString() : ""])])), v.call(this, {
-      h: b,
+      icon: a ? N : this.isRtl ? w : L
+    }, null)]), i[l] ? i[l].toString() : ""])])), k.call(this, {
+      h: x,
       template: I,
       defaultRendering: e,
       additionalProps: this.$props,

package/cells/GridHierarchyCell.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 i=require("vue"),u=require("../utils/main.js"),l=require("@progress/kendo-vue-common"),c=require("@progress/kendo-vue-data-tools"),h=require("@progress/kendo-vue-intl"),r=require("../messages/main.js"),p=require("@progress/kendo-svg-icons"),m=i.defineComponent({name:"KendoGridHierarchyCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,className:String,colSpan:Number,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,expanded:Boolean,editor:String,isSelected:Boolean,dataIndex:Number,ariaColumnIndex:Number,render:[String,Function,Object],isRtl:Boolean},emits:{change:null,cellkeydown:null},inject:{kendoIntlService:{default:null},kendoLocalizationService:{default:null},getKeyboardNavigationAttributes:{default:l.noop}},methods:{triggerKeydown(e,t){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field,expanded:t}),!e.defaultPrevented&&e.keyCode===l.Keys.enter&&(e.preventDefault(),this.$emit("change",{dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,event:e,field:this.$props.field,value:!t}))},clickHandler(e,t,n){e.preventDefault(),this.$emit("change",{dataItem:t,event:e,field:void 0,value:!n})}},computed:{wrapperClass(){return{"k-table-td":!0,"k-hierarchy-cell":!0,[this.className||""]:this.className}}},render(){let e=null;const t=this.getKeyboardNavigationAttributes(this.$props.id),n=h.provideLocalizationService(this),o=n.toLanguageString(r.collapseDetailAriaLabel,r.messages[r.collapseDetailAriaLabel]),d=n.toLanguageString(r.expandDetailAriaLabel,r.messages[r.expandDetailAriaLabel]);if(this.$props.rowType==="groupFooter")e=i.createVNode("td",{class:this.wrapperClass},null);else if(this.$props.rowType!=="groupHeader"){const a=u.getNestedValue(this.$props.field,this.$props.dataItem);e=i.createVNode("td",{style:this.$attrs.style,onKeydown:s=>{this.triggerKeydown(s,a)},class:this.wrapperClass,"aria-expanded":a?"true":"false",role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,tabindex:t.tabIndex,"data-keyboardnavlevel":t[c.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":t[c.KEYBOARD_NAV_DATA_ID]},[i.createVNode("a",{onClick:s=>{this.clickHandler(s,this.$props.dataItem,a)},href:"#",tabindex:-1,title:a?o:d,"aria-label":a?o:d},[i.createVNode(l.Icon,{name:a?"minus":"plus",icon:a?p.minusIcon:p.plusIcon},null)])])}return l.getTemplate.call(this,{h:i.h,template:this.$props.render,defaultRendering:e,additionalProps:this.$props,additionalListeners:{keydown:this.triggerKeydown,click:this.clickHandler}})}});exports.GridHierarchyCell=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),u=require("../utils/main.js"),l=require("@progress/kendo-vue-common"),o=require("@progress/kendo-vue-data-tools"),h=require("@progress/kendo-vue-intl"),r=require("../messages/main.js"),p=require("@progress/kendo-svg-icons"),g=i.defineComponent({name:"KendoGridHierarchyCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,type:String,className:String,colSpan:Number,columnIndex:Number,columnsCount:Number,rowType:String,level:Number,expanded:Boolean,editor:String,isSelected:Boolean,dataIndex:Number,ariaColumnIndex:Number,render:[String,Function,Object],isRtl:Boolean},emits:{change:null,cellkeydown:null},inject:{kendo:{default:null},kendoIntlService:{default:null},kendoLocalizationService:{default:null},getKeyboardNavigationAttributes:{default:l.noop}},methods:{triggerStateChange(){const e=this.kendo;e.dataItemKey&&this.$props.dataItem[e.dataItemKey]!==void 0&&(e==null||e.dispatchDetailExpand({type:o.DETAIL_EXPAND_ACTION.TOGGLE,id:this.$props.dataItem[e.dataItemKey]}))},triggerKeydown(e,t){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field,expanded:t}),!e.defaultPrevented&&e.keyCode===l.Keys.enter&&(e.preventDefault(),this.$emit("change",{dataItem:this.$props.dataItem,dataIndex:this.$props.dataIndex,event:e,field:this.$props.field,value:!t}),this.triggerStateChange())},clickHandler(e,t,n){e.preventDefault(),this.$emit("change",{dataItem:t,event:e,field:void 0,value:!n}),this.triggerStateChange()}},computed:{wrapperClass(){return{"k-table-td":!0,"k-hierarchy-cell":!0,[this.className||""]:this.className}}},render(){let e=null;const t=this.getKeyboardNavigationAttributes(this.$props.id),n=h.provideLocalizationService(this),d=n.toLanguageString(r.collapseDetailAriaLabel,r.messages[r.collapseDetailAriaLabel]),c=n.toLanguageString(r.expandDetailAriaLabel,r.messages[r.expandDetailAriaLabel]);if(this.$props.rowType==="groupFooter")e=i.createVNode("td",{class:this.wrapperClass},null);else if(this.$props.rowType!=="groupHeader"){const a=u.getNestedValue(this.$props.field,this.$props.dataItem);e=i.createVNode("td",{style:this.$attrs.style,onKeydown:s=>{this.triggerKeydown(s,a)},class:this.wrapperClass,"aria-expanded":a?"true":"false",role:"gridcell","aria-colindex":this.$props.ariaColumnIndex,tabindex:t.tabIndex,"data-keyboardnavlevel":t[o.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":t[o.KEYBOARD_NAV_DATA_ID]},[i.createVNode("a",{onClick:s=>{this.clickHandler(s,this.$props.dataItem,a)},href:"#",tabindex:-1,title:a?d:c,"aria-label":a?d:c},[i.createVNode(l.Icon,{name:a?"minus":"plus",icon:a?p.minusIcon:p.plusIcon},null)])])}return l.getTemplate.call(this,{h:i.h,template:this.$props.render,defaultRendering:e,additionalProps:this.$props,additionalListeners:{keydown:this.triggerKeydown,click:this.clickHandler}})}});exports.GridHierarchyCell=g;

package/cells/GridHierarchyCell.mjs

@@ -7,12 +7,12 @@
  */
 import { defineComponent as c, createVNode as r, h as m } from "vue";
 import { getNestedValue as u } from "../utils/main.mjs";
-import { noop as h, Icon as g, getTemplate as f, Keys as y } from "@progress/kendo-vue-common";
-import { KEYBOARD_NAV_DATA_ID as b, KEYBOARD_NAV_DATA_LEVEL as I } from "@progress/kendo-vue-data-tools";
-import { provideLocalizationService as $ } from "@progress/kendo-vue-intl";
+import { noop as h, Icon as g, getTemplate as f, Keys as I } from "@progress/kendo-vue-common";
+import { KEYBOARD_NAV_DATA_ID as y, KEYBOARD_NAV_DATA_LEVEL as b, DETAIL_EXPAND_ACTION as $ } from "@progress/kendo-vue-data-tools";
+import { provideLocalizationService as S } from "@progress/kendo-vue-intl";
 import { collapseDetailAriaLabel as s, messages as d, expandDetailAriaLabel as p } from "../messages/main.mjs";
-import { minusIcon as v, plusIcon as x } from "@progress/kendo-svg-icons";
-const D = /* @__PURE__ */ c({
+import { minusIcon as k, plusIcon as A } from "@progress/kendo-svg-icons";
+const L = /* @__PURE__ */ c({
   name: "KendoGridHierarchyCell",
   inheritAttrs: !1,
   props: {
@@ -40,6 +40,9 @@ const D = /* @__PURE__ */ c({
     cellkeydown: null
   },
   inject: {
+    kendo: {
+      default: null
+    },
     kendoIntlService: {
       default: null
     },
@@ -51,19 +54,26 @@ const D = /* @__PURE__ */ c({
     }
   },
   methods: {
+    triggerStateChange() {
+      const e = this.kendo;
+      e.dataItemKey && this.$props.dataItem[e.dataItemKey] !== void 0 && (e == null || e.dispatchDetailExpand({
+        type: $.TOGGLE,
+        id: this.$props.dataItem[e.dataItemKey]
+      }));
+    },
     triggerKeydown(e, t) {
       this.$emit("cellkeydown", {
         event: e,
         dataItem: this.$props.dataItem,
         field: this.$props.field,
         expanded: t
-      }), !e.defaultPrevented && e.keyCode === y.enter && (e.preventDefault(), this.$emit("change", {
+      }), !e.defaultPrevented && e.keyCode === I.enter && (e.preventDefault(), this.$emit("change", {
         dataItem: this.$props.dataItem,
         dataIndex: this.$props.dataIndex,
         event: e,
         field: this.$props.field,
         value: !t
-      }));
+      }), this.triggerStateChange());
     },
     clickHandler(e, t, i) {
       e.preventDefault(), this.$emit("change", {
@@ -71,7 +81,7 @@ const D = /* @__PURE__ */ c({
         event: e,
         field: void 0,
         value: !i
-      });
+      }), this.triggerStateChange();
     }
   },
   computed: {
@@ -85,7 +95,7 @@ const D = /* @__PURE__ */ c({
   },
   render() {
     let e = null;
-    const t = this.getKeyboardNavigationAttributes(this.$props.id), i = $(this), l = i.toLanguageString(s, d[s]), o = i.toLanguageString(p, d[p]);
+    const t = this.getKeyboardNavigationAttributes(this.$props.id), i = S(this), l = i.toLanguageString(s, d[s]), o = i.toLanguageString(p, d[p]);
     if (this.$props.rowType === "groupFooter")
       e = r("td", {
         class: this.wrapperClass
@@ -102,8 +112,8 @@ const D = /* @__PURE__ */ c({
         role: "gridcell",
         "aria-colindex": this.$props.ariaColumnIndex,
         tabindex: t.tabIndex,
-        "data-keyboardnavlevel": t[I],
-        "data-keyboardnavid": t[b]
+        "data-keyboardnavlevel": t[b],
+        "data-keyboardnavid": t[y]
       }, [r("a", {
         onClick: (n) => {
           this.clickHandler(n, this.$props.dataItem, a);
@@ -114,7 +124,7 @@ const D = /* @__PURE__ */ c({
         "aria-label": a ? l : o
       }, [r(g, {
         name: a ? "minus" : "plus",
-        icon: a ? v : x
+        icon: a ? k : A
       }, null)])]);
     }
     return f.call(this, {
@@ -130,5 +140,5 @@ const D = /* @__PURE__ */ c({
   }
 });
 export {
-  D as GridHierarchyCell
+  L as GridHierarchyCell
 };

package/common.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("vue");const t=require("@progress/kendo-vue-common"),n={autoProcessData:[Boolean,Object],topCacheCount:{type:Number,default:0},collapsedGroups:{type:Array,default:function(){return[]}},uniqueField:String,totalGroupedHeight:Number,allGroupedItems:Object,alternatePerGroup:Boolean,columns:Array,columnsState:{type:Array,default:function(){}},defaultColumnsState:{type:Array,default:function(){}},columnVirtualization:Boolean,dataItems:[Array,Object],sortable:[Boolean,Object],defaultSort:Array,sort:Array,filterable:Boolean,filterOperators:Object,filterCellRender:[String,Function,Object],headerCellRender:[String,Function,Object],showLoader:{type:Boolean,default:void 0},loader:[String,Function,Object,Boolean],defaultFilter:Object,filter:Object,defaultSearch:Object,search:Object,searchFields:Array,highlight:Object,pageable:[Boolean,Object],pageSize:Number,total:Number,skip:Number,defaultSkip:Number,take:Number,defaultTake:Number,expandField:String,expandColumn:Object,selectedField:String,cellRender:[String,Function,Object],rowRender:[String,Function,Object],resizable:Boolean,reorderable:Boolean,group:Array,defaultGroup:Array,groupable:[Boolean,Object],groupExpand:Array,defaultGroupExpand:Array,detailExpand:Object,defaultDetailExpand:Object,editField:String,rowClass:Function,scrollable:{type:String,default:"scrollable"},size:{type:String,default:"medium",validator:function(e){return["small","medium"].includes(e)}},pager:[String,Function,Object],rowHeight:Number,detailRowHeight:Number,detail:[String,Function,Object],columnMenu:[Boolean,String,Function,Object],columnMenuAnimate:{type:[Boolean,Object],default:function(){return!0}},columnMenuIcon:t.SvgIcon,dataItemKey:String,navigatable:{type:Boolean,default:!1},onItemchange:Function,onExpandchange:Function,onDatastatechange:Function,onPagechange:Function,onSortchange:Function,onFilterchange:Function,onGroupchange:Function,onSearchchange:Function,onGroupexpandchange:Function,onDetailexpandchange:Function};exports.gridProps=n;