@progress/kendo-vue-grid 8.1.0-develop.5 → 8.1.0-develop.7

package/cells/GridHierarchyCell.mjs

@@ -5,13 +5,16 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as c, createVNode as r, h as m } from "vue";
-import { noop as u, Icon as h, getTemplate as g, Keys as f } from "@progress/kendo-vue-common";
-import { KEYBOARD_NAV_DATA_ID as y, KEYBOARD_NAV_DATA_LEVEL as I, DETAIL_EXPAND_ACTION as b } 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 $, plusIcon as k } from "@progress/kendo-svg-icons";
-const K = /* @__PURE__ */ c({
+import { defineComponent as m, createVNode as i, mergeProps as h, h as g } from "vue";
+import { noop as f, Icon as y, getTemplate as I, Keys as b } from "@progress/kendo-vue-common";
+import { KEYBOARD_NAV_DATA_ID as S, KEYBOARD_NAV_DATA_LEVEL as $, DETAIL_EXPAND_ACTION as k } from "@progress/kendo-vue-data-tools";
+import { provideLocalizationService as x } from "@progress/kendo-vue-intl";
+import { collapseDetailAriaLabel as p, messages as c, expandDetailAriaLabel as u } from "../messages/main.mjs";
+import { minusIcon as A, plusIcon as C } from "@progress/kendo-svg-icons";
+const v = (e) => {
+  var t, a;
+  return (a = (t = e.cells) == null ? void 0 : t.hierarchy) == null ? void 0 : a[e.rowType || "data"];
+}, E = /* @__PURE__ */ m({
   name: "KendoGridHierarchyCell",
   inheritAttrs: !1,
   props: {
@@ -32,7 +35,8 @@ const K = /* @__PURE__ */ c({
     dataIndex: Number,
     ariaColumnIndex: Number,
     render: [String, Function, Object],
-    isRtl: Boolean
+    isRtl: Boolean,
+    cells: Object
   },
   emits: {
     change: null,
@@ -49,14 +53,14 @@ const K = /* @__PURE__ */ c({
       default: null
     },
     getKeyboardNavigationAttributes: {
-      default: u
+      default: f
     }
   },
   methods: {
     triggerStateChange() {
       const e = this.kendo;
       e.dataItemKey && this.$props.dataItem[e.dataItemKey] !== void 0 && (e == null || e.dispatchDetailExpand({
-        type: b.TOGGLE,
+        type: k.TOGGLE,
         id: this.$props.dataItem[e.dataItemKey]
       }));
     },
@@ -66,7 +70,7 @@ const K = /* @__PURE__ */ c({
         dataItem: this.$props.dataItem,
         field: this.$props.field,
         expanded: t
-      }), !e.defaultPrevented && e.keyCode === f.enter && (e.preventDefault(), this.$emit("change", {
+      }), !e.defaultPrevented && e.keyCode === b.enter && (e.preventDefault(), this.$emit("change", {
         dataItem: this.$props.dataItem,
         dataIndex: this.$props.dataIndex,
         event: e,
@@ -74,12 +78,12 @@ const K = /* @__PURE__ */ c({
         value: !t
       }), this.triggerStateChange());
     },
-    clickHandler(e, t, i) {
+    clickHandler(e, t, a) {
       e.preventDefault(), this.$emit("change", {
         dataItem: t,
         event: e,
         field: void 0,
-        value: !i
+        value: !a
       }), this.triggerStateChange();
     }
   },
@@ -93,51 +97,57 @@ const K = /* @__PURE__ */ c({
     }
   },
   render() {
-    let e = null;
-    const t = this.getKeyboardNavigationAttributes(this.$props.id), i = S(this), l = i.toLanguageString(s, d[s]), o = i.toLanguageString(p, d[p]);
+    let e = null, t, a = null;
+    const n = this.getKeyboardNavigationAttributes(this.$props.id), s = x(this), o = s.toLanguageString(p, c[p]), d = s.toLanguageString(u, c[u]);
     if (this.$props.rowType === "groupFooter")
-      e = r("td", {
+      t = {
         class: this.wrapperClass
-      }, null);
+      }, e = i("td", t, null);
     else if (this.$props.rowType !== "groupHeader") {
-      const a = this.$props.expanded;
-      e = r("td", {
+      const r = this.$props.expanded;
+      t = {
         style: this.$attrs.style,
-        onKeydown: (n) => {
-          this.triggerKeydown(n, a);
-        },
         class: this.wrapperClass,
-        "aria-expanded": a ? "true" : "false",
+        "aria-expanded": r ? "true" : "false",
         role: "gridcell",
         "aria-colindex": this.$props.ariaColumnIndex,
-        tabindex: t.tabIndex,
-        "data-keyboardnavlevel": t[I],
-        "data-keyboardnavid": t[y]
-      }, [r("a", {
-        onClick: (n) => {
-          this.clickHandler(n, this.$props.dataItem, a);
+        tabindex: n.tabIndex,
+        "data-keyboardnavlevel": n[$],
+        "data-keyboardnavid": n[S]
+      }, a = i("a", {
+        onClick: (l) => {
+          this.clickHandler(l, this.$props.dataItem, r);
         },
         href: "#",
         tabindex: -1,
-        title: a ? l : o,
-        "aria-label": a ? l : o
-      }, [r(h, {
-        name: a ? "minus" : "plus",
-        icon: a ? $ : k
-      }, null)])]);
+        title: r ? o : d,
+        "aria-label": r ? o : d
+      }, [i(y, {
+        name: r ? "minus" : "plus",
+        icon: r ? A : C
+      }, null)]), e = i("td", h(t, {
+        onKeydown: (l) => {
+          this.triggerKeydown(l, r);
+        }
+      }), [a]);
     }
-    return g.call(this, {
-      h: m,
-      template: this.$props.render,
+    return I.call(this, {
+      h: g,
+      template: this.$props.render || v(this.$props),
       defaultRendering: e,
-      additionalProps: this.$props,
+      additionalProps: {
+        ...this.$props,
+        tdProps: t
+      },
       additionalListeners: {
         keydown: this.triggerKeydown,
         click: this.clickHandler
-      }
+      },
+      defaultSlots: a,
+      swapDefaultSlots: !0
     });
   }
 });
 export {
-  K as GridHierarchyCell
+  E as GridHierarchyCell
 };

package/cells/GridSelectionCell.d.ts

@@ -27,6 +27,7 @@ declare const GridSelectionCell: import('vue').DefineComponent<import('vue').Ext
     ariaColumnIndex: PropType<number>;
     editor: PropType<string>;
     isRtl: PropType<boolean>;
+    cells: PropType<import('..').GridCellsSettings>;
 }>, {}, {
     inputId: any;
 }, {
@@ -58,6 +59,7 @@ declare const GridSelectionCell: import('vue').DefineComponent<import('vue').Ext
     ariaColumnIndex: PropType<number>;
     editor: PropType<string>;
     isRtl: PropType<boolean>;
+    cells: PropType<import('..').GridCellsSettings>;
 }>> & Readonly<{
     onSelectionchange?: (...args: any[] | unknown[]) => any;
     onCellkeydown?: (...args: any[] | unknown[]) => any;

package/cells/GridSelectionCell.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 t=require("vue"),l=require("../utils/main.js"),o=require("@progress/kendo-vue-common"),a=require("@progress/kendo-vue-data-tools"),d=t.defineComponent({name:"KendoGridSelectionCell",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,render:[String,Function,Object],isSelected:Boolean,ariaColumnIndex:Number,editor:String,isRtl:Boolean},emits:{selectionchange:null,cellkeydown:null},inject:{kendoIntlService:{default:null},getKeyboardNavigationAttributes:{default:o.noop}},data(){return{inputId:o.guid()}},computed:{tdClass(){const{className:e}=this.$props;return{"k-table-td":!0,[e]:e}}},methods:{triggerKeydown(e){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field})},handleOnChange(e){this.$emit("selectionchange",{event:e,dataItem:this.$props.dataItem})}},render(){const e=this.$props.isSelected||l.getNestedValue(this.$props.field,this.$props.dataItem),i=typeof e=="boolean"&&e,r=this.$props.render,n=this.getKeyboardNavigationAttributes(this.$props.id),s=this.$props.rowType!=="groupHeader"?t.createVNode("td",{style:this.$attrs.style,onKeydown:this.triggerKeydown,colspan:this.$props.colSpan,class:this.tdClass,"aria-colindex":this.$props.ariaColumnIndex,role:"gridcell",tabindex:n.tabIndex,"data-keyboardnavlevel":n[a.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":n[a.KEYBOARD_NAV_DATA_ID]},[t.createVNode("span",{class:"k-checkbox-wrap"},[t.createVNode("input",{checked:i,id:this.inputId,type:"checkbox",class:"k-checkbox k-checkbox-md k-rounded-md",onChange:this.handleOnChange},null)]),t.createVNode("label",{class:"k-checkbox-label",for:this.inputId},null)]):null;return o.getTemplate.call(this,{h:t.h,template:r,defaultRendering:s,additionalProps:this.$props,additionalListeners:{keydown:this.triggerKeydown,change:this.handleOnChange}})}});exports.GridSelectionCell=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),c=require("../utils/main.js"),r=require("@progress/kendo-vue-common"),a=require("@progress/kendo-vue-data-tools"),p=e=>{var n,l;return(l=(n=e.cells)==null?void 0:n.select)==null?void 0:l[e.rowType||"data"]},u=t.defineComponent({name:"KendoGridSelectionCell",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,render:[String,Function,Object],isSelected:Boolean,ariaColumnIndex:Number,editor:String,isRtl:Boolean,cells:Object},emits:{selectionchange:null,cellkeydown:null},inject:{kendoIntlService:{default:null},getKeyboardNavigationAttributes:{default:r.noop}},data(){return{inputId:r.guid()}},computed:{tdClass(){const{className:e}=this.$props;return{"k-table-td":!0,[e]:e}}},methods:{triggerKeydown(e){this.$emit("cellkeydown",{event:e,dataItem:this.$props.dataItem,field:this.$props.field})},handleOnChange(e){this.$emit("selectionchange",{event:e,dataItem:this.$props.dataItem})}},render(){let e,n=null;const l=this.$props.isSelected||c.getNestedValue(this.$props.field,this.$props.dataItem),s=typeof l=="boolean"&&l,i=this.$props.render,o=this.getKeyboardNavigationAttributes(this.$props.id),d=this.$props.rowType!=="groupHeader"?(e={style:this.$attrs.style,colspan:this.$props.colSpan,class:this.tdClass,"aria-colindex":this.$props.ariaColumnIndex,role:"gridcell",tabindex:o.tabIndex,"data-keyboardnavlevel":o[a.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":o[a.KEYBOARD_NAV_DATA_ID]},n=t.createVNode(t.Fragment,null,[t.createVNode("span",{class:"k-checkbox-wrap"},[t.createVNode("input",{checked:s,id:this.inputId,type:"checkbox",class:"k-checkbox k-checkbox-md k-rounded-md",onChange:this.handleOnChange},null)]),t.createVNode("label",{class:"k-checkbox-label",for:this.inputId},null)]),t.createVNode("td",t.mergeProps(e,{onKeydown:this.triggerKeydown}),[n])):null;return r.getTemplate.call(this,{h:t.h,template:i||p(this.$props),defaultRendering:d,additionalProps:{...this.$props,tdProps:e},additionalListeners:{keydown:this.triggerKeydown,change:this.handleOnChange},defaultSlots:n,swapDefaultSlots:!0})}});exports.GridSelectionCell=u;

package/cells/GridSelectionCell.mjs

@@ -5,11 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as r, createVNode as t, h as s } from "vue";
-import { getNestedValue as l } from "../utils/main.mjs";
-import { noop as d, getTemplate as p, guid as c } from "@progress/kendo-vue-common";
-import { KEYBOARD_NAV_DATA_ID as h, KEYBOARD_NAV_DATA_LEVEL as m } from "@progress/kendo-vue-data-tools";
-const y = /* @__PURE__ */ r({
+import { defineComponent as i, createVNode as l, Fragment as d, mergeProps as p, h as c } from "vue";
+import { getNestedValue as h } from "../utils/main.mjs";
+import { noop as u, getTemplate as m, guid as g } from "@progress/kendo-vue-common";
+import { KEYBOARD_NAV_DATA_ID as b, KEYBOARD_NAV_DATA_LEVEL as f } from "@progress/kendo-vue-data-tools";
+const y = (e) => {
+  var t, n;
+  return (n = (t = e.cells) == null ? void 0 : t.select) == null ? void 0 : n[e.rowType || "data"];
+}, I = /* @__PURE__ */ i({
   name: "KendoGridSelectionCell",
   inheritAttrs: !1,
   props: {
@@ -29,7 +32,8 @@ const y = /* @__PURE__ */ r({
     isSelected: Boolean,
     ariaColumnIndex: Number,
     editor: String,
-    isRtl: Boolean
+    isRtl: Boolean,
+    cells: Object
   },
   emits: {
     selectionchange: null,
@@ -40,12 +44,12 @@ const y = /* @__PURE__ */ r({
       default: null
     },
     getKeyboardNavigationAttributes: {
-      default: d
+      default: u
     }
   },
   data() {
     return {
-      inputId: c()
+      inputId: g()
     };
   },
   computed: {
@@ -75,40 +79,47 @@ const y = /* @__PURE__ */ r({
     }
   },
   render() {
-    const e = this.$props.isSelected || l(this.$props.field, this.$props.dataItem), o = typeof e == "boolean" && e, i = this.$props.render, n = this.getKeyboardNavigationAttributes(this.$props.id), a = this.$props.rowType !== "groupHeader" ? t("td", {
+    let e, t = null;
+    const n = this.$props.isSelected || h(this.$props.field, this.$props.dataItem), r = typeof n == "boolean" && n, s = this.$props.render, o = this.getKeyboardNavigationAttributes(this.$props.id), a = this.$props.rowType !== "groupHeader" ? (e = {
       style: this.$attrs.style,
-      onKeydown: this.triggerKeydown,
       colspan: this.$props.colSpan,
       class: this.tdClass,
       "aria-colindex": this.$props.ariaColumnIndex,
       role: "gridcell",
-      tabindex: n.tabIndex,
-      "data-keyboardnavlevel": n[m],
-      "data-keyboardnavid": n[h]
-    }, [t("span", {
+      tabindex: o.tabIndex,
+      "data-keyboardnavlevel": o[f],
+      "data-keyboardnavid": o[b]
+    }, t = l(d, null, [l("span", {
       class: "k-checkbox-wrap"
-    }, [t("input", {
-      checked: o,
+    }, [l("input", {
+      checked: r,
       id: this.inputId,
       type: "checkbox",
       class: "k-checkbox k-checkbox-md k-rounded-md",
       onChange: this.handleOnChange
-    }, null)]), t("label", {
+    }, null)]), l("label", {
       class: "k-checkbox-label",
       for: this.inputId
-    }, null)]) : null;
-    return p.call(this, {
-      h: s,
-      template: i,
+    }, null)]), l("td", p(e, {
+      onKeydown: this.triggerKeydown
+    }), [t])) : null;
+    return m.call(this, {
+      h: c,
+      template: s || y(this.$props),
       defaultRendering: a,
-      additionalProps: this.$props,
+      additionalProps: {
+        ...this.$props,
+        tdProps: e
+      },
       additionalListeners: {
         keydown: this.triggerKeydown,
         change: this.handleOnChange
-      }
+      },
+      defaultSlots: t,
+      swapDefaultSlots: !0
     });
   }
 });
 export {
-  y as GridSelectionCell
+  I as GridSelectionCell
 };

package/cells/pincell/GridPinCell.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+import { GridCellProps } from '../../interfaces/GridCellProps';
+/**
+ * @hidden
+ */
+export declare const getCustomCell: (props: GridCellProps) => any;
+/**
+ * @hidden
+ */
+export declare const GridPinCell: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    field: PropType<string>;
+    dataItem: PropType<any>;
+    format: PropType<string>;
+    readFormat: PropType<string>;
+    className: PropType<string>;
+    columnType: PropType<import('../../interfaces/ColumnType').GridColumnType>;
+    colSpan: PropType<number>;
+    columnIndex: PropType<number>;
+    columnsCount: PropType<number>;
+    dataIndex: PropType<number>;
+    rowType: PropType<string>;
+    level: PropType<number>;
+    expanded: PropType<boolean>;
+    type: PropType<string>;
+    editor: PropType<string>;
+    rowSpan: PropType<{
+        count: number;
+        value: any;
+    }>;
+    isSelected: PropType<boolean>;
+    isHighlighted: PropType<boolean>;
+    ariaColumnIndex: PropType<number>;
+    render: PropType<any>;
+    isRtl: PropType<boolean>;
+}>, {
+    getKeyboardNavigationAttributes: () => void;
+    triggerCellContextMenu: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    field: PropType<string>;
+    dataItem: PropType<any>;
+    format: PropType<string>;
+    readFormat: PropType<string>;
+    className: PropType<string>;
+    columnType: PropType<import('../../interfaces/ColumnType').GridColumnType>;
+    colSpan: PropType<number>;
+    columnIndex: PropType<number>;
+    columnsCount: PropType<number>;
+    dataIndex: PropType<number>;
+    rowType: PropType<string>;
+    level: PropType<number>;
+    expanded: PropType<boolean>;
+    type: PropType<string>;
+    editor: PropType<string>;
+    rowSpan: PropType<{
+        count: number;
+        value: any;
+    }>;
+    isSelected: PropType<boolean>;
+    isHighlighted: PropType<boolean>;
+    ariaColumnIndex: PropType<number>;
+    render: PropType<any>;
+    isRtl: PropType<boolean>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/cells/pincell/GridPinCell.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 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 o=require("vue"),i=require("@progress/kendo-vue-data-tools"),r=require("@progress/kendo-vue-common"),p=require("./GridPinDropdownButton.js"),s=e=>{var n,t;return(t=(n=e.cells)==null?void 0:n.pin)==null?void 0:t[e.rowType||"data"]},b=o.defineComponent({name:"GridPinCell",inheritAttrs:!1,props:{id:String,field:String,dataItem:Object,format:String,readFormat:String,className:String,columnType:String,colSpan:Number,columnIndex:Number,columnsCount:Number,dataIndex:Number,rowType:String,level:Number,expanded:Boolean,type:String,editor:String,rowSpan:[Number,Object],isSelected:Boolean,isHighlighted:Boolean,ariaColumnIndex:Number,render:[String,Function,Object],isRtl:Boolean},inject:{getKeyboardNavigationAttributes:{default:r.noop},triggerCellContextMenu:{default:r.noop}},setup(){const e=o.inject("getKeyboardNavigationAttributes",r.noop),n=o.inject("triggerCellContextMenu",r.noop);return{getKeyboardNavigationAttributes:e,triggerCellContextMenu:n}},render(){var l,d;const e=this.$props;let n=null;const t=this.getKeyboardNavigationAttributes(e.id);let a={};if(e.rowType==="groupFooter")a={class:e.className,tabindex:t.tabIndex,"data-keyboardnavlevel":t[i.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":t[i.KEYBOARD_NAV_DATA_ID]},n=o.createVNode("td",a,null);else if(e.rowType!=="groupHeader"){const c=(d=(l=e.unstyled)==null?void 0:l.uGrid)!=null?d:r.uGrid,g=r.classNames(c.td({selected:e.isSelected,highlighted:e.isHighlighted,sorted:e.isSorted,alt:e.isAlt}),e.className);a={style:this.$attrs.style,colspan:e.colSpan,class:g,role:"gridcell","aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[i.TABLE_COL_INDEX_ATTRIBUTE]:e.columnIndex,tabindex:t.tabIndex,"data-keyboardnavlevel":t[i.KEYBOARD_NAV_DATA_LEVEL],"data-keyboardnavid":t[i.KEYBOARD_NAV_DATA_ID],onContextmenu:m=>{this.triggerCellContextMenu(m,e.dataItem,e.field)}},n=o.createVNode("td",a,[o.createVNode(p.GridPinDropdownButton,{dataItem:e.dataItem},null)])}const u=s(e);return r.getTemplate.call(this,{h:o.h,template:u,defaultRendering:n,additionalProps:{...e,tdProps:a},additionalListeners:{}})}});exports.GridPinCell=b;exports.getCustomCell=s;

package/cells/pincell/GridPinCell.mjs

@@ -0,0 +1,111 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as b, createVNode as i, h as C, inject as d } from "vue";
+import { KEYBOARD_NAV_DATA_ID as s, KEYBOARD_NAV_DATA_LEVEL as u, TABLE_COL_INDEX_ATTRIBUTE as N } from "@progress/kendo-vue-data-tools";
+import { noop as a, uGrid as x, classNames as y, getTemplate as A } from "@progress/kendo-vue-common";
+import { GridPinDropdownButton as S } from "./GridPinDropdownButton.mjs";
+const f = (e) => {
+  var n, t;
+  return (t = (n = e.cells) == null ? void 0 : n.pin) == null ? void 0 : t[e.rowType || "data"];
+}, B = /* @__PURE__ */ b({
+  name: "GridPinCell",
+  inheritAttrs: !1,
+  props: {
+    id: String,
+    field: String,
+    dataItem: Object,
+    format: String,
+    readFormat: String,
+    className: String,
+    columnType: String,
+    colSpan: Number,
+    columnIndex: Number,
+    columnsCount: Number,
+    dataIndex: Number,
+    rowType: String,
+    level: Number,
+    expanded: Boolean,
+    type: String,
+    editor: String,
+    rowSpan: [Number, Object],
+    isSelected: Boolean,
+    isHighlighted: Boolean,
+    ariaColumnIndex: Number,
+    render: [String, Function, Object],
+    isRtl: Boolean
+  },
+  inject: {
+    getKeyboardNavigationAttributes: {
+      default: a
+    },
+    triggerCellContextMenu: {
+      default: a
+    }
+  },
+  setup() {
+    const e = d("getKeyboardNavigationAttributes", a), n = d("triggerCellContextMenu", a);
+    return {
+      getKeyboardNavigationAttributes: e,
+      triggerCellContextMenu: n
+    };
+  },
+  render() {
+    var l, o;
+    const e = this.$props;
+    let n = null;
+    const t = this.getKeyboardNavigationAttributes(e.id);
+    let r = {};
+    if (e.rowType === "groupFooter")
+      r = {
+        class: e.className,
+        tabindex: t.tabIndex,
+        "data-keyboardnavlevel": t[u],
+        "data-keyboardnavid": t[s]
+      }, n = i("td", r, null);
+    else if (e.rowType !== "groupHeader") {
+      const c = (o = (l = e.unstyled) == null ? void 0 : l.uGrid) != null ? o : x, m = y(c.td({
+        selected: e.isSelected,
+        highlighted: e.isHighlighted,
+        sorted: e.isSorted,
+        alt: e.isAlt
+      }), e.className);
+      r = {
+        style: this.$attrs.style,
+        colspan: e.colSpan,
+        class: m,
+        role: "gridcell",
+        "aria-colindex": e.ariaColumnIndex,
+        "aria-selected": e.isSelected,
+        [N]: e.columnIndex,
+        tabindex: t.tabIndex,
+        "data-keyboardnavlevel": t[u],
+        "data-keyboardnavid": t[s],
+        onContextmenu: (p) => {
+          this.triggerCellContextMenu(p, e.dataItem, e.field);
+        }
+      }, n = i("td", r, [i(S, {
+        dataItem: e.dataItem
+      }, null)]);
+    }
+    const g = f(e);
+    return A.call(this, {
+      h: C,
+      template: g,
+      defaultRendering: n,
+      additionalProps: {
+        ...e,
+        tdProps: r
+      },
+      additionalListeners: {}
+    });
+  }
+});
+export {
+  B as GridPinCell,
+  f as getCustomCell
+};

package/cells/pincell/GridPinDropdownButton.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export declare const GridPinDropdownButton: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    dataItem: PropType<any>;
+}>, {
+    anchor: string;
+    showPopup: import('vue').Ref<boolean, boolean>;
+    hrefValue: string;
+    isPinned: import('vue').ComputedRef<boolean>;
+    pinToTopText: import('vue').ComputedRef<any>;
+    unpinText: import('vue').ComputedRef<any>;
+    menuItems: import('vue').ComputedRef<any[]>;
+    handleToggle: (e: MouseEvent) => void;
+    handleClose: (e: any) => void;
+    handleMenuSelect: (event: any) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    dataItem: PropType<any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/cells/pincell/GridPinDropdownButton.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 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 o=require("vue"),g=require("@progress/kendo-vue-common"),w=require("@progress/kendo-vue-popup"),u=require("@progress/kendo-svg-icons"),t=require("../../messages/main.js"),B=require("@progress/kendo-vue-layout"),V=o.defineComponent({name:"GridPinDropdownButton",props:{dataItem:Object},inject:{kendoLocalizationService:{default:null},kendo:{default:null}},setup(l){const e=o.inject("kendoLocalizationService",{}),s=o.inject("kendo",{}),i=o.ref(!1),T="#",P=g.guid(),a=o.computed(()=>s!=null&&s.getRowPinPosition?s.getRowPinPosition(l.dataItem):"none"),p=o.computed(()=>a.value!=="none"),c=o.computed(()=>{var n;return((n=e==null?void 0:e.toLanguageString)==null?void 0:n.call(e,t.gridPinToTop,t.messages[t.gridPinToTop]))||t.messages[t.gridPinToTop]}),f=o.computed(()=>{var n;return((n=e==null?void 0:e.toLanguageString)==null?void 0:n.call(e,t.gridPinToBottom,t.messages[t.gridPinToBottom]))||t.messages[t.gridPinToBottom]}),r=o.computed(()=>{var n;return((n=e==null?void 0:e.toLanguageString)==null?void 0:n.call(e,t.gridUnpin,t.messages[t.gridUnpin]))||t.messages[t.gridUnpin]}),I=o.computed(()=>{const n=[];return p.value&&n.push({text:r.value,svgIcon:u.unpinOutlineIcon,data:{action:"unpin"}}),a.value!=="top"&&n.push({text:c.value,svgIcon:u.pinOutlineTopIcon,data:{action:"pinTop"}}),a.value!=="bottom"&&n.push({text:f.value,svgIcon:u.pinOutlineBottomIcon,data:{action:"pinBottom"}}),n});return{anchor:P,showPopup:i,hrefValue:T,isPinned:p,pinToTopText:c,unpinText:r,menuItems:I,handleToggle:n=>{n.preventDefault(),i.value=!i.value},handleClose:n=>{n.isAnchorClicked||(i.value=!1)},handleMenuSelect:n=>{var d,h,m;const v=(h=(d=n.item)==null?void 0:d.data)==null?void 0:h.action;(m=s==null?void 0:s.onRowPin)==null||m.call(s,v,l.dataItem),i.value=!1}}},render(){return[o.createVNode("a",{class:"k-pin-cell",ref:this.anchor,href:this.hrefValue,tabindex:-1,onClick:this.handleToggle,"aria-label":this.isPinned?this.unpinText:this.pinToTopText},[o.createVNode(g.Icon,{name:this.isPinned?"unpin":"pin",icon:this.isPinned?u.unpinOutlineIcon:u.pinOutlineIcon},null)]),o.createVNode(w.Popup,{anchor:this.anchor,show:this.showPopup,anchorAlign:{vertical:"bottom",horizontal:"right"},popupClass:"k-menu-popup",onMousedownoutside:this.handleClose},{default:()=>[o.createVNode(B.Menu,{vertical:!0,items:this.menuItems,onSelect:this.handleMenuSelect},null)]})]}});exports.GridPinDropdownButton=V;

package/cells/pincell/GridPinDropdownButton.mjs

@@ -0,0 +1,111 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as M, createVNode as u, inject as P, ref as O, computed as e } from "vue";
+import { Icon as j, guid as D } from "@progress/kendo-vue-common";
+import { Popup as R } from "@progress/kendo-vue-popup";
+import { unpinOutlineIcon as I, pinOutlineIcon as V, pinOutlineTopIcon as A, pinOutlineBottomIcon as C } from "@progress/kendo-svg-icons";
+import { messages as s, gridPinToTop as l, gridPinToBottom as p, gridUnpin as h } from "../../messages/main.mjs";
+import { Menu as G } from "@progress/kendo-vue-layout";
+const Q = /* @__PURE__ */ M({
+  name: "GridPinDropdownButton",
+  props: {
+    dataItem: Object
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    },
+    kendo: {
+      default: null
+    }
+  },
+  setup(r) {
+    const t = P("kendoLocalizationService", {}), o = P("kendo", {}), i = O(!1), w = "#", v = D(), a = e(() => o != null && o.getRowPinPosition ? o.getRowPinPosition(r.dataItem) : "none"), c = e(() => a.value !== "none"), m = e(() => {
+      var n;
+      return ((n = t == null ? void 0 : t.toLanguageString) == null ? void 0 : n.call(t, l, s[l])) || s[l];
+    }), B = e(() => {
+      var n;
+      return ((n = t == null ? void 0 : t.toLanguageString) == null ? void 0 : n.call(t, p, s[p])) || s[p];
+    }), d = e(() => {
+      var n;
+      return ((n = t == null ? void 0 : t.toLanguageString) == null ? void 0 : n.call(t, h, s[h])) || s[h];
+    }), b = e(() => {
+      const n = [];
+      return c.value && n.push({
+        text: d.value,
+        svgIcon: I,
+        data: {
+          action: "unpin"
+        }
+      }), a.value !== "top" && n.push({
+        text: m.value,
+        svgIcon: A,
+        data: {
+          action: "pinTop"
+        }
+      }), a.value !== "bottom" && n.push({
+        text: B.value,
+        svgIcon: C,
+        data: {
+          action: "pinBottom"
+        }
+      }), n;
+    });
+    return {
+      anchor: v,
+      showPopup: i,
+      hrefValue: w,
+      isPinned: c,
+      pinToTopText: m,
+      unpinText: d,
+      menuItems: b,
+      handleToggle: (n) => {
+        n.preventDefault(), i.value = !i.value;
+      },
+      handleClose: (n) => {
+        n.isAnchorClicked || (i.value = !1);
+      },
+      handleMenuSelect: (n) => {
+        var f, g, T;
+        const x = (g = (f = n.item) == null ? void 0 : f.data) == null ? void 0 : g.action;
+        (T = o == null ? void 0 : o.onRowPin) == null || T.call(o, x, r.dataItem), i.value = !1;
+      }
+    };
+  },
+  render() {
+    return [u("a", {
+      class: "k-pin-cell",
+      ref: this.anchor,
+      href: this.hrefValue,
+      tabindex: -1,
+      onClick: this.handleToggle,
+      "aria-label": this.isPinned ? this.unpinText : this.pinToTopText
+    }, [u(j, {
+      name: this.isPinned ? "unpin" : "pin",
+      icon: this.isPinned ? I : V
+    }, null)]), u(R, {
+      anchor: this.anchor,
+      show: this.showPopup,
+      anchorAlign: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      popupClass: "k-menu-popup",
+      onMousedownoutside: this.handleClose
+    }, {
+      default: () => [u(G, {
+        vertical: !0,
+        items: this.menuItems,
+        onSelect: this.handleMenuSelect
+      }, null)]
+    })];
+  }
+});
+export {
+  Q as GridPinDropdownButton
+};