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

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
+};

package/common.d.ts

@@ -52,6 +52,11 @@ declare const gridProps: {
     };
     loader: PropType<string | Object | Function>;
     lockGroups: PropType<boolean>;
+    pinnable: PropType<boolean>;
+    defaultPinnedTopRows: PropType<any[]>;
+    defaultPinnedBottomRows: PropType<any[]>;
+    pinnedTopRows: PropType<any[]>;
+    pinnedBottomRows: PropType<any[]>;
     defaultFilter: PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
     filter: PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;
     defaultSearch: PropType<import('@progress/kendo-data-query').CompositeFilterDescriptor>;

package/common.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"});require("vue");const t=require("@progress/kendo-vue-common"),n={id:String,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(){}},cells:Object,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],lockGroups:Boolean,defaultFilter:Object,filter:Object,defaultSearch:Object,search:Object,searchFields:Array,highlight:Object,pageable:[Boolean,Object],pageSize:Number,total:Number,fixedScroll:Boolean,skip:Number,defaultSkip:Number,take:Number,defaultTake:Number,expandField:String,expandColumn:Object,selectedField:String,cellRender:[String,Function,Object],rowRender:[String,Function,Object],rowSpannable:[Boolean,Object],resizable:Boolean,reorderable:Boolean,group:Array,defaultGroup:Array,groupable:[Boolean,Object],groupExpand:Array,defaultGroupExpand:Array,detailExpand:Object,defaultDetailExpand:Object,editField:String,rowClass:Function,select:Object,defaultSelect:Object,selectable:[Boolean,Object],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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("vue");const t=require("@progress/kendo-vue-common"),n={id:String,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(){}},cells:Object,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],lockGroups:Boolean,pinnable:Boolean,defaultPinnedTopRows:Array,defaultPinnedBottomRows:Array,pinnedTopRows:Array,pinnedBottomRows:Array,defaultFilter:Object,filter:Object,defaultSearch:Object,search:Object,searchFields:Array,highlight:Object,pageable:[Boolean,Object],pageSize:Number,total:Number,fixedScroll:Boolean,skip:Number,defaultSkip:Number,take:Number,defaultTake:Number,expandField:String,expandColumn:Object,selectedField:String,cellRender:[String,Function,Object],rowRender:[String,Function,Object],rowSpannable:[Boolean,Object],resizable:Boolean,reorderable:Boolean,group:Array,defaultGroup:Array,groupable:[Boolean,Object],groupExpand:Array,defaultGroupExpand:Array,detailExpand:Object,defaultDetailExpand:Object,editField:String,rowClass:Function,select:Object,defaultSelect:Object,selectable:[Boolean,Object],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;

package/common.mjs

@@ -7,7 +7,7 @@
  */
 import "vue";
 import { SvgIcon as t } from "@progress/kendo-vue-common";
-const o = {
+const a = {
   id: String,
   autoProcessData: [Boolean, Object],
   topCacheCount: {
@@ -51,6 +51,11 @@ const o = {
   },
   loader: [String, Function, Object],
   lockGroups: Boolean,
+  pinnable: Boolean,
+  defaultPinnedTopRows: Array,
+  defaultPinnedBottomRows: Array,
+  pinnedTopRows: Array,
+  pinnedBottomRows: Array,
   defaultFilter: Object,
   filter: Object,
   defaultSearch: Object,
@@ -125,5 +130,5 @@ const o = {
   onDetailexpandchange: Function
 };
 export {
-  o as gridProps
+  a as gridProps
 };

package/components/PinnedRowsTable.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @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 { DataRowContext } from '../getRowContents';
+import { GridRowProps } from '../interfaces/GridRowProps';
+/**
+ * @hidden
+ */
+export interface PinnedRowsTableProps {
+    size?: string;
+    cols?: any[];
+    dataRowContext: DataRowContext;
+    position: 'top' | 'bottom';
+    pinnedItems: any[];
+    rowHeight?: number;
+    rows?: GridRowProps['rows'];
+    selectable?: object;
+}
+/**
+ * @hidden
+ */
+export declare const PinnedRowsTable: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    size: PropType<string>;
+    cols: PropType<any[]>;
+    dataRowContext: PropType<DataRowContext>;
+    position: PropType<"bottom" | "top">;
+    pinnedItems: PropType<any[]>;
+    rowHeight: NumberConstructor;
+    rows: PropType<import('../interfaces/GridRowsSettings').GridRowsSettings>;
+    selectable: PropType<object>;
+}>, {
+    isTop: import('vue').ComputedRef<boolean>;
+    pinnedRef: import('vue').ComputedRef<any>;
+    handlePinnedScroll: (event: UIEvent) => void;
+    rowTemplateSettings: import('vue').ComputedRef<import('../interfaces/GridRowsSettings').GridRowsSettings>;
+    pinnedRows: import('vue').ComputedRef<import("vue/jsx-runtime").JSX.Element[]>;
+    containerClassName: import('vue').ComputedRef<string>;
+    tableClassName: import('vue').ComputedRef<string>;
+    handleSelectionRelease: (event: any) => void;
+    pinnedSelectable: import('vue').ComputedRef<object>;
+    pinnedBodyAttributes: import('vue').ComputedRef<{
+        "data-keyboardnavtoppinned": boolean;
+    } | {
+        "data-keyboardnavbottompinned": boolean;
+    }>;
+}, {}, {}, {
+    setWidth(width: number): void;
+    setScrollLeft(scrollLeft: number): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    size: PropType<string>;
+    cols: PropType<any[]>;
+    dataRowContext: PropType<DataRowContext>;
+    position: PropType<"bottom" | "top">;
+    pinnedItems: PropType<any[]>;
+    rowHeight: NumberConstructor;
+    rows: PropType<import('../interfaces/GridRowsSettings').GridRowsSettings>;
+    selectable: PropType<object>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/components/PinnedRowsTable.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 t=require("vue"),n=require("@progress/kendo-vue-common"),c=require("@progress/kendo-vue-data-tools"),b=require("@progress/kendo-vue-intl"),v=require("../rows/GridRow.js"),L=require("../getRowContents.js"),l=require("../messages/main.js"),I=t.defineComponent({name:"PinnedRowsTable",props:{size:String,cols:Array,dataRowContext:Object,position:String,pinnedItems:Array,rowHeight:Number,rows:Object,selectable:Object},inject:{gridContext:{default:()=>({})},kendoLocalizationService:{default:null}},mounted(){this.tableRef=n.getRef(this,"table"),this.colGroupRefEl=n.getRef(this,"colGroup")},updated(){this.tableRef=n.getRef(this,"table"),this.colGroupRefEl=n.getRef(this,"colGroup")},methods:{setWidth(e){const a=n.getRef(this,"table");a&&(a.style.width=e?e+"px":"")},setScrollLeft(e){const a=n.getRef(this,"pinnedRef");a&&a.scrollLeft!==e&&(a.scrollLeft=e)}},setup(e){const a=t.inject("kendo",{}),d=t.computed(()=>e.position==="top"),R=t.computed(()=>d.value?a.pinnedTopRef:a.pinnedBottomRef),m=t.ref(!1),p=s=>{const o=a.containerElementRef;if(!o||m.value)return;const i=s.currentTarget.scrollLeft;o.scrollLeft!==i&&(o.scrollLeft=i)},w=t.computed(()=>{var s;return(s=e.rows)!=null&&s.pinnedData?{...e.rows,data:e.rows.pinnedData}:e.rows}),g=t.computed(()=>!e.pinnedItems||!e.dataRowContext?[]:e.pinnedItems.map((s,o)=>{const i={dataItem:s,rowType:"data",level:0,expanded:!1,dataIndex:o},r=e.dataRowContext.dataItemKey,u="pinned_"+((r?n.getter(r)(s):void 0)||"ai"+o),f=L.getRowContents(e.dataRowContext,i,u,o);return t.createVNode(v.GridRow,{key:u,rowType:"data",item:i,dataIndex:o,ariaRowIndex:o+1,absoluteRowIndex:o,isAltRow:o%2!==0,isHidden:!1,rowHeight:e.rowHeight,isSelected:f.isSelected},{default:()=>[f.row]})})),h=t.computed(()=>n.classNames("k-grid-pinned-container",{"k-pos-bottom":!d.value})),S=t.computed(()=>n.classNames(n.uGrid.table({size:e.size}))),y=s=>{var i,r;const o=(i=e.pinnedItems)==null?void 0:i[s.startRowIndex];o&&((r=a.pinnedSelectionRelease)==null||r.call(a,s,o))},N=t.computed(()=>e.selectable?{...typeof e.selectable=="object"?e.selectable:{},enabled:!0,drag:!1}:e.selectable),T=t.computed(()=>d.value?c.tableKeyboardNavigationTopPinnedAttributes:c.tableKeyboardNavigationBottomPinnedAttributes);return{isTop:d,pinnedRef:R,handlePinnedScroll:p,rowTemplateSettings:w,pinnedRows:g,containerClassName:h,tableClassName:S,handleSelectionRelease:y,pinnedSelectable:N,pinnedBodyAttributes:T}},render(){return t.createVNode("div",{class:this.containerClassName,role:"presentation",style:{display:this.pinnedRows.length?"":"none"}},[t.createVNode("div",{class:"k-grid-pinned-wrap",ref:n.setRef(this,"pinnedRef"),onScroll:this.handlePinnedScroll},[t.createVNode(c.TableSelection,{selectable:this.pinnedSelectable,onRelease:this.handleSelectionRelease},{default:()=>[t.createVNode("table",{ref:n.setRef(this,"table"),class:this.tableClassName,"aria-label":this.isTop?b.provideLocalizationService(this).toLanguageString(l.pinnedTopRowsAriaLabel,l.messages[l.pinnedTopRowsAriaLabel]):b.provideLocalizationService(this).toLanguageString(l.pinnedBottomRowsAriaLabel,l.messages[l.pinnedBottomRowsAriaLabel])},[t.createVNode("colgroup",{ref:n.setRef(this,"colGroup")},[this.$props.cols]),t.createVNode("tbody",t.mergeProps({class:n.classNames(n.uGrid.tbody({}))},this.pinnedBodyAttributes),[this.pinnedRows])])]})])])}});exports.PinnedRowsTable=I;