Context Menu on a Card

[Christian DAquino]

Is there a way to enable the context menu on the Kanban component? I'd like to right click on a card and open a context menu.

[Vinothkumar Yuvaraj]

Hi Christian DAquino,

We have fulfilled your requirement by using the dataBound event to implement the Context Menu based on the right click on the card. And then we have prevented the default browser context menu using the preventDefault method on the onCardRightClick method. Please refer to the following code and attached sample for your reference.

App.vue

<template>

  <div id="app">

    <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData" :cardSettings="cardSettings"

      :dataBound="handleCardRightClick">

      <e-columns>

        <e-column headerText="To Do" keyField="Open"></e-column>

        <e-column headerText="In Progress" keyField="InProgress"></e-column>

        <e-column headerText="Testing" keyField="Testing"></e-column>

        <e-column headerText="Done" keyField="Close"></e-column>

      </e-columns>

    </ejs-kanban>

    <ejs-contextmenu cssClass='e-cmenu-wrapper' id="contextmenu" ref="contextMenu" :items="menuItems"></ejs-contextmenu>

  </div>

</template>

<script>

```````

  methods: {

    handleCardRightClick() {

      var cardsList = document.querySelectorAll('.e-card');

      for (var i = 0; i < cardsList.length; i++) {

        var cardElem = cardsList[i];

        cardElem.addEventListener('contextmenu', this.onCardRightClick);

      }

    },

    onCardRightClick(e) {

      if(e.which == 3 ){

        this.$refs.contextMenu.open(e.pageY,e.pageX,e.target.parentElement)

        e.preventDefault();

        e.stopPropagation();

      }

    },

  }

}

</script>

Documentation : https://ej2.syncfusion.com/vue/documentation/context-menu/getting-started

API Link :

https://ej2.syncfusion.com/vue/documentation/api/kanban/#databound

https://ej2.syncfusion.com/vue/documentation/api/context-menu#open

Regards,

Vinothkumar

Attachment: Vue_Sample_5b1d182a.zip

[Christian DAquino]

Hi,

Yes, that will open the context menu. But how do I read the data of the card that was right clicked?

[Vinothkumar Yuvaraj]

Hi Christian DAquino,

To obtain the card's data upon right-clicking, you can utilize the getCardDetails method. Please refer to the provided code and attached sample for your reference.

 

 <ejs-kanban ref="kanban">

 </ejs-kanban>

 

 

methods: {

    onCardRightClick(e) {

      if(e.which == 3 ){

        console.log(this.$refs.kanban.getCardDetails(e.target.closest(".e-card")));

        this.$refs.contextMenu.open(e.pageY,e.pageX,e.target.parentElement)

        e.preventDefault();

        e.stopPropagation();

      }

    },

  }

API Link : https://ej2.syncfusion.com/vue/documentation/api/kanban/#getcarddetails

Regards,

Vinothkumar

Attachment: Sample_5296a545_cf067dc1.zip