Context Menu

Question

How can I change context menu items based on column

Buvana Sathasivam · Answer

Hi Musab,

Thanks for using Syncfusion Products.

In the current implementation, we have provided a support to show all header text based on the column when right click on Kanban header. Please find the below screenshot.

If you wish to change context menu items based on columns, you can pass an empty array into menu items. This is used to remove the existing predefined context menu in Kanban board. Now, you can change for context menu items as per your wish using customMenuItems which contains text, target and template property. Text is used to show custom context menu items text. Target is used to specify where the context menu item is shown. A template is used for to display the template element id. Please find the below code.

contextMenu.html

$("#Kanban").ejKanban(

{

……

contextMenuSettings: {

enable: true,

menuItems: [], // Empty the predefined menu items

customMenuItems: [ // Specify custom menu items

{ text: "Backlog" },

{ text: "In Progress", target: ej.Kanban.Target.Header },

{ text: "Testing" },

{ text: "Done" }

],

},

});

Please find the below JS playground link.

https://jsplayground.syncfusion.com/eqxqvwvm

Demo link: https://js.syncfusion.com/demos/web/#!/bootstrap/kanban/contextmenu

UG link: https://help.syncfusion.com/js/kanban/context-menu#custom-context-menu

API link: https://help.syncfusion.com/api/js/ejkanban#members:contextmenusettings-custommenuitems

Please let us know if we have misunderstood the query. If so, provide more exact details regarding your requirement so that we can check and provide an appropriate solution.

Regards,

Buvana S

Musab Adnan Basheer · Answer

Hello Buvana,thank you so much for your answer! I am targeting card not the column and I want to change it dynamically based on the column.

Buvana Sathasivam · Answer

Hi Musab, 

Thanks for your update. 

You can change the context menu items dynamically using the display property.  By default, our Kanban control context menu items rendered at initial level.  So, you can render all custom context menu items based on columns on initial rendering of our Kanban control.  Now, you can display the custom context menu items based on a particular column by setting display property.  In the below JS playground, we have shown only one context menu items at the first column.  In the second column, shown with three context menu items and third column shown with two context menu items using contextOpen event. 





Html 

  $("#Kanban").ejKanban({ 
       ………….. 
       contextOpen: contextOpen,  // Context open event 
   }); 
       
      function contextOpen(e) {  // Triggered when context is open 
        if ($(e.target).parent(".e-kanbancard")) {  // Check if is it card 
          var kanbanContext = document.getElementById(this.element[0].id + "_Context");   // Get rendered context menu items 
          if ($(e.target).parents(".e-rowcell").index() === 2) {  // Check the columns 
            kanbanContext.children[2].style.display = "none";   // Set display as none 
          } 
       } 
         
JS Playground: https://jsplayground.syncfusion.com/asptautu  

Please let us know if we have misunderstood the query.  If so, provide more exact details regarding your requirement so that we can check and provide an appropriate solution. 

Regards, 
Buvana S

Musab Adnan Basheer · Answer

Hello Buvana,Thank you for your response and for provided example. The given example will be a great help in developing the desired requirement.

Buvana Sathasivam · Answer

Hi Musab, 

Thanks for your update. 

Please get back to us if you need any assistance. 

Regards, 
Buvana S