dhtmlxGantt - grid buttons

<!DOCTYPE html>
<html>

  <head>
    <script src="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=20180322"></script>
    <link rel="stylesheet" href=" https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css?v=20180322">
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?v=5.2.0">
  </head>

  <body>
    <div id="gantt_here"></div>
  </body>

</html>

document.addEventListener("DOMContentLoaded", function(event) {
	gantt.config.scale_unit = "month";
	gantt.config.date_scale = "%F, %Y";
	gantt.config.scale_height = 50;
	gantt.config.subscales = [
		{unit: "day", step: 1, date: "%j, %D"}
	];

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

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



	gantt.attachEvent("onTaskClick", function(id, e){
		var button = e.target.closest("[data-action]");
		if(button){
			alert("asd")	
		}
		return true;
	});

	gantt.init("gantt_here");
	gantt.parse({
	"data":[
		{"id":11, "text":"Project #1", type:gantt.config.types.project, "progress": 0.6, "open": true,"islandingpage":true},

		{"id":12, "text":"Task #1", "start_date":"03-04-2018", "duration":"5", "parent":"11", "progress": 1, "open": true,"islandingpage":false},
		{"id":13, "text":"Task #2", "start_date":"03-04-2018", type:gantt.config.types.project, "parent":"11", "progress": 0.5, "open": true,"islandingpage":false},
		{"id":14, "text":"Task #3", "start_date":"02-04-2018", "duration":"6", "parent":"11", "progress": 0.8, "open": true,"islandingpage":false},
		{"id":15, "text":"Task #4", type:gantt.config.types.project, "parent":"11", "progress": 0.2, "open": true,"islandingpage":true},
		{"id":16, "text":"Final milestone", "start_date":"15-04-2018", type:gantt.config.types.milestone, "parent":"11", "progress": 0, "open": true,"islandingpage":false},

		{"id":17, "text":"Task #2.1", "start_date":"03-04-2018", "duration":"2", "parent":"13", "progress": 1, "open": true,"islandingpage":false},
		{"id":18, "text":"Task #2.2", "start_date":"06-04-2018", "duration":"3", "parent":"13", "progress": 0.8, "open": true,"islandingpage":false},
		{"id":19, "text":"Task #2.3", "start_date":"10-04-2018", "duration":"4", "parent":"13", "progress": 0.2, "open": true,"islandingpage":false},
		{"id":20, "text":"Task #2.4", "start_date":"10-04-2018", "duration":"4", "parent":"13", "progress": 0, "open": true,"islandingpage":false},
		{"id":21, "text":"Task #4.1", "start_date":"03-04-2018", "duration":"4", "parent":"15", "progress": 0.5, "open": true,"islandingpage":false},
		{"id":22, "text":"Task #4.2", "start_date":"03-04-2018", "duration":"4", "parent":"15", "progress": 0.1, "open": true,"islandingpage":false},
		{"id":23, "text":"Mediate milestone", "start_date":"14-04-2018", type:gantt.config.types.milestone, "parent":"15", "progress": 0, "open": true,"islandingpage":false}
	],
	"links":[
		{"id":"10","source":"11","target":"12","type":"1"},
		{"id":"11","source":"11","target":"13","type":"1"},
		{"id":"12","source":"11","target":"14","type":"1"},
		{"id":"13","source":"11","target":"15","type":"1"},
		{"id":"14","source":"23","target":"16","type":"0"},
		{"id":"15","source":"13","target":"17","type":"1"},
		{"id":"16","source":"17","target":"18","type":"0"},
		{"id":"17","source":"18","target":"19","type":"0"},
		{"id":"18","source":"19","target":"20","type":"0"},
		{"id":"19","source":"15","target":"21","type":"2"},
		{"id":"20","source":"15","target":"22","type":"2"},
		{"id":"21","source":"15","target":"23","type":"0"}
	]
});
});

html, body{
  margin:0;
  padding:0;
  
}

#gantt_here{
  width: 100vw;  
  height: 100vh;
}


.fa {
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  opacity: 0.2;
  padding: 5px;
}

.fa:hover {
  opacity: 1;
}

.fa-pencil {
  color: #ffa011;
}

.fa-plus {
  color: #328EA0;
}

.fa-times {
  color: red;
}