{"id":6175,"date":"2019-05-25T11:05:29","date_gmt":"2019-05-25T08:05:29","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6175"},"modified":"2026-09-24T18:22:28","modified_gmt":"2026-09-24T15:22:28","slug":"add-custom-elements-grid-javascript-gantt-dhtmlx-gantt-video-tutorial","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/add-custom-elements-grid-javascript-gantt-dhtmlx-gantt-video-tutorial\/","title":{"rendered":"How to Add Custom Elements into the Grid of JavaScript Gantt &#8211; DHTMLX Gantt Video Tutorial"},"content":{"rendered":"<p>Here is a second video from a series of tutorials devoted to the configuration of the grid in dhtmlxGantt. In this video, we&#8217;ll discuss how all kinds of buttons, icons, and dropdown menus can be added into the grid cells and headers of a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">JavaScript Gantt chart<\/a>:<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/IKFTQNOJExY\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Let&#8217;s say we need to create a column with custom buttons for performing user actions:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/05\/Custom-buttons-in-Gantt.png\" alt=\"Custom buttons in Gantt\" width=\"900\" height=\"192\" class=\"aligncenter size-full wp-image-6177\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/05\/Custom-buttons-in-Gantt.png 900w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/05\/Custom-buttons-in-Gantt-300x64.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/05\/Custom-buttons-in-Gantt-768x164.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<p>We can add buttons using the following template and &#8220;Font Awesome&#8221; icons, for instance:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">gantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">columns<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">,<\/span> tree<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span> width<span class=\"sy0\">:<\/span> <span class=\"st0\">'*'<\/span><span class=\"sy0\">,<\/span> resize<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;start_date&quot;<\/span><span class=\"sy0\">,<\/span> align<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><span class=\"sy0\">,<\/span> resize<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;duration&quot;<\/span><span class=\"sy0\">,<\/span> align<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;buttons&quot;<\/span><span class=\"sy0\">,<\/span>label<span class=\"sy0\">:<\/span> colHeader<span class=\"sy0\">,<\/span>width<span class=\"sy0\">:<\/span> <span class=\"nu0\">75<\/span><span class=\"sy0\">,<\/span>template<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>task<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"br0\">&#40;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&lt;i class=&quot;fa fa-pencil&quot; data-action=&quot;edit&quot;&gt;&lt;\/i&gt;'<\/span> <span class=\"sy0\">+<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&lt;i class=&quot;fa fa-plus&quot; data-action=&quot;add&quot;&gt;&lt;\/i&gt;'<\/span> <span class=\"sy0\">+<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&lt;i class=&quot;fa fa-times&quot; data-action=&quot;delete&quot;&gt;&lt;\/i&gt;'<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/plnkr.co\/edit\/aLhBlyqH1lchZIzv\" rel=\"noopener\" target=\"_blank\">Check a live example ><\/a><\/p>\n<p>Since buttons will be repainted together with the rest of the row, we can&#8217;t just use something like &#8216;addEventListener&#8217; or jquery click handler to add an event listener to each button. Instead, we can either add a handler using an inline onclick attribute or use an approach called <strong>event delegation<\/strong> &#8211; add a single event listener to a parent element that won&#8217;t be affected by the repaints and capture a click there. Luckily, Gantt provides a public click event that will fire each time a user clicks an element related to the task.<br \/>\nWe can capture user clicks there:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">gantt.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onTaskClick&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> e<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">var<\/span> button <span class=\"sy0\">=<\/span> e.<span class=\"me1\">target<\/span>.<span class=\"me1\">closest<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;[data-action]&quot;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span><span class=\"br0\">&#40;<\/span>button<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">var<\/span> action <span class=\"sy0\">=<\/span> button.<span class=\"me1\">getAttribute<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;data-action&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">switch<\/span> <span class=\"br0\">&#40;<\/span>action<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;edit&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gantt.<span class=\"me1\">showLightbox<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;add&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gantt.<span class=\"me1\">createTask<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw2\">null<\/span><span class=\"sy0\">,<\/span> id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;delete&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gantt.<span class=\"me1\">confirm<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title<span class=\"sy0\">:<\/span> gantt.<span class=\"me1\">locale<\/span>.<span class=\"me1\">labels<\/span>.<span class=\"me1\">confirm_deleting_title<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> gantt.<span class=\"me1\">locale<\/span>.<span class=\"me1\">labels<\/span>.<span class=\"me1\">confirm_deleting<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; callback<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>res<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>res<span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gantt.<span class=\"me1\">deleteTask<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>In the handler, we check whether a clicked element is one of our buttons, and if so &#8211; figure out what action should be done and then do it.<\/p>\n<p>As for the column header, we can put its HTML into the label property of the column and add the inline onclick handler there:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">var<\/span> colHeader <span class=\"sy0\">=<\/span> <span class=\"st0\">'&lt;div class=&quot;gantt_grid_head_cell gantt_grid_head_add&quot; onclick=&quot;gantt.createTask()&quot;&gt;&lt;\/div&gt;'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">columns<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">,<\/span> tree<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span> width<span class=\"sy0\">:<\/span> <span class=\"st0\">'*'<\/span><span class=\"sy0\">,<\/span> resize<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;start_date&quot;<\/span><span class=\"sy0\">,<\/span> align<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><span class=\"sy0\">,<\/span> resize<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;duration&quot;<\/span><span class=\"sy0\">,<\/span> align<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;buttons&quot;<\/span><span class=\"sy0\">,<\/span>label<span class=\"sy0\">:<\/span> colHeader<span class=\"sy0\">,<\/span>width<span class=\"sy0\">:<\/span> <span class=\"nu0\">75<\/span><span class=\"sy0\">,<\/span>template<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>task<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"br0\">&#40;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&lt;i class=&quot;fa fa-pencil&quot; data-action=&quot;edit&quot;&gt;&lt;\/i&gt;'<\/span> <span class=\"sy0\">+<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&lt;i class=&quot;fa fa-plus&quot; data-action=&quot;add&quot;&gt;&lt;\/i&gt;'<\/span> <span class=\"sy0\">+<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&lt;i class=&quot;fa fa-times&quot; data-action=&quot;delete&quot;&gt;&lt;\/i&gt;'<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>The same approach can be used for more complex controls like adding a dropdown menu into the grid header:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/05\/Dropdown-menu-in-Gantt.png\" alt=\"Dropdown menu in JavaScript Gantt\" width=\"900\" height=\"192\" class=\"aligncenter size-full wp-image-6184\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/05\/Dropdown-menu-in-Gantt.png 900w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/05\/Dropdown-menu-in-Gantt-300x64.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/05\/Dropdown-menu-in-Gantt-768x164.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/p>\n<p>As you might have guessed, we will also add the required HTML into the column label. In that case, we will have an inline onclick argument, which would open a dropdown menu. Note that the handler has to be available from the global scope, so we define it in the gantt object:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">gantt.$showDropdown <span class=\"sy0\">=<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>node<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> position <span class=\"sy0\">=<\/span> node.<span class=\"me1\">getBoundingClientRect<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> dropDown <span class=\"sy0\">=<\/span> getDropdownNode<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; dropDown.<span class=\"me1\">style<\/span>.<span class=\"me1\">top<\/span> <span class=\"sy0\">=<\/span> position.<span class=\"me1\">bottom<\/span> <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;px&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; dropDown.<span class=\"me1\">style<\/span>.<span class=\"me1\">left<\/span> <span class=\"sy0\">=<\/span> position.<span class=\"me1\">left<\/span> <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;px&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; dropDown.<span class=\"me1\">style<\/span>.<span class=\"me1\">display<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;block&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; dropDown.<span class=\"me1\">keep<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; setTimeout<span class=\"br0\">&#40;<\/span><span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; dropDown.<span class=\"me1\">keep<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; gantt.$hideDropdown <span class=\"sy0\">=<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> dropDown <span class=\"sy0\">=<\/span> getDropdownNode<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; dropDown.<span class=\"me1\">style<\/span>.<span class=\"me1\">display<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;none&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; window.<span class=\"me1\">addEventListener<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;click&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>event<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span><span class=\"br0\">&#40;<\/span><span class=\"sy0\">!<\/span>event.<span class=\"me1\">target<\/span>.<span class=\"me1\">closest<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;#gantt_dropdown&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">&amp;&amp;<\/span> <span class=\"sy0\">!<\/span>getDropdownNode<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">keep<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; gantt.$hideDropdown<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<br \/>\n&nbsp; <span class=\"kw1\">var<\/span> colHeader <span class=\"sy0\">=<\/span> <span class=\"st0\">'&lt;div class=&quot;gantt_grid_head_cell gantt_grid_head_add&quot; onclick=&quot;gantt.createTask()&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;gantt-dropdown&quot; onclick=&quot;gantt.$showDropdown(this)&quot;&gt;&amp;#9660;&lt;\/div&gt;'<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; gantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">columns<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">,<\/span> tree<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span> width<span class=\"sy0\">:<\/span> <span class=\"st0\">'*'<\/span><span class=\"sy0\">,<\/span> resize<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;start_date&quot;<\/span><span class=\"sy0\">,<\/span> align<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><span class=\"sy0\">,<\/span> resize<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;duration&quot;<\/span><span class=\"sy0\">,<\/span> align<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;buttons&quot;<\/span><span class=\"sy0\">,<\/span>label<span class=\"sy0\">:<\/span> colHeader<span class=\"sy0\">,<\/span>width<span class=\"sy0\">:<\/span> <span class=\"nu0\">75<\/span><span class=\"sy0\">,<\/span>template<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>task<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"br0\">&#40;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&lt;i class=&quot;fa fa-pencil&quot; data-action=&quot;edit&quot;&gt;&lt;\/i&gt;'<\/span> <span class=\"sy0\">+<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&lt;i class=&quot;fa fa-plus&quot; data-action=&quot;add&quot;&gt;&lt;\/i&gt;'<\/span> <span class=\"sy0\">+<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&lt;i class=&quot;fa fa-times&quot; data-action=&quot;delete&quot;&gt;&lt;\/i&gt;'<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/plnkr.co\/edit\/kVOOdInqN68YRvLq?preview\" rel=\"noopener\" target=\"_blank\">Check a live example ><\/a><\/p>\n<p>That&#8217;s how you can easily add custom elements such as a button or an input into grid columns with the help of HTML.<\/p>\n<p>In order to try it all out yourself, try a free <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/download.shtml\" rel=\"noopener\" target=\"_blank\">trial version of our JavaScript Gantt<\/a> or the <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/open-source\/\" rel=\"noopener\" target=\"_blank\">Gantt Community Edition under the MIT license<\/a> and follow the steps from our <a href=\"https:\/\/www.youtube.com\/watch?v=IKFTQNOJExY&#038;feature=youtu.be\" rel=\"noopener\" target=\"_blank\">video tutorial<\/a>!<\/p>\n<p>We&#8217;ll be looking forward to your feedback and any ideas on what else you&#8217;d like to see in our videos. Meanwhile, check our <a href=\"https:\/\/www.youtube.com\/c\/dhtmlxui\" rel=\"noopener\" target=\"_blank\">YouTube channel<\/a> and subscribe to stay tuned!<\/p>\n<p>Check the first video in the series of tutorials about Grid configuration in Gantt:<\/p>\n<ul>\n<li><a href=\"https:\/\/dhtmlx.com\/blog\/dhtmlxgantt-video-tutorial-specify-columns-grid\/\" rel=\"noopener\" target=\"_blank\">How to Specify Columns of the Grid in Gantt<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Here is a second video from a series of tutorials devoted to the configuration of the grid in dhtmlxGantt. In this video, we&#8217;ll discuss how all kinds of buttons, &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":6150,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,20,14],"class_list":["post-6175","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-gantt","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101012"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=6175"}],"version-history":[{"count":6,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6175\/revisions"}],"predecessor-version":[{"id":15669,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6175\/revisions\/15669"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/6150"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=6175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=6175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=6175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}