Kendo Vue ContextMenu with Vue 3 and typescript

[Sara]

Hi, I am just getting started with using the Kendo Vue components and am trying to implement a context menu.  My application is using Vuejs 3 with typescript.

I have a version working with ContextMenu from the @progress/kendo-layout-vue-wrapper package.  However, with this, I can't seem to access anything from an event handler argument.  Example:  function onMenuSelect(e) - I can't seem to access anything about e in my typescript/javascript. 

In searching around for typescript types for this, I notice that there is a native kendo vue menu which requires Menu from @progress/kendo-vue-layout and Popup from @progress/kendo-vue-popup.  Should I be using this instead?  And with this, are there any examples for how to open the menu from rows in a table?  I need my context menu to be dynamic based on which table row is triggering it.

I hope some of this question makes sense - I am totally new to using this.  Thanks!

[Petar]

Hi Sara,

First of all, I am happy to hear that you've selected the Kendo UI for Vue components. Before I answer your question about the ContextMenu, below I will try to give you more overview details about the suite and the components it provides.

The Kendo UI for Vue suite has two types of components:

• Native components - The Native components are built from scratch with Vue.js. They benefit from all the features and functionalities of the Vue framework
• Wrapper components - The Wrapper components use Kendo UI for jQuery under the hood. Because of jQuery, there are some limitations in more specific and complex use-case scenarios.

Historically, the Wrapper components were introduced at first, and then we started with the Native suite. Currently, the Native components are the ones we are focused on and which we recommend to be used. 

To answer your question about the ContextMenu, I would recommend using the Native Context menu in a combination with the Native Grid. 

Attached to my reply, you will find a runnable example in which we have a Native Grid with Native ContextMenu + Composition API. To achieve the demonstrated behavior, the rowRender property of the Grid is used. The template passed to this property is defined as follows:

<template v-slot:myTemplate="{ props }">
  <tr @contextmenu="(ev) => handleContextMenu(ev, props.dataItem)">
    <td v-for="column in props.dataItem" :key="column.ProductID">{{ column }}</td>
  </tr>
</template>

The code in yellow is triggered when we right-click a row in the Grid. It allows us to pass the dataItem of the clicked row to the handleContextMenu method. From this method, we can define the content of the ContextMenu, based on a value from the dataItem. In the attached example the definition of the handleContextMenu  is defined as follows:

const handleContextMenu = (e: MouseEvent, dataItem: any) => {
  e.preventDefault();
  state.value.offSet = {
    left: e.clientX,
    top: e.clientY,
  };
  console.log(dataItem);
  if (dataItem.ProductID % 3 === 0) {
    state.value.items = [
      {
        text: 'This product id can be divided by 3',
        items: [
          { text: 'Item1.1' },
          {
            text: 'Item1.2',
            items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }],
          },
        ],
      },
      {
        text: 'My Context Menu',
      },
    ]
  } else if (dataItem.ProductID % 2 === 0) {
            state.value.items = [
      {
        text: 'Division by 2',
        items: [
          { text: 'Item1.1' },
          {
            text: 'Item1.2',
            items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }],
          },
        ],
      },
      {
        text: 'My Context Menu',
      },
    ]
  } else {
            state.value.items = [
    {
      text: 'Item 1',
      items: [
        { text: 'Item1.1' },
        {
          text: 'Item1.2',
          items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }],
        },
      ],
    },
    {
      text: 'Item 2',
    },
  ]
  }

  state.value.show = true;
};

Based on the value of the ProductID value in the dataItem we are displaying different ContextMenu content. 

Please check the attached example and let me know if you have questions about the suggested solution. If you are now starting with the Kendo UI for Vue, most probably you will need additional details which I will be happy to provide.

Looking forward to your reply.

Regards,
Petar
Progress Telerik