Our state of the art Gantt chart


Post by rodel.ocfemia »

Hi,

How to display custom task menu when I right click a particular date icon?
For example, if column is StartDate and record is Leaf, display the following task menu items only.

Task Menu 1
Task Menu 2

All other menus should be hidden.

Thanks


Post by tasnim »

Hi,

You could check this guide for this https://bryntum.com/products/gantt/docs/guide/Gantt/customization/replacecontextmenu
We also have a demo of the custom task menu here https://bryntum.com/products/gantt/examples/custom-taskmenu/

Hope this will help


Post by rodel.ocfemia »

Hi,

The $ jquery code does not work in React Typescript. Is there any other way?

taskMenuBeforeShow({ taskRecord, event }) {

// Hide all visible context menus
$('.dropdown-menu:visible').hide();

// Set data, set position, and show custom task menu
$('#customTaskMenu').data({
	taskId : taskRecord.id
}).css({
	top  : event.y,
	left : event.x
}).show();

// Prevent built in task menu
return false;
}

Post by marcio »

Hey,

We recommend using JQuery for that purpose, but you could try a workaround with Vanilla JS like this

taskMenuBeforeShow({ taskRecord, event }) {
            const menu = document.querySelector('.dropdown-menu');

        menu.dataset.taskId = taskRecord.id;
        menu.style.top = event.y;
        menu.style.left = event.x;
        menu.style.display = 'block';

        // Prevent built in task menu
        return false;
    }

Best regards,
Márcio


Post by rodel.ocfemia »

Hi,

I tried the following but the custom task menu is not displaying. When I tried to console.log($(customMenuHtml).html()), the div content is displayed.

taskMenuBeforeShow({ taskRecord, event }: { taskRecord: any; event: any }) {
  $('.dropdown-menu:visible').hide();
  const customMenuHtml = $(`<div id='customTaskMenu' class='dropdown-menu'>
								<button class='dropdown-item' type='button' data-ref='move'>1 day ahead</button>
								<button class='dropdown-item' type='button' data-ref='edit'>Edit</button>
								<button class='dropdown-item' type='button' data-ref='remove'>Remove</button>
							</div>`);
  $(customMenuHtml)
	.data({
	  taskId: taskRecord.id,
	})
	.css({
	  top: event.y,
	  left: event.x,
	})
	.show();
  return false;
},

Post by rodel.ocfemia »

Hi,

This is the workaround I made to create a custom menus. This will work for now since I only need to display two custom menus. But If the menus are dynamic, is there a way to add multiple custom menu object to items object without overriding the existing menus?

processItems({ items, taskRecord }: { items: any; taskRecord: any }) {
  if (taskRecord.rowType == RowTypes.Gate) {
	items.editTask = false;
	items.deleteTask = false;
	items.copy = false;
	items.cut = false;
	items.paste = false;
	items.add = false;
	items.indent = false;
	items.outdent = false;
	items.unlinkTasks = false;
	items.linkTasks = false;
	items.add = {
	  text: 'Custom Menu 1',
	  weight: 90,
	  onItem: ({ taskRecord }: { taskRecord: any }) => {
		console.log('custom menu 1 click');
	  },
	};
	items.copy = {
	  text: 'Custom Menu 2',
	  weight: 90,
	  onItem: ({ taskRecord }: { taskRecord: any }) => {
		console.log('custom menu 2 click');
	  },
	};
  }
},

Post by alex.l »

But If the menus are dynamic, is there a way to add multiple custom menu object to items object without overriding the existing menus?

Not sure I got the question. When you add custom items, you can use new names for items and do not override default ones.

You can disable all default item which you not required in using initial config of the feature, see https://bryntum.com/products/gantt/docs/guide/Gantt/customization/contextmenu#customizing-the-menu-items

Later, on processItems, as you already did, you could add all items you want into menu or hide/show required items depends on some condition.

All the best,
Alex


Post by rodel.ocfemia »

I tried adding custom name to items and it worked. Now I can add multiple custom menus while all the default are hidden.

processItems({ items, taskRecord }: { items: any; taskRecord: any }) {
	items.editTask = false;
	items.deleteTask = false;
	items.copy = false;
	items.cut = false;
	items.paste = false;
	items.add = false;
	items.indent = false;
	items.outdent = false;
	items.unlinkTasks = false;
	items.linkTasks = false;
	items.custom1 = {
	  text: 'Custom Menu 1',
	  weight: 90,
	  onItem: ({ taskRecord }: { taskRecord: any }) => {
		console.log('custom menu 1 click');
	  },
	};
	items.custom2 = {
	  text: 'Custom Menu 2',
	  weight: 90,
	  onItem: ({ taskRecord }: { taskRecord: any }) => {
		console.log('custom menu 2 click');
	  },
	};
	items.custom3 = {
	  text: 'Custom Menu 3',
	  weight: 90,
	  onItem: ({ taskRecord }: { taskRecord: any }) => {
		console.log('custom menu 3 click');
	  },
	};
},

Post by alex.l »

Glad to hear! So you unblocked now?

All the best,
Alex


Post by rodel.ocfemia »

yes. thanks


Post Reply