@progress/kendo-vue-grid 8.1.2-develop.2 → 8.2.0-develop.1

package/header/HeaderRow.d.ts

@@ -105,6 +105,7 @@ declare const HeaderRow: import('vue').DefineComponent<import('vue').ExtractProp
     cellKeyDown(event: any, column: GridColumnProps): void;
     getTemplate(template: any): any;
     columnMenuClose(): void;
+    triggerContextMenu(e: MouseEvent, column: GridColumnProps): void;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     grid: PropType<any>;
     cellRender: PropType<string | ((h: any, defaultRendering: any | null, props: GridHeaderCellProps) => any)>;

package/header/HeaderRow.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 l=require("vue"),E=require("../interfaces/GridSortSettings.js"),U=require("../drag/ColumnResizer.js"),W=require("../drag/ColumnDraggable.js"),J=require("./GridHeaderCell.js"),Q=require("../columnMenu/ColumnMenu.js"),c=require("@progress/kendo-vue-common"),X=require("@progress/kendo-vue-data-tools"),Y=require("../utils/main.js"),s=require("../messages/main.js"),Z=require("@progress/kendo-vue-intl"),z=require("@progress/kendo-svg-icons"),ee=require("../utils/virtualColumns.js");function S(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!l.isVNode(t)}const M={none:"none",asc:"ascending",desc:"descending"},te={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},ne=l.defineComponent({name:"KendoHeaderRow",props:{grid:Object,cellRender:[String,Function,Object],cells:Object,groupable:[Boolean,Object],reorderable:Boolean,sortable:[Boolean,Object],sort:{type:Array},filter:Object,filterable:Boolean,filterOperators:Object,filterChange:Function,filterRow:Object,columns:Array,cellsToRender:Array,columnVirtualization:Boolean,columnsMap:Array,columnResize:Object,columnMenu:[Boolean,String,Function,Object],columnMenuAnimate:{type:[Boolean,Object],default:function(){return!0}},columnMenuIcon:Object,isRtl:Boolean,isColCountDefined:Boolean,headerSelectionValue:[Boolean,Array],columnsInitial:Array,onSortChange:Function,onFilterChange:Function,onSelectionchange:Function,onPressHandler:Function,onDragHandler:Function,onReleaseHandler:Function},inject:{onNavFocus:{default:c.noop},kendoLocalizationService:{default:null}},data(){return{columnMenuOpened:{}}},created(){this.serviceIndex=0,this.index=-1,this._element=null,this.cellClick=this.cellClick.bind(this)},methods:{pressHandler(t,n){this.$emit("pressHandler",t,n)},dragHandler(t,n){this.$emit("dragHandler",t,n)},releaseHandler(t){this.$emit("releaseHandler",t)},selectionChangeHandler(t){this.$emit("selectionchange",t)},cellClick(t,n){if(t.preventDefault(),!c.hasListener.call(this,"sortChange"))return;const{allowUnsort:m,mode:g}=E.normalize(this.$props.sortable||!1,n.sortable||!1),i=(this.$props.sort||[]).filter(o=>o.field===n.field)[0],d=te[m][i&&i.dir||""],u=g==="single"?[]:(this.$props.sort||[]).filter(o=>o.field!==n.field);d!==""&&n.field&&u.push({field:n.field,dir:d}),this.sortChangeHandler(u,{event:t,field:n.field})},sortChangeHandler(t,n){this.$emit("sortChange",t,n)},filterChangeHandler(t,n){this.$emit("filterChange",t,n)},cellClass(t,n,m){const g=n?" "+n:"";let i="k-header"+(m?" k-grid-header-sticky":"")+g;return this.$props.sort&&this.$props.sort.filter(d=>d.field===t).length>0&&(i+=" k-sorted"),i},cellKeyDown(t,n){t.defaultPrevented||(t.keyCode===c.Keys.enter&&this.cellClick(t,n),t.altKey&&t.keyCode===c.Keys.down&&n.field&&(t.preventDefault(),this.columnMenuOpened={[n.field]:!0}))},getTemplate(t){return c.templateRendering.call(this.$props.grid,t,c.getListeners.call(this.$props.grid))},columnMenuClose(){this.onNavFocus({}),this.columnMenuOpened={}}},computed:{element(){return this._element},theadClasses(){return{"k-table-thead":!0}}},render(){const t=Z.provideLocalizationService(this),n=t.toLanguageString(s.sortableColumnAriaLabel,s.messages[s.sortableColumnAriaLabel]),m=t.toLanguageString(s.sortableColumnAscendingAriaLabel,s.messages[s.sortableColumnAscendingAriaLabel]),g=t.toLanguageString(s.sortableColumnDescendingAriaLabel,s.messages[s.sortableColumnDescendingAriaLabel]);this.serviceIndex=0,this.index=-1;const i=this.$props.columnVirtualization,d=function(u,o){const a=ee.getVirtualHeaderCellsToRender({cellsToRender:this.$props.cellsToRender||[],columns:this.$props.columns,rowIndex:o,enableVirtualization:i,columnsMap:this.$props.columnsMap}),V=i;let k=V&&a.columnsToRender?a.columnsToRender:u;const D=V?a.colSpans:[];return!k||k.length===0?[]:k.map(function(v,N){var I,A,L;const e=this.$props.columns[v],b=this.$props.sortable&&e.sortable,R=this.$props.sort?this.$props.sort.findIndex(r=>r.field===e.field):-1,H=R>=0&&this.$props.sort[R].dir||"none",h=function(r){if(!this.$props.sort)return null;const $=r>=0?this.$props.sort[r].dir:"";return r>=0&&[l.createVNode("span",{key:1,class:"k-sort-icon"},[l.createVNode(c.Icon,{name:"sort-"+$+"-small",icon:$==="asc"?z.sortAscSmallIcon:z.sortDescSmallIcon},null)]),this.$props.sort.length>1&&l.createVNode("span",{key:2,class:"k-sort-icon"},[l.createVNode("span",{class:"k-sort-order"},[r+1])])]}.call(this,R),p=e.columnMenu||e.columnMenu===!1?e.columnMenu:this.$props.columnMenu,j=e.menuIcon||this.$props.columnMenuIcon,w=(e.kFirst?"k-first ":"")+this.cellClass(e.field,e.headerClassName,e.locked)+(p?" k-filterable":""),T=!p||typeof p=="boolean"?!!p:this.getTemplate(p),F=a.skipOffset?{borderLeftWidth:"1px"}:void 0,q=e.locked&&(e.left!==void 0||e.right!==void 0)?this.$props.isRtl?{left:e.right+"px",right:e.left+"px"}:{left:e.left+"px",right:e.right+"px"}:F,x=M[H]==="none"?n:M[H]==="ascending"?m:g;let f=e.isAccessible?{ariaSort:M[H],ariaLabel:x,role:"columnheader",ariaColumnIndex:this.$props.isColCountDefined?this.$props.columnsInitial.findIndex(r=>r.field===e.field)+1:void 0,ariaSelected:!1,ariaHaspopup:p?"menu":this.$props.filterable&&e.filterable?"dialog":void 0}:{role:"columnheader"};const B=e.declarationIndex>=0?++this.index:--this.serviceIndex,K=e.columnMenuOpened!==void 0?e.columnMenuOpened:this.columnMenuOpened[e.field],P=(I=D[N])!=null?I:e.headerColSpan,y=Y.resolveCells(this.$props.cells,e.cells),O={ariaSort:b?f.ariaSort:void 0,ariaLabel:b?f.ariaLabel:void 0,role:f.role,ariaColumnIndex:f.ariaColumnIndex,ariaSelected:f.ariaSelected,ariaHaspopup:f.ariaHaspopup,key:B,colSpan:P,rowSpan:e.rowSpan,class:w,style:q,columnId:e.id,navigatable:e.navigatable,onKeydown:r=>this.cellKeyDown(r,e)},C=[e.children.length===0&&p&&l.createVNode(Q.ColumnMenu,{key:0,column:{field:e.field,filter:e.filter},opened:K,animate:this.$props.columnMenuAnimate,sortable:b,sort:this.$props.sort,onClose:this.columnMenuClose,onSortchange:this.sortChangeHandler,filter:this.$props.filter,filterable:this.$props.filterable&&e.filterable,filterOperators:this.$props.filterOperators,onFilterchange:this.filterChangeHandler,render:T,columnMenuIcon:j},null),e.defaultHeaderCell&&l.createVNode("span",{class:"k-cell-inner"},[l.createVNode(e.defaultHeaderCell,{key:1,field:e.field,sortable:b,onHeadercellclick:r=>this.cellClick(r,e),onSelectionchange:this.selectionChangeHandler,selectionValue:(A=e.headerSelectionValue)!=null?A:this.$props.headerSelectionValue,title:e.title,render:(e.headerCell||this.$props.cellRender)&&this.getTemplate(e.headerCell||this.$props.cellRender)},S(h)?h:{default:()=>[h]})])||l.createVNode("span",{class:"k-cell-inner"},[l.createVNode(J.GridHeaderCell,{key:1,field:e.field,sortable:b,onHeadercellclick:r=>this.cellClick(r,e),selectionValue:(L=e.headerSelectionValue)!=null?L:this.$props.headerSelectionValue,title:e.title,render:(e.headerCell||this.$props.cellRender)&&this.getTemplate(e.headerCell||this.$props.cellRender)},S(h)?h:{default:()=>[h]})]),this.$props.columnResize&&this.$props.columnResize.resizable&&e.resizable&&l.createVNode(U.ColumnResizer,{key:2,onResize:(r,$,G)=>this.$props.columnResize&&this.$props.columnResize.dragHandler(r,e,$,G)},null)],_=l.createVNode(X.HeaderThElement,O,S(C)?C:{default:()=>[C]});return c.getTemplate.call(this,{h:l.h,template:y==null?void 0:y.headerCell,defaultRendering:_,additionalProps:{field:e.field,thProps:O},defaultSlots:C})},this)};return l.createVNode("thead",{role:"rowgroup",class:this.theadClasses,"data-keyboardnavheader":!0},[this.$props.columnsMap.map(function(u,o){let a;return(this.$props.groupable||this.$props.reorderable)&&l.createVNode(W.ColumnDraggable,{key:o,onPressHandler:this.pressHandler,onDragHandler:this.dragHandler,onReleaseHandler:this.releaseHandler},S(a=d.call(this,u,o))?a:{default:()=>[a]})||l.createVNode("tr",{class:"k-table-row",role:"row","aria-rowindex":o+1},[d.call(this,u,o)])},this),this.$props.filterRow])}});exports.HeaderRow=ne;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),E=require("../interfaces/GridSortSettings.js"),U=require("../drag/ColumnResizer.js"),W=require("../drag/ColumnDraggable.js"),J=require("./GridHeaderCell.js"),Q=require("../columnMenu/ColumnMenu.js"),u=require("@progress/kendo-vue-common"),X=require("@progress/kendo-vue-data-tools"),Y=require("../utils/main.js"),i=require("../messages/main.js"),Z=require("@progress/kendo-vue-intl"),A=require("@progress/kendo-svg-icons"),ee=require("../utils/virtualColumns.js");function S(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!r.isVNode(t)}const M={none:"none",asc:"ascending",desc:"descending"},te={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},ne=r.defineComponent({name:"KendoHeaderRow",props:{grid:Object,cellRender:[String,Function,Object],cells:Object,groupable:[Boolean,Object],reorderable:Boolean,sortable:[Boolean,Object],sort:{type:Array},filter:Object,filterable:Boolean,filterOperators:Object,filterChange:Function,filterRow:Object,columns:Array,cellsToRender:Array,columnVirtualization:Boolean,columnsMap:Array,columnResize:Object,columnMenu:[Boolean,String,Function,Object],columnMenuAnimate:{type:[Boolean,Object],default:function(){return!0}},columnMenuIcon:Object,isRtl:Boolean,isColCountDefined:Boolean,headerSelectionValue:[Boolean,Array],columnsInitial:Array,onSortChange:Function,onFilterChange:Function,onSelectionchange:Function,onPressHandler:Function,onDragHandler:Function,onReleaseHandler:Function},inject:{onNavFocus:{default:u.noop},kendoLocalizationService:{default:null},gridContext:{default:null}},data(){return{columnMenuOpened:{}}},created(){this.serviceIndex=0,this.index=-1,this._element=null,this.cellClick=this.cellClick.bind(this)},methods:{pressHandler(t,n){this.$emit("pressHandler",t,n)},dragHandler(t,n){this.$emit("dragHandler",t,n)},releaseHandler(t){this.$emit("releaseHandler",t)},selectionChangeHandler(t){this.$emit("selectionchange",t)},cellClick(t,n){if(t.preventDefault(),!u.hasListener.call(this,"sortChange"))return;const{allowUnsort:o,mode:a}=E.normalize(this.$props.sortable||!1,n.sortable||!1),c=(this.$props.sort||[]).filter(s=>s.field===n.field)[0],p=te[o][c&&c.dir||""],h=a==="single"?[]:(this.$props.sort||[]).filter(s=>s.field!==n.field);p!==""&&n.field&&h.push({field:n.field,dir:p}),this.sortChangeHandler(h,{event:t,field:n.field})},sortChangeHandler(t,n){this.$emit("sortChange",t,n)},filterChangeHandler(t,n){this.$emit("filterChange",t,n)},cellClass(t,n,o){const a=n?" "+n:"";let c="k-header"+(o?" k-grid-header-sticky":"")+a;return this.$props.sort&&this.$props.sort.filter(p=>p.field===t).length>0&&(c+=" k-sorted"),c},cellKeyDown(t,n){t.defaultPrevented||(t.keyCode===u.Keys.enter&&this.cellClick(t,n),t.altKey&&t.keyCode===u.Keys.down&&n.field&&(t.preventDefault(),this.columnMenuOpened={[n.field]:!0}))},getTemplate(t){return u.templateRendering.call(this.$props.grid,t,u.getListeners.call(this.$props.grid))},columnMenuClose(){this.onNavFocus({}),this.columnMenuOpened={}},triggerContextMenu(t,n){var o,a;(a=(o=this.gridContext)==null?void 0:o.onContextMenu)==null||a.call(o,t,void 0,n.field)}},computed:{element(){return this._element},theadClasses(){return{"k-table-thead":!0}}},render(){const t=Z.provideLocalizationService(this),n=t.toLanguageString(i.sortableColumnAriaLabel,i.messages[i.sortableColumnAriaLabel]),o=t.toLanguageString(i.sortableColumnAscendingAriaLabel,i.messages[i.sortableColumnAscendingAriaLabel]),a=t.toLanguageString(i.sortableColumnDescendingAriaLabel,i.messages[i.sortableColumnDescendingAriaLabel]);this.serviceIndex=0,this.index=-1;const c=this.$props.columnVirtualization,p=function(h,s){const d=ee.getVirtualHeaderCellsToRender({cellsToRender:this.$props.cellsToRender||[],columns:this.$props.columns,rowIndex:s,enableVirtualization:c,columnsMap:this.$props.columnsMap}),V=c;let k=V&&d.columnsToRender?d.columnsToRender:h;const z=V?d.colSpans:[];return!k||k.length===0?[]:k.map(function(D,v){var I,L,x;const e=this.$props.columns[D],C=this.$props.sortable&&e.sortable,R=this.$props.sort?this.$props.sort.findIndex(l=>l.field===e.field):-1,H=R>=0&&this.$props.sort[R].dir||"none",m=function(l){if(!this.$props.sort)return null;const $=l>=0?this.$props.sort[l].dir:"";return l>=0&&[r.createVNode("span",{key:1,class:"k-sort-icon"},[r.createVNode(u.Icon,{name:"sort-"+$+"-small",icon:$==="asc"?A.sortAscSmallIcon:A.sortDescSmallIcon},null)]),this.$props.sort.length>1&&r.createVNode("span",{key:2,class:"k-sort-icon"},[r.createVNode("span",{class:"k-sort-order"},[l+1])])]}.call(this,R),f=e.columnMenu||e.columnMenu===!1?e.columnMenu:this.$props.columnMenu,N=e.menuIcon||this.$props.columnMenuIcon,j=(e.kFirst?"k-first ":"")+this.cellClass(e.field,e.headerClassName,e.locked)+(f?" k-filterable":""),w=!f||typeof f=="boolean"?!!f:this.getTemplate(f),T=d.skipOffset?{borderLeftWidth:"1px"}:void 0,F=e.locked&&(e.left!==void 0||e.right!==void 0)?this.$props.isRtl?{left:e.right+"px",right:e.left+"px"}:{left:e.left+"px",right:e.right+"px"}:T,q=M[H]==="none"?n:M[H]==="ascending"?o:a;let g=e.isAccessible?{ariaSort:M[H],ariaLabel:q,role:"columnheader",ariaColumnIndex:this.$props.isColCountDefined?this.$props.columnsInitial.findIndex(l=>l.field===e.field)+1:void 0,ariaSelected:!1,ariaHaspopup:f?"menu":this.$props.filterable&&e.filterable?"dialog":void 0}:{role:"columnheader"};const B=e.declarationIndex>=0?++this.index:--this.serviceIndex,K=e.columnMenuOpened!==void 0?e.columnMenuOpened:this.columnMenuOpened[e.field],P=(I=z[v])!=null?I:e.headerColSpan,y=Y.resolveCells(this.$props.cells,e.cells),O={ariaSort:C?g.ariaSort:void 0,ariaLabel:C?g.ariaLabel:void 0,role:g.role,ariaColumnIndex:g.ariaColumnIndex,ariaSelected:g.ariaSelected,ariaHaspopup:g.ariaHaspopup,key:B,colSpan:P,rowSpan:e.rowSpan,class:j,style:F,columnId:e.id,navigatable:e.navigatable,onKeydown:l=>this.cellKeyDown(l,e),onContextmenu:l=>this.triggerContextMenu(l,e)},b=[e.children.length===0&&f&&r.createVNode(Q.ColumnMenu,{key:0,column:{field:e.field,filter:e.filter},opened:K,animate:this.$props.columnMenuAnimate,sortable:C,sort:this.$props.sort,onClose:this.columnMenuClose,onSortchange:this.sortChangeHandler,filter:this.$props.filter,filterable:this.$props.filterable&&e.filterable,filterOperators:this.$props.filterOperators,onFilterchange:this.filterChangeHandler,render:w,columnMenuIcon:N},null),e.defaultHeaderCell&&r.createVNode("span",{class:"k-cell-inner"},[r.createVNode(e.defaultHeaderCell,{key:1,field:e.field,sortable:C,onHeadercellclick:l=>this.cellClick(l,e),onSelectionchange:this.selectionChangeHandler,selectionValue:(L=e.headerSelectionValue)!=null?L:this.$props.headerSelectionValue,title:e.title,render:(e.headerCell||this.$props.cellRender)&&this.getTemplate(e.headerCell||this.$props.cellRender)},S(m)?m:{default:()=>[m]})])||r.createVNode("span",{class:"k-cell-inner"},[r.createVNode(J.GridHeaderCell,{key:1,field:e.field,sortable:C,onHeadercellclick:l=>this.cellClick(l,e),selectionValue:(x=e.headerSelectionValue)!=null?x:this.$props.headerSelectionValue,title:e.title,render:(e.headerCell||this.$props.cellRender)&&this.getTemplate(e.headerCell||this.$props.cellRender)},S(m)?m:{default:()=>[m]})]),this.$props.columnResize&&this.$props.columnResize.resizable&&e.resizable&&r.createVNode(U.ColumnResizer,{key:2,onResize:(l,$,G)=>this.$props.columnResize&&this.$props.columnResize.dragHandler(l,e,$,G)},null)],_=r.createVNode(X.HeaderThElement,O,S(b)?b:{default:()=>[b]});return u.getTemplate.call(this,{h:r.h,template:y==null?void 0:y.headerCell,defaultRendering:_,additionalProps:{field:e.field,thProps:O},additionalListeners:{contextmenu:l=>this.triggerContextMenu(l,e)},defaultSlots:b})},this)};return r.createVNode("thead",{role:"rowgroup",class:this.theadClasses,"data-keyboardnavheader":!0},[this.$props.columnsMap.map(function(h,s){let d;return(this.$props.groupable||this.$props.reorderable)&&r.createVNode(W.ColumnDraggable,{key:s,onPressHandler:this.pressHandler,onDragHandler:this.dragHandler,onReleaseHandler:this.releaseHandler},S(d=p.call(this,h,s))?d:{default:()=>[d]})||r.createVNode("tr",{class:"k-table-row",role:"row","aria-rowindex":s+1},[p.call(this,h,s)])},this),this.$props.filterRow])}});exports.HeaderRow=ne;

package/header/HeaderRow.mjs

@@ -11,17 +11,17 @@ import { ColumnResizer as Y } from "../drag/ColumnResizer.mjs";
 import { ColumnDraggable as Z } from "../drag/ColumnDraggable.mjs";
 import { GridHeaderCell as ee } from "./GridHeaderCell.mjs";
 import { ColumnMenu as te } from "../columnMenu/ColumnMenu.mjs";
-import { noop as le, templateRendering as ne, getListeners as re, Keys as A, hasListener as oe, getTemplate as se, Icon as ie } from "@progress/kendo-vue-common";
+import { noop as ne, templateRendering as le, getListeners as re, Keys as z, hasListener as oe, getTemplate as se, Icon as ie } from "@progress/kendo-vue-common";
 import { HeaderThElement as ae } from "@progress/kendo-vue-data-tools";
 import { resolveCells as ce } from "../utils/main.mjs";
-import { sortableColumnAriaLabel as j, messages as H, sortableColumnAscendingAriaLabel as w, sortableColumnDescendingAriaLabel as D } from "../messages/main.mjs";
+import { sortableColumnAriaLabel as A, messages as H, sortableColumnAscendingAriaLabel as j, sortableColumnDescendingAriaLabel as w } from "../messages/main.mjs";
 import { provideLocalizationService as de } from "@progress/kendo-vue-intl";
-import { sortAscSmallIcon as pe, sortDescSmallIcon as ue } from "@progress/kendo-svg-icons";
+import { sortAscSmallIcon as ue, sortDescSmallIcon as pe } from "@progress/kendo-svg-icons";
 import { getVirtualHeaderCellsToRender as he } from "../utils/virtualColumns.mjs";
-function C(t) {
+function b(t) {
   return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !J(t);
 }
-const y = {
+const M = {
   none: "none",
   asc: "ascending",
   desc: "descending"
@@ -36,7 +36,7 @@ const y = {
     desc: "asc",
     "": "asc"
   }
-}, Ae = /* @__PURE__ */ W({
+}, ze = /* @__PURE__ */ W({
   name: "KendoHeaderRow",
   props: {
     grid: Object,
@@ -81,10 +81,13 @@ const y = {
   },
   inject: {
     onNavFocus: {
-      default: le
+      default: ne
     },
     kendoLocalizationService: {
       default: null
+    },
+    gridContext: {
+      default: null
     }
   },
   data() {
@@ -96,11 +99,11 @@ const y = {
     this.serviceIndex = 0, this.index = -1, this._element = null, this.cellClick = this.cellClick.bind(this);
   },
   methods: {
-    pressHandler(t, l) {
-      this.$emit("pressHandler", t, l);
+    pressHandler(t, n) {
+      this.$emit("pressHandler", t, n);
     },
-    dragHandler(t, l) {
-      this.$emit("dragHandler", t, l);
+    dragHandler(t, n) {
+      this.$emit("dragHandler", t, n);
     },
     releaseHandler(t) {
       this.$emit("releaseHandler", t);
@@ -108,42 +111,46 @@ const y = {
     selectionChangeHandler(t) {
       this.$emit("selectionchange", t);
     },
-    cellClick(t, l) {
+    cellClick(t, n) {
       if (t.preventDefault(), !oe.call(this, "sortChange"))
         return;
       const {
-        allowUnsort: h,
-        mode: f
-      } = X(this.$props.sortable || !1, l.sortable || !1), s = (this.$props.sort || []).filter((o) => o.field === l.field)[0], a = fe[h][s && s.dir || ""], c = f === "single" ? [] : (this.$props.sort || []).filter((o) => o.field !== l.field);
-      a !== "" && l.field && c.push({
-        field: l.field,
-        dir: a
-      }), this.sortChangeHandler(c, {
+        allowUnsort: o,
+        mode: i
+      } = X(this.$props.sortable || !1, n.sortable || !1), a = (this.$props.sort || []).filter((s) => s.field === n.field)[0], d = fe[o][a && a.dir || ""], u = i === "single" ? [] : (this.$props.sort || []).filter((s) => s.field !== n.field);
+      d !== "" && n.field && u.push({
+        field: n.field,
+        dir: d
+      }), this.sortChangeHandler(u, {
         event: t,
-        field: l.field
+        field: n.field
       });
     },
-    sortChangeHandler(t, l) {
-      this.$emit("sortChange", t, l);
+    sortChangeHandler(t, n) {
+      this.$emit("sortChange", t, n);
     },
-    filterChangeHandler(t, l) {
-      this.$emit("filterChange", t, l);
+    filterChangeHandler(t, n) {
+      this.$emit("filterChange", t, n);
     },
-    cellClass(t, l, h) {
-      const f = l ? " " + l : "";
-      let s = "k-header" + (h ? " k-grid-header-sticky" : "") + f;
-      return this.$props.sort && this.$props.sort.filter((a) => a.field === t).length > 0 && (s += " k-sorted"), s;
+    cellClass(t, n, o) {
+      const i = n ? " " + n : "";
+      let a = "k-header" + (o ? " k-grid-header-sticky" : "") + i;
+      return this.$props.sort && this.$props.sort.filter((d) => d.field === t).length > 0 && (a += " k-sorted"), a;
     },
-    cellKeyDown(t, l) {
-      t.defaultPrevented || (t.keyCode === A.enter && this.cellClick(t, l), t.altKey && t.keyCode === A.down && l.field && (t.preventDefault(), this.columnMenuOpened = {
-        [l.field]: !0
+    cellKeyDown(t, n) {
+      t.defaultPrevented || (t.keyCode === z.enter && this.cellClick(t, n), t.altKey && t.keyCode === z.down && n.field && (t.preventDefault(), this.columnMenuOpened = {
+        [n.field]: !0
       }));
     },
     getTemplate(t) {
-      return ne.call(this.$props.grid, t, re.call(this.$props.grid));
+      return le.call(this.$props.grid, t, re.call(this.$props.grid));
     },
     columnMenuClose() {
       this.onNavFocus({}), this.columnMenuOpened = {};
+    },
+    triggerContextMenu(t, n) {
+      var o, i;
+      (i = (o = this.gridContext) == null ? void 0 : o.onContextMenu) == null || i.call(o, t, void 0, n.field);
     }
   },
   computed: {
@@ -157,37 +164,37 @@ const y = {
     }
   },
   render() {
-    const t = de(this), l = t.toLanguageString(j, H[j]), h = t.toLanguageString(w, H[w]), f = t.toLanguageString(D, H[D]);
+    const t = de(this), n = t.toLanguageString(A, H[A]), o = t.toLanguageString(j, H[j]), i = t.toLanguageString(w, H[w]);
     this.serviceIndex = 0, this.index = -1;
-    const s = this.$props.columnVirtualization, a = function(c, o) {
-      const i = he({
+    const a = this.$props.columnVirtualization, d = function(u, s) {
+      const c = he({
         cellsToRender: this.$props.cellsToRender || [],
         columns: this.$props.columns,
-        rowIndex: o,
-        enableVirtualization: s,
+        rowIndex: s,
+        enableVirtualization: a,
         columnsMap: this.$props.columnsMap
-      }), M = s;
-      let $ = M && i.columnsToRender ? i.columnsToRender : c;
-      const F = M ? i.colSpans : [];
-      return !$ || $.length === 0 ? [] : $.map(function(V, v) {
-        var I, z, L;
-        const e = this.$props.columns[V], m = this.$props.sortable && e.sortable, k = this.$props.sort ? this.$props.sort.findIndex((n) => n.field === e.field) : -1, S = k >= 0 && this.$props.sort[k].dir || "none", p = function(n) {
+      }), y = a;
+      let $ = y && c.columnsToRender ? c.columnsToRender : u;
+      const D = y ? c.colSpans : [];
+      return !$ || $.length === 0 ? [] : $.map(function(F, V) {
+        var x, I, L;
+        const e = this.$props.columns[F], m = this.$props.sortable && e.sortable, k = this.$props.sort ? this.$props.sort.findIndex((l) => l.field === e.field) : -1, S = k >= 0 && this.$props.sort[k].dir || "none", h = function(l) {
           if (!this.$props.sort)
             return null;
-          const b = n >= 0 ? this.$props.sort[n].dir : "";
-          return n >= 0 && [r("span", {
+          const C = l >= 0 ? this.$props.sort[l].dir : "";
+          return l >= 0 && [r("span", {
             key: 1,
             class: "k-sort-icon"
           }, [r(ie, {
-            name: "sort-" + b + "-small",
-            icon: b === "asc" ? pe : ue
+            name: "sort-" + C + "-small",
+            icon: C === "asc" ? ue : pe
           }, null)]), this.$props.sort.length > 1 && r("span", {
             key: 2,
             class: "k-sort-icon"
           }, [r("span", {
             class: "k-sort-order"
-          }, [n + 1])])];
-        }.call(this, k), d = e.columnMenu || e.columnMenu === !1 ? e.columnMenu : this.$props.columnMenu, x = e.menuIcon || this.$props.columnMenuIcon, T = (e.kFirst ? "k-first " : "") + this.cellClass(e.field, e.headerClassName, e.locked) + (d ? " k-filterable" : ""), B = !d || typeof d == "boolean" ? !!d : this.getTemplate(d), K = i.skipOffset ? {
+          }, [l + 1])])];
+        }.call(this, k), p = e.columnMenu || e.columnMenu === !1 ? e.columnMenu : this.$props.columnMenu, v = e.menuIcon || this.$props.columnMenuIcon, T = (e.kFirst ? "k-first " : "") + this.cellClass(e.field, e.headerClassName, e.locked) + (p ? " k-filterable" : ""), B = !p || typeof p == "boolean" ? !!p : this.getTemplate(p), K = c.skipOffset ? {
           borderLeftWidth: "1px"
         } : void 0, P = e.locked && (e.left !== void 0 || e.right !== void 0) ? this.$props.isRtl ? {
           left: e.right + "px",
@@ -195,24 +202,24 @@ const y = {
         } : {
           left: e.left + "px",
           right: e.right + "px"
-        } : K, N = y[S] === "none" ? l : y[S] === "ascending" ? h : f;
-        let u = e.isAccessible ? {
-          ariaSort: y[S],
+        } : K, N = M[S] === "none" ? n : M[S] === "ascending" ? o : i;
+        let f = e.isAccessible ? {
+          ariaSort: M[S],
           ariaLabel: N,
           role: "columnheader",
-          ariaColumnIndex: this.$props.isColCountDefined ? this.$props.columnsInitial.findIndex((n) => n.field === e.field) + 1 : void 0,
+          ariaColumnIndex: this.$props.isColCountDefined ? this.$props.columnsInitial.findIndex((l) => l.field === e.field) + 1 : void 0,
           ariaSelected: !1,
-          ariaHaspopup: d ? "menu" : this.$props.filterable && e.filterable ? "dialog" : void 0
+          ariaHaspopup: p ? "menu" : this.$props.filterable && e.filterable ? "dialog" : void 0
         } : {
           role: "columnheader"
         };
-        const _ = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex, q = e.columnMenuOpened !== void 0 ? e.columnMenuOpened : this.columnMenuOpened[e.field], E = (I = F[v]) != null ? I : e.headerColSpan, R = ce(this.$props.cells, e.cells), O = {
-          ariaSort: m ? u.ariaSort : void 0,
-          ariaLabel: m ? u.ariaLabel : void 0,
-          role: u.role,
-          ariaColumnIndex: u.ariaColumnIndex,
-          ariaSelected: u.ariaSelected,
-          ariaHaspopup: u.ariaHaspopup,
+        const _ = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex, q = e.columnMenuOpened !== void 0 ? e.columnMenuOpened : this.columnMenuOpened[e.field], E = (x = D[V]) != null ? x : e.headerColSpan, R = ce(this.$props.cells, e.cells), O = {
+          ariaSort: m ? f.ariaSort : void 0,
+          ariaLabel: m ? f.ariaLabel : void 0,
+          role: f.role,
+          ariaColumnIndex: f.ariaColumnIndex,
+          ariaSelected: f.ariaSelected,
+          ariaHaspopup: f.ariaHaspopup,
           key: _,
           colSpan: E,
           rowSpan: e.rowSpan,
@@ -220,8 +227,9 @@ const y = {
           style: P,
           columnId: e.id,
           navigatable: e.navigatable,
-          onKeydown: (n) => this.cellKeyDown(n, e)
-        }, g = [e.children.length === 0 && d && r(te, {
+          onKeydown: (l) => this.cellKeyDown(l, e),
+          onContextmenu: (l) => this.triggerContextMenu(l, e)
+        }, g = [e.children.length === 0 && p && r(te, {
           key: 0,
           column: {
             field: e.field,
@@ -238,36 +246,36 @@ const y = {
           filterOperators: this.$props.filterOperators,
           onFilterchange: this.filterChangeHandler,
           render: B,
-          columnMenuIcon: x
+          columnMenuIcon: v
         }, null), e.defaultHeaderCell && r("span", {
           class: "k-cell-inner"
         }, [r(e.defaultHeaderCell, {
           key: 1,
           field: e.field,
           sortable: m,
-          onHeadercellclick: (n) => this.cellClick(n, e),
+          onHeadercellclick: (l) => this.cellClick(l, e),
           onSelectionchange: this.selectionChangeHandler,
-          selectionValue: (z = e.headerSelectionValue) != null ? z : this.$props.headerSelectionValue,
+          selectionValue: (I = e.headerSelectionValue) != null ? I : this.$props.headerSelectionValue,
           title: e.title,
           render: (e.headerCell || this.$props.cellRender) && this.getTemplate(e.headerCell || this.$props.cellRender)
-        }, C(p) ? p : {
-          default: () => [p]
+        }, b(h) ? h : {
+          default: () => [h]
         })]) || r("span", {
           class: "k-cell-inner"
         }, [r(ee, {
           key: 1,
           field: e.field,
           sortable: m,
-          onHeadercellclick: (n) => this.cellClick(n, e),
+          onHeadercellclick: (l) => this.cellClick(l, e),
           selectionValue: (L = e.headerSelectionValue) != null ? L : this.$props.headerSelectionValue,
           title: e.title,
           render: (e.headerCell || this.$props.cellRender) && this.getTemplate(e.headerCell || this.$props.cellRender)
-        }, C(p) ? p : {
-          default: () => [p]
+        }, b(h) ? h : {
+          default: () => [h]
         })]), this.$props.columnResize && this.$props.columnResize.resizable && e.resizable && r(Y, {
           key: 2,
-          onResize: (n, b, U) => this.$props.columnResize && this.$props.columnResize.dragHandler(n, e, b, U)
-        }, null)], G = r(ae, O, C(g) ? g : {
+          onResize: (l, C, U) => this.$props.columnResize && this.$props.columnResize.dragHandler(l, e, C, U)
+        }, null)], G = r(ae, O, b(g) ? g : {
           default: () => [g]
         });
         return se.call(this, {
@@ -278,6 +286,9 @@ const y = {
             field: e.field,
             thProps: O
           },
+          additionalListeners: {
+            contextmenu: (l) => this.triggerContextMenu(l, e)
+          },
           defaultSlots: g
         });
       }, this);
@@ -286,23 +297,23 @@ const y = {
       role: "rowgroup",
       class: this.theadClasses,
       "data-keyboardnavheader": !0
-    }, [this.$props.columnsMap.map(function(c, o) {
-      let i;
+    }, [this.$props.columnsMap.map(function(u, s) {
+      let c;
       return (this.$props.groupable || this.$props.reorderable) && r(Z, {
-        key: o,
+        key: s,
         onPressHandler: this.pressHandler,
         onDragHandler: this.dragHandler,
         onReleaseHandler: this.releaseHandler
-      }, C(i = a.call(this, c, o)) ? i : {
-        default: () => [i]
+      }, b(c = d.call(this, u, s)) ? c : {
+        default: () => [c]
       }) || r("tr", {
         class: "k-table-row",
         role: "row",
-        "aria-rowindex": o + 1
-      }, [a.call(this, c, o)]);
+        "aria-rowindex": s + 1
+      }, [d.call(this, u, s)]);
     }, this), this.$props.filterRow]);
   }
 });
 export {
-  Ae as HeaderRow
+  ze as HeaderRow
 };

package/index.d.mts

@@ -47,5 +47,8 @@ export * from './utils/main.js';
 export * from './interfaces/events.js';
 export * from './interfaces/GridCellsSettings.js';
 export * from './StatusBar.js';
+export * from './contextMenu/enums.js';
+export { GridContextMenu, contextMenuItemsMap, getDefaultHeadContextMenuItems, getDefaultBodyContextMenuItems } from './contextMenu/GridContextMenu.js';
+export type { GridContextMenuOptions, GridCellBaseOptions, GridContextMenuProps, GridContextMenuItem } from './contextMenu/GridContextMenu.js';
 export { Grid, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridRow, GridFilterCell, GridHeaderCell, Footer, FooterRow, GridColumnMenuSort, sortGroupByField, GridColumnMenuFilter, filterGroupByField, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterCell, GridColumnMenuCheckboxFilter, GridToolbar, GridNoRecords, GridSearchBox, };
 export type { GridProps, GridColumnProps, GridCellProps, GridDetailRowProps, GridRowProps, GridFilterCellProps, GridHeaderCellProps, GridFooterCellProps, GridColumnMenuProps, GridColumnMenuCheckboxFilterProps, GridToolbarProps, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridSearchBoxProps, GridColumnState, GridColSpanProps, };

package/index.d.ts

@@ -47,5 +47,8 @@ export * from './utils/main';
 export * from './interfaces/events';
 export * from './interfaces/GridCellsSettings';
 export * from './StatusBar';
+export * from './contextMenu/enums';
+export { GridContextMenu, contextMenuItemsMap, getDefaultHeadContextMenuItems, getDefaultBodyContextMenuItems } from './contextMenu/GridContextMenu';
+export type { GridContextMenuOptions, GridCellBaseOptions, GridContextMenuProps, GridContextMenuItem } from './contextMenu/GridContextMenu';
 export { Grid, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridRow, GridFilterCell, GridHeaderCell, Footer, FooterRow, GridColumnMenuSort, sortGroupByField, GridColumnMenuFilter, filterGroupByField, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterCell, GridColumnMenuCheckboxFilter, GridToolbar, GridNoRecords, GridSearchBox, };
 export type { GridProps, GridColumnProps, GridCellProps, GridDetailRowProps, GridRowProps, GridFilterCellProps, GridHeaderCellProps, GridFooterCellProps, GridColumnMenuProps, GridColumnMenuCheckboxFilterProps, GridToolbarProps, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridSearchBoxProps, GridColumnState, GridColSpanProps, };

package/index.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("./RootGrid.js"),o=require("./columnMenu/GridColumnMenuSort.js"),t=require("./columnMenu/GridColumnMenuFilter.js"),l=require("./columnMenu/GridColumnMenuFilterUI.js"),u=require("./columnMenu/GridColumnMenuFilterCell.js"),n=require("./columnMenu/GridColumnMenuCheckboxFilter.js"),d=require("./cells/GridCell.js"),a=require("./cells/GridEditCell.js"),C=require("./cells/GridGroupCell.js"),s=require("./cells/GridHierarchyCell.js"),G=require("./cells/GridFilterCell.js"),m=require("./header/GridHeaderCell.js"),c=require("./footer/Footer.js"),p=require("./footer/FooterRow.js"),F=require("./rows/GridDetailRow.js"),M=require("./rows/GridRow.js"),q=require("./GridToolbar.js"),g=require("./components/noRecords/GridNoRecords.js");require("@progress/kendo-vue-data-tools");const S=require("./columnMenu/GridColumnMenuItem.js"),R=require("./columnMenu/GridColumnMenuItemContent.js"),f=require("./columnMenu/GridColumnMenuItemGroup.js"),h=require("./GridSearchBox.js"),e=require("./utils/main.js"),r=require("./StatusBar.js");exports.Grid=i.RootGrid;exports.GridColumnMenuSort=o.GridColumnMenuSort;exports.sortGroupByField=o.sortGroupByField;exports.GridColumnMenuFilter=t.GridColumnMenuFilter;exports.filterGroupByField=t.filterGroupByField;exports.GridColumnMenuFilterUI=l.GridColumnMenuFilterUI;exports.GridColumnMenuFilterCell=u.GridColumnMenuFilterCell;exports.GridColumnMenuCheckboxFilter=n.GridColumnMenuCheckboxFilter;exports.GridCell=d.GridCell;exports.GridEditCell=a.GridEditCell;exports.GridGroupCell=C.GridGroupCell;exports.GridHierarchyCell=s.GridHierarchyCell;exports.GridFilterCell=G.GridFilterCell;exports.GridHeaderCell=m.GridHeaderCell;exports.Footer=c.Footer;exports.FooterRow=p.FooterRow;exports.GridDetailRow=F.GridDetailRow;exports.GridRow=M.GridRow;exports.GridToolbar=q.GridToolbar;exports.GridNoRecords=g.GridNoRecords;exports.GridColumnMenuItem=S.GridColumnMenuItem;exports.GridColumnMenuItemContent=R.GridColumnMenuItemContent;exports.GridColumnMenuItemGroup=f.GridColumnMenuItemGroup;exports.GridSearchBox=h.GridSearchBox;exports.applyExpandedState=e.applyExpandedState;exports.autoGenerateColumns=e.autoGenerateColumns;exports.calcRowHeight=e.calcRowHeight;exports.checkPropCompatibility=e.checkPropCompatibility;exports.firefox=e.firefox;exports.firefoxMaxHeight=e.firefoxMaxHeight;exports.flatData=e.flatData;exports.footerColumns=e.footerColumns;exports.getColSpan=e.getColSpan;exports.getColumnWidth=e.getColumnWidth;exports.getDataAsArray=e.getDataAsArray;exports.getFlatColumnsState=e.getFlatColumnsState;exports.getIndex=e.getIndex;exports.getNestedValue=e.getNestedValue;exports.getRowSpanOptions=e.getRowSpanOptions;exports.groupedFirstItemValue=e.groupedFirstItemValue;exports.isRtl=e.isRtl;exports.isSorted=e.isSorted;exports.mapColumns=e.mapColumns;exports.parsers=e.parsers;exports.readColumns=e.readColumns;exports.resolveCells=e.resolveCells;exports.sanitizeColumns=e.sanitizeColumns;exports.StatusBar=r.StatusBar;exports.getStatusData=r.getStatusData;exports.leafColumns=r.leafColumns;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./RootGrid.js"),o=require("./columnMenu/GridColumnMenuSort.js"),i=require("./columnMenu/GridColumnMenuFilter.js"),u=require("./columnMenu/GridColumnMenuFilterUI.js"),d=require("./columnMenu/GridColumnMenuFilterCell.js"),a=require("./columnMenu/GridColumnMenuCheckboxFilter.js"),C=require("./cells/GridCell.js"),s=require("./cells/GridEditCell.js"),G=require("./cells/GridGroupCell.js"),m=require("./cells/GridHierarchyCell.js"),c=require("./cells/GridFilterCell.js"),M=require("./header/GridHeaderCell.js"),p=require("./footer/Footer.js"),x=require("./footer/FooterRow.js"),F=require("./rows/GridDetailRow.js"),g=require("./rows/GridRow.js"),q=require("./GridToolbar.js"),I=require("./components/noRecords/GridNoRecords.js");require("@progress/kendo-vue-data-tools");const S=require("./columnMenu/GridColumnMenuItem.js"),f=require("./columnMenu/GridColumnMenuItemContent.js"),R=require("./columnMenu/GridColumnMenuItemGroup.js"),h=require("./GridSearchBox.js"),e=require("./utils/main.js"),t=require("./StatusBar.js"),l=require("./contextMenu/enums.js"),r=require("./contextMenu/GridContextMenu.js");exports.Grid=n.RootGrid;exports.GridColumnMenuSort=o.GridColumnMenuSort;exports.sortGroupByField=o.sortGroupByField;exports.GridColumnMenuFilter=i.GridColumnMenuFilter;exports.filterGroupByField=i.filterGroupByField;exports.GridColumnMenuFilterUI=u.GridColumnMenuFilterUI;exports.GridColumnMenuFilterCell=d.GridColumnMenuFilterCell;exports.GridColumnMenuCheckboxFilter=a.GridColumnMenuCheckboxFilter;exports.GridCell=C.GridCell;exports.GridEditCell=s.GridEditCell;exports.GridGroupCell=G.GridGroupCell;exports.GridHierarchyCell=m.GridHierarchyCell;exports.GridFilterCell=c.GridFilterCell;exports.GridHeaderCell=M.GridHeaderCell;exports.Footer=p.Footer;exports.FooterRow=x.FooterRow;exports.GridDetailRow=F.GridDetailRow;exports.GridRow=g.GridRow;exports.GridToolbar=q.GridToolbar;exports.GridNoRecords=I.GridNoRecords;exports.GridColumnMenuItem=S.GridColumnMenuItem;exports.GridColumnMenuItemContent=f.GridColumnMenuItemContent;exports.GridColumnMenuItemGroup=R.GridColumnMenuItemGroup;exports.GridSearchBox=h.GridSearchBox;exports.applyExpandedState=e.applyExpandedState;exports.autoGenerateColumns=e.autoGenerateColumns;exports.calcRowHeight=e.calcRowHeight;exports.checkPropCompatibility=e.checkPropCompatibility;exports.firefox=e.firefox;exports.firefoxMaxHeight=e.firefoxMaxHeight;exports.flatData=e.flatData;exports.footerColumns=e.footerColumns;exports.getColSpan=e.getColSpan;exports.getColumnWidth=e.getColumnWidth;exports.getDataAsArray=e.getDataAsArray;exports.getFlatColumnsState=e.getFlatColumnsState;exports.getIndex=e.getIndex;exports.getNestedValue=e.getNestedValue;exports.getRowSpanOptions=e.getRowSpanOptions;exports.groupedFirstItemValue=e.groupedFirstItemValue;exports.isRtl=e.isRtl;exports.isSorted=e.isSorted;exports.mapColumns=e.mapColumns;exports.parsers=e.parsers;exports.readColumns=e.readColumns;exports.resolveCells=e.resolveCells;exports.sanitizeColumns=e.sanitizeColumns;exports.StatusBar=t.StatusBar;exports.getStatusData=t.getStatusData;exports.leafColumns=t.leafColumns;exports.GridContextMenuAnchorPart=l.GridContextMenuAnchorPart;exports.GridContextMenuItemNames=l.GridContextMenuItemNames;exports.GridContextMenu=r.GridContextMenu;exports.contextMenuItemsMap=r.contextMenuItemsMap;exports.getDefaultBodyContextMenuItems=r.getDefaultBodyContextMenuItems;exports.getDefaultHeadContextMenuItems=r.getDefaultHeadContextMenuItems;

package/index.mjs

@@ -6,79 +6,87 @@
  *-------------------------------------------------------------------------------------------
  */
 import { RootGrid as t } from "./RootGrid.mjs";
-import { GridColumnMenuSort as i, sortGroupByField as m } from "./columnMenu/GridColumnMenuSort.mjs";
-import { GridColumnMenuFilter as a, filterGroupByField as d } from "./columnMenu/GridColumnMenuFilter.mjs";
-import { GridColumnMenuFilterUI as n } from "./columnMenu/GridColumnMenuFilterUI.mjs";
-import { GridColumnMenuFilterCell as x } from "./columnMenu/GridColumnMenuFilterCell.mjs";
+import { GridColumnMenuSort as m, sortGroupByField as i } from "./columnMenu/GridColumnMenuSort.mjs";
+import { GridColumnMenuFilter as p, filterGroupByField as a } from "./columnMenu/GridColumnMenuFilter.mjs";
+import { GridColumnMenuFilterUI as d } from "./columnMenu/GridColumnMenuFilterUI.mjs";
+import { GridColumnMenuFilterCell as f } from "./columnMenu/GridColumnMenuFilterCell.mjs";
 import { GridColumnMenuCheckboxFilter as G } from "./columnMenu/GridColumnMenuCheckboxFilter.mjs";
-import { GridCell as g } from "./cells/GridCell.mjs";
-import { GridEditCell as M } from "./cells/GridEditCell.mjs";
-import { GridGroupCell as c } from "./cells/GridGroupCell.mjs";
+import { GridCell as M } from "./cells/GridCell.mjs";
+import { GridEditCell as F } from "./cells/GridEditCell.mjs";
+import { GridGroupCell as I } from "./cells/GridGroupCell.mjs";
 import { GridHierarchyCell as h } from "./cells/GridHierarchyCell.mjs";
-import { GridFilterCell as I } from "./cells/GridFilterCell.mjs";
-import { GridHeaderCell as B } from "./header/GridHeaderCell.mjs";
+import { GridFilterCell as y } from "./cells/GridFilterCell.mjs";
+import { GridHeaderCell as w } from "./header/GridHeaderCell.mjs";
 import { Footer as H } from "./footer/Footer.mjs";
-import { FooterRow as k } from "./footer/FooterRow.mjs";
-import { GridDetailRow as E } from "./rows/GridDetailRow.mjs";
-import { GridRow as V } from "./rows/GridRow.mjs";
-import { GridToolbar as z } from "./GridToolbar.mjs";
-import { GridNoRecords as P } from "./components/noRecords/GridNoRecords.mjs";
+import { FooterRow as A } from "./footer/FooterRow.mjs";
+import { GridDetailRow as k } from "./rows/GridDetailRow.mjs";
+import { GridRow as P } from "./rows/GridRow.mjs";
+import { GridToolbar as v } from "./GridToolbar.mjs";
+import { GridNoRecords as O } from "./components/noRecords/GridNoRecords.mjs";
 import "@progress/kendo-vue-data-tools";
 import { GridColumnMenuItem as U } from "./columnMenu/GridColumnMenuItem.mjs";
 import { GridColumnMenuItemContent as j } from "./columnMenu/GridColumnMenuItemContent.mjs";
 import { GridColumnMenuItemGroup as J } from "./columnMenu/GridColumnMenuItemGroup.mjs";
 import { GridSearchBox as L } from "./GridSearchBox.mjs";
-import { applyExpandedState as X, autoGenerateColumns as Y, calcRowHeight as Z, checkPropCompatibility as _, firefox as $, firefoxMaxHeight as rr, flatData as or, footerColumns as er, getColSpan as tr, getColumnWidth as lr, getDataAsArray as ir, getFlatColumnsState as mr, getIndex as pr, getNestedValue as ar, getRowSpanOptions as dr, groupedFirstItemValue as ur, isRtl as nr, isSorted as fr, mapColumns as xr, parsers as Cr, readColumns as Gr, resolveCells as sr, sanitizeColumns as gr } from "./utils/main.mjs";
-import { StatusBar as Mr, getStatusData as Sr, leafColumns as cr } from "./StatusBar.mjs";
+import { applyExpandedState as X, autoGenerateColumns as Y, calcRowHeight as Z, checkPropCompatibility as _, firefox as $, firefoxMaxHeight as ee, flatData as re, footerColumns as oe, getColSpan as te, getColumnWidth as le, getDataAsArray as me, getFlatColumnsState as ie, getIndex as ne, getNestedValue as pe, getRowSpanOptions as ae, groupedFirstItemValue as ue, isRtl as de, isSorted as xe, mapColumns as fe, parsers as Ce, readColumns as Ge, resolveCells as se, sanitizeColumns as Me } from "./utils/main.mjs";
+import { StatusBar as Fe, getStatusData as ce, leafColumns as Ie } from "./StatusBar.mjs";
+import { GridContextMenuAnchorPart as he, GridContextMenuItemNames as Re } from "./contextMenu/enums.mjs";
+import { GridContextMenu as De, contextMenuItemsMap as we, getDefaultBodyContextMenuItems as Be, getDefaultHeadContextMenuItems as He } from "./contextMenu/GridContextMenu.mjs";
 export {
   H as Footer,
-  k as FooterRow,
+  A as FooterRow,
   t as Grid,
-  g as GridCell,
+  M as GridCell,
   G as GridColumnMenuCheckboxFilter,
-  a as GridColumnMenuFilter,
-  x as GridColumnMenuFilterCell,
-  n as GridColumnMenuFilterUI,
+  p as GridColumnMenuFilter,
+  f as GridColumnMenuFilterCell,
+  d as GridColumnMenuFilterUI,
   U as GridColumnMenuItem,
   j as GridColumnMenuItemContent,
   J as GridColumnMenuItemGroup,
-  i as GridColumnMenuSort,
-  E as GridDetailRow,
-  M as GridEditCell,
-  I as GridFilterCell,
-  c as GridGroupCell,
-  B as GridHeaderCell,
+  m as GridColumnMenuSort,
+  De as GridContextMenu,
+  he as GridContextMenuAnchorPart,
+  Re as GridContextMenuItemNames,
+  k as GridDetailRow,
+  F as GridEditCell,
+  y as GridFilterCell,
+  I as GridGroupCell,
+  w as GridHeaderCell,
   h as GridHierarchyCell,
-  P as GridNoRecords,
-  V as GridRow,
+  O as GridNoRecords,
+  P as GridRow,
   L as GridSearchBox,
-  z as GridToolbar,
-  Mr as StatusBar,
+  v as GridToolbar,
+  Fe as StatusBar,
   X as applyExpandedState,
   Y as autoGenerateColumns,
   Z as calcRowHeight,
   _ as checkPropCompatibility,
-  d as filterGroupByField,
+  we as contextMenuItemsMap,
+  a as filterGroupByField,
   $ as firefox,
-  rr as firefoxMaxHeight,
-  or as flatData,
-  er as footerColumns,
-  tr as getColSpan,
-  lr as getColumnWidth,
-  ir as getDataAsArray,
-  mr as getFlatColumnsState,
-  pr as getIndex,
-  ar as getNestedValue,
-  dr as getRowSpanOptions,
-  Sr as getStatusData,
-  ur as groupedFirstItemValue,
-  nr as isRtl,
-  fr as isSorted,
-  cr as leafColumns,
-  xr as mapColumns,
-  Cr as parsers,
-  Gr as readColumns,
-  sr as resolveCells,
-  gr as sanitizeColumns,
-  m as sortGroupByField
+  ee as firefoxMaxHeight,
+  re as flatData,
+  oe as footerColumns,
+  te as getColSpan,
+  le as getColumnWidth,
+  me as getDataAsArray,
+  Be as getDefaultBodyContextMenuItems,
+  He as getDefaultHeadContextMenuItems,
+  ie as getFlatColumnsState,
+  ne as getIndex,
+  pe as getNestedValue,
+  ae as getRowSpanOptions,
+  ce as getStatusData,
+  ue as groupedFirstItemValue,
+  de as isRtl,
+  xe as isSorted,
+  Ie as leafColumns,
+  fe as mapColumns,
+  Ce as parsers,
+  Ge as readColumns,
+  se as resolveCells,
+  Me as sanitizeColumns,
+  i as sortGroupByField
 };

package/interfaces/GridProps.d.ts

@@ -8,7 +8,8 @@
 import { DataResult, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor } from '@progress/kendo-data-query';
 import { GridGroupableSettings } from './GridGroupableSettings';
 import { GridCellsSettings } from './GridCellsSettings';
-import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridCancelEvent, GridSaveEvent, GridRemoveEvent, GridEditEvent, GridNavigationActionEvent, GridKeyDownEvent, GridSearchChangeEvent, GridGroupExpandChangeEvent, GridDetailExpandChangeEvent, GridRowPinChangeEvent } from './events';
+import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridCancelEvent, GridSaveEvent, GridRemoveEvent, GridEditEvent, GridNavigationActionEvent, GridKeyDownEvent, GridSearchChangeEvent, GridGroupExpandChangeEvent, GridDetailExpandChangeEvent, GridRowPinChangeEvent, GridContextMenuEvent, GridContextMenuItemClickEvent } from './events';
+import { GridContextMenuOptions, GridCellBaseOptions } from '../contextMenu/GridContextMenu';
 import { GridCellProps } from './GridCellProps';
 import { GridSortSettings } from './GridSortSettings';
 import { DetailExpandDescriptor, GridPagerSettings, GroupExpandDescriptor, SearchField, SelectDescriptor } from '@progress/kendo-vue-data-tools';
@@ -635,6 +636,35 @@ export interface GridProps {
      *  enabled, the columns outside the view are not rendered.
      */
     columnVirtualization?: boolean;
+    /**
+     * Configures the context menu of the Grid. If set to `true`, the default context menu is rendered.
+     * Can be a `GridContextMenuOptions` object to configure head/body items separately,
+     * or a function that returns the configuration based on cell options.
+     *
+     * @example
+     * ```vue
+     * <Grid :context-menu="true" />
+     * ```
+     */
+    contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions);
+    /**
+     * Fires when the context menu is activated on a cell.
+     *
+     * @example
+     * ```vue
+     * <Grid @contextmenu="handleContextMenu" />
+     * ```
+     */
+    onContextmenu?: (event: GridContextMenuEvent) => void;
+    /**
+     * Fires when a context menu item is clicked.
+     *
+     * @example
+     * ```vue
+     * <Grid @contextmenuitemclick="handleItemClick" />
+     * ```
+     */
+    onContextmenuitemclick?: (event: GridContextMenuItemClickEvent) => void;
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
      * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.