а

Custom button in grid


#1

How add custom delete button in grid in gantt chart which work like add button.when click on delete button it fire specific function fire.


#2

Hello,
you can use column templates to define a markup of buttons, and then you can either put inline onclick handlers there or trace onTaskClick event.
nside a handler you’ll have a DOM event object which you can use to inspect the click target, so you’ll know if user has clicked on the button
docs.dhtmlx.com/gantt/desktop__s … esentation
docs.dhtmlx.com/gantt/api__gantt … event.html

UPDATE (2019-11-29)

Here is a complete demo:

Video guide:

And a code sample

	var colHeader = '<div class="gantt_grid_head_cell gantt_grid_head_add" onclick="gantt.createTask()"></div>';

	gantt.config.columns = [
		{name: "text", tree: true, width: '*', resize: true},
		{name: "start_date", align: "center", resize: true},
		{name: "duration", align: "center"},
		{name: "buttons",label: colHeader,width: 75,template: function (task) {
			return (
				'<i class="fa fa-pencil" data-action="edit"></i>' +
				'<i class="fa fa-plus" data-action="add"></i>' +
				'<i class="fa fa-times" data-action="delete"></i>'
				);
		}}
	];

	gantt.attachEvent("onTaskClick", function(id, e){
		var button = e.target.closest("[data-action]")
		if(button){
			var action = button.getAttribute("data-action");
			switch (action) {
				case "edit":
					gantt.showLightbox(id);
					break;
				case "add":
					gantt.createTask(null, id);
					break;
				case "delete":
					gantt.confirm({
						title: gantt.locale.labels.confirm_deleting_title,
						text: gantt.locale.labels.confirm_deleting,
						callback: function (res) {
							if (res)
								gantt.deleteTask(id);
						}
					});
					break;
			}
			return false;

		}
		return true;
	});