{"id":12926,"date":"2024-09-10T11:11:59","date_gmt":"2024-09-10T08:11:59","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12926"},"modified":"2026-09-15T15:53:25","modified_gmt":"2026-09-15T12:53:25","slug":"integrating-dhtmlx-gantt-suites-toolbar-widget-convenient-project-management","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/integrating-dhtmlx-gantt-suites-toolbar-widget-convenient-project-management\/","title":{"rendered":"Integrating DHTMLX Gantt with Suite&#8217;s Toolbar Widget for Convenient Project Management"},"content":{"rendered":"<p>Hello everyone and welcome to a new tutorial of the series dedicated to customizing our top products with additional functionalities. This time, we want to share with you a way to simplify the interaction with a DHTMLX-based Gantt chart by integrating it with a toolbar. For this purpose, we\u2019ll use the Suite\u2019s <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxToolbar\/\" rel=\"noopener\" target=\"_blank\">Toolbar widget<\/a>, which is smoothly combined with <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt<\/a>.<\/p>\n<h5>Example of Using a Toolbar in a Gantt Chart<\/h5>\n<p>A full-featured Gantt chart is a complex and time-proven instrument used for managing workflows in projects of any complexity. However, it often takes time to master its functional versatility and make the most of it in real projects. Therefore, it can be reasonable to complement a Gantt chart with auxiliary controls like a toolbar that facilitates its usage. In the example below, you can see a JavaScript Gantt chart built based on DHTMLX with a toolbar implemented with the UI widget from our Suite library.<br \/>\n<iframe data-src=\"https:\/\/snippet.dhtmlx.com\/8tehx59v?mode=mobile\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe> <a href=\"https:\/\/snippet.dhtmlx.com\/8tehx59v?text=gantt&#038;mode=wide rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>The toolbar allows end-users to conveniently perform a wide range of operations in the Gantt chart such as:<\/p>\n<ul>\n<li>undo\/redo changes<\/li>\n<li>collapse and expand all tasks at once<\/li>\n<li>highlight critical tasks<\/li>\n<li>search (filter) tasks<\/li>\n<li>set the displayed date range<\/li>\n<li>export data to PDF, PNG, Excel, MSP, and Primavera formats.<\/li>\n<\/ul>\n<p>Now we can proceed to the technical aspects of adding a toolbar in a JavaScript Gantt.<\/p>\n<h6>Step 1: Defining the Toolbar Menu<\/h6>\n<p>Let us start with defining the appearance of the toolbar menu (i.e. toolbar icons) using the <strong>toolbarItems<\/strong> variable. In the <strong>icon<\/strong> field, you specify the class name for the icons. The icons are taken from the web font enabled in the HTML tab (material design icons). <\/p>\n<p>First, here is a CSS part:<\/p>\n<div class=\"codecolorer-container css default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"css codecolorer\">&lt;<span class=\"kw5\">link<\/span> href<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/MaterialDesign-Webfont\/4.4.95\/css\/materialdesignicons.css?v=6.4.2&quot;<\/span> media<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;all&quot;<\/span> rel<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;stylesheet&quot;<\/span> type<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/css&quot;<\/span><span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>Now, we can proceed with the JavaScript code:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> toolbarItems <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; icon<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;mdi mdi-undo-variant&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;undo&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; icon<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;mdi mdi-redo-variant&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;redo&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; icon<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;mdi mdi-folder&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;close&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><\/div><\/div>\n<p>You can specify the type of toolbar elements (e.g, input, datepicker, etc.). Otherwise, the default element type will be used.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;search&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;input&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; placeholder<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Search tasks&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; icon<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;mdi mdi-magnify&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; width<span class=\"sy0\">:<\/span> <span class=\"nu0\">150<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;datePicker&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; value<span class=\"sy0\">:<\/span> <span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">2025<\/span><span class=\"sy0\">,<\/span> 03<span class=\"sy0\">,<\/span> 01<span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; label<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Start:&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; width<span class=\"sy0\">:<\/span> <span class=\"nu0\">150<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;start_date&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; editable<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; mark<span class=\"sy0\">:<\/span> <span class=\"br0\">&#40;<\/span>date<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>date.<span class=\"me1\">getDay<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"sy0\">===<\/span> <span class=\"nu0\">5<\/span><span class=\"br0\">&#41;<\/span> <span class=\"kw1\">return<\/span> <span class=\"st0\">&quot;highlight-date&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><\/div><\/div>\n<p>In the <strong>items<\/strong> parameter of the array, you specify child elements for the drop-down list.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; value<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Export&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;export&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; items<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Export To PDF&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;pdf&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Export To PNG&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;png&quot;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><\/div><\/div>\n<h6>Step 2: Creating and Initializing Toolbar<\/h6>\n<p>The next step is to create a new instance of the Toolbar and initialize it in a container with the <strong>toolbar_container<\/strong> ID. Then, you load the data with the toolbar items.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> toolbar <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Toolbar<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;toolbar_container&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> css<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;dhx_toolbar--bordered&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\ntoolbar.<span class=\"me1\">data<\/span>.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>toolbarItems<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<h6>Step 3: Adding Handlers for Click Events<\/h6>\n<p>After that, you need to specify event handlers that will fire when buttons are clicked\/text is entered\/date is selected.<\/p>\n<p>Let us start with click events.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">toolbar.<span class=\"me1\">events<\/span>.<span class=\"me1\">on<\/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>id<span class=\"sy0\">,<\/span> e<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">switch<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><\/div><\/div>\n<p>For the expand button, you iterate through each task using the <strong>eachTask()<\/strong> method and call the <strong>open()<\/strong> method to open the task. All of this is done inside the <strong>batchUpdate()<\/strong> method so that the changes are rendered only once.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;open&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">batchUpdate<\/span><span class=\"br0\">&#40;<\/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; gantt.<span class=\"me1\">eachTask<\/span><span class=\"br0\">&#40;<\/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; task.$open <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>For the collapse button, you do the same but using the <strong>close()<\/strong> method.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;close&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">batchUpdate<\/span><span class=\"br0\">&#40;<\/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; gantt.<span class=\"me1\">eachTask<\/span><span class=\"br0\">&#40;<\/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; task.$open <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>For undo and redo buttons, you use <strong>undo()<\/strong> and <strong>redo()<\/strong> methods correspondingly.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;undo&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">undo<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;redo&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">redo<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>The element with the <strong>critical<\/strong> ID enables and disables the <strong>highlight_critical_path<\/strong> config to add or remove the highlighting of critical tasks.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;critical&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">highlight_critical_path<\/span> <span class=\"sy0\">=<\/span> <span class=\"sy0\">!<\/span>gantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">highlight_critical_path<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">render<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Then, come the exporting options. For export to the Excel format, you should use the <strong>visual<\/strong> parameter to add a Gantt-like timeline to the exported file.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;pdf&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">exportToPDF<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;png&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">exportToPNG<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;excel&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">exportToExcel<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; visual<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;msp&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">exportToMSProject<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">case<\/span> <span class=\"st0\">&quot;p6&quot;<\/span><span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">exportToPrimaveraP6<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">break<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<h6>Step 4: Adding Event Handlers to Input Elements<\/h6>\n<p>Next, you need to add event handlers for input elements. If it is a search field, you change the value of the <strong>filterValue<\/strong> variable to a new one and call <strong>refreshData<\/strong> to render the changes.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">toolbar.<span class=\"me1\">events<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;input&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> value<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>id <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;search&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; filterValue <span class=\"sy0\">=<\/span> value<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; gantt.<span class=\"me1\">refreshData<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><\/div><\/div>\n<h6>Step 5: Filtering Tasks<\/h6>\n<p>Tasks are filtered inside the <strong>onBeforeTaskDisplay<\/strong> event handler. If it returns false, the task won\u2019t be displayed. There, you convert the task name to lowercase and see if the task name contains a value from <strong>filterValue<\/strong> (also converted to lowercase).<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">let filterValue <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\ngantt.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onBeforeTaskDisplay&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> task<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>filterValue <span class=\"sy0\">&amp;&amp;<\/span> task.<span class=\"me1\">text<\/span>.<span class=\"me1\">toLowerCase<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">indexOf<\/span><span class=\"br0\">&#40;<\/span>filterValue<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">==<\/span> <span class=\"sy0\">-<\/span><span class=\"nu0\">1<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<h6>Step 6: Updating Date Range<\/h6>\n<p>If there is another event in the input handler, it means that the displayed date range of the task should be updated.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">toolbar.<span class=\"me1\">events<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;input&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> value<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>id <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;search&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; filterValue <span class=\"sy0\">=<\/span> value<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; gantt.<span class=\"me1\">refreshData<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; updateDateRange<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>In the <strong>updateDateRange<\/strong> function, you specify HTML elements with dates.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">function<\/span> updateDateRange<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">const<\/span> startDateEl <span class=\"sy0\">=<\/span> document.<span class=\"me1\">querySelector<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;#start_date&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">const<\/span> endDateEl <span class=\"sy0\">=<\/span> document.<span class=\"me1\">querySelector<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;#end_date&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>After that, you convert the values from string to date.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> startDate <span class=\"sy0\">=<\/span> gantt.<span class=\"me1\">date<\/span>.<span class=\"me1\">str_to_date<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;%d\/%m\/%y&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#40;<\/span>startDateEl.<span class=\"me1\">value<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">const<\/span> endDate <span class=\"sy0\">=<\/span> gantt.<span class=\"me1\">date<\/span>.<span class=\"me1\">str_to_date<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;%d\/%m\/%y&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#40;<\/span>endDateEl.<span class=\"me1\">value<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Then, you specify dates for <strong>gantt.config.start_date<\/strong> and <strong>gantt.config.end_date<\/strong> parameters. Now, you use the <strong>render()<\/strong> method to render the changes.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">gantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">start_date<\/span> <span class=\"sy0\">=<\/span> startDate<span class=\"sy0\">;<\/span><br \/>\ngantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">end_date<\/span> <span class=\"sy0\">=<\/span> endDate<span class=\"sy0\">;<\/span><br \/>\ngantt.<span class=\"me1\">render<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><\/div><\/div>\n<p>The <strong>inputBlur<\/strong> event is triggered when the element loses focus. Check the ID value, and if there is the <strong>start_date<\/strong> or <strong>end_date<\/strong> parameter, then call the <strong>updateDateRange<\/strong> function. It must be done after some period of time, because if you do it right away, the HTML elements will still have the old value.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">toolbar.<span class=\"me1\">events<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;inputBlur&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>id <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;start_date&quot;<\/span> <span class=\"sy0\">||<\/span> id <span class=\"sy0\">==<\/span> <span class=\"st0\">&quot;end_date&quot;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &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; &nbsp; &nbsp; &nbsp; updateDateRange<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">200<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<h6>Step 7: Putting Everything Together<\/h6>\n<p>After completing all these configuration steps, you enable all plugins (extensions).<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">gantt.<span class=\"me1\">plugins<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; undo<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; critical_path<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; export_api<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><\/div><\/div>\n<p>The trickiest part of this tutorial is over. Now you need to <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__general_gantt_chart.html\" rel=\"noopener\" target=\"_blank\">initialize<\/a> your Gantt chart and <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__loading_storing_data.html\" rel=\"noopener\" target=\"_blank\">load tasks<\/a> using corresponding guides from our documentation.<\/p>\n<p>The final result of your efforts should look similar to this <a href=\"https:\/\/snippet.dhtmlx.com\/8tehx59v?mode=wide\" rel=\"noopener\" target=\"_blank\">sample<\/a>. <\/p>\n<h5>Wrapping Up<\/h5>\n<p>As you can see from the final sample, the toolbar makes it much easier for end-users to interact with the Gantt chart. Using the Suite\u2019s Toolbar widget, you can integrate a handy toolbar with your JavaScript Gantt with minimum time and effort. The high customizability of DHTMLX libraries allows for the implementation of solutions that fully correspond to any project requirements. If you want to give it a try, download <a href=\"https:\/\/dhtmlx.com\/docs\/download\/\" rel=\"noopener\" target=\"_blank\">free 30-day trial versions<\/a> of our products and get down to business.<\/p>\n<h5>Related Materials<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__howtostart_guides.html\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/gantt\/demos\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt samples<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/blog\/tutorials\/?tag=gantt\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt tutorials<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/download.shtml\" rel=\"noopener\" target=\"_blank\">Free 30-day trial version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Hello everyone and welcome to a new tutorial of the series dedicated to customizing our top products with additional functionalities. This time, we want to share with you a &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":12929,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[33,20,10],"class_list":["post-12926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-all-posts","tag-gantt","tag-dhtmlxsuite"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12926","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\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=12926"}],"version-history":[{"count":9,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12926\/revisions"}],"predecessor-version":[{"id":15902,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12926\/revisions\/15902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/12929"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=12926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=12926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=12926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}