{"id":6649,"date":"2019-09-20T14:12:10","date_gmt":"2019-09-20T11:12:10","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6649"},"modified":"2026-09-24T18:21:58","modified_gmt":"2026-09-24T15:21:58","slug":"manage-columns-visibility-grid-dhtmlxgantt-video-tutorial","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/manage-columns-visibility-grid-dhtmlxgantt-video-tutorial\/","title":{"rendered":"How to Manage Columns Visibility in the Grid of dhtmlxGantt &#8211; Video Tutorial"},"content":{"rendered":"<p>Let&#8217;s keep on learning all the valuable possibilities of our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">JavaScript Gantt library<\/a> with the help of our video tutorials.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/rqYrqqoaI_U\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><br \/>\nIn the fourth video from our series, we&#8217;ll dive into managing the columns visibility in the grid of dhtmlxGantt. The challenge you can face is that users may want to show all the possible info in the grid, to the point that the grid may take up all the available space:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/09\/JS-Gantt-Columns.jpg\" alt=\"JS Gantt Columns\" width=\"900\" height=\"500\" class=\"aligncenter size-full wp-image-6650\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/09\/JS-Gantt-Columns.jpg 900w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/09\/JS-Gantt-Columns-300x167.jpg 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/09\/JS-Gantt-Columns-768x427.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/>There are two possible solutions for that. We can either add a horizontal scrollbar into the grid and make it thinner, or allow a user to select which columns are going to be visible.<\/p>\n<h5>Horizontal Scroll<\/h5>\n<p>Let&#8217;s start with the first approach. We can make our grid scrollable using the <strong><a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__specifying_columns.html#horizontalscrollbar\" rel=\"noopener\" target=\"_blank\">scrollable<\/a><\/strong> property of the layout configuration option:<\/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\">layout<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; css<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;gantt_container&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; cols<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; width<span class=\"sy0\">:<\/span><span class=\"nu0\">400<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; min_width<span class=\"sy0\">:<\/span> <span class=\"nu0\">300<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; rows<span class=\"sy0\">:<\/span><span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>view<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;grid&quot;<\/span><span class=\"sy0\">,<\/span> scrollX<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;gridScroll&quot;<\/span><span class=\"sy0\">,<\/span> scrollable<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span> scrollY<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;scrollVer&quot;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>view<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;scrollbar&quot;<\/span><span class=\"sy0\">,<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;gridScroll&quot;<\/span><span class=\"sy0\">,<\/span> group<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;horizontal&quot;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#93;<\/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>resizer<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span> width<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><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; rows<span class=\"sy0\">:<\/span><span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>view<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;timeline&quot;<\/span><span class=\"sy0\">,<\/span> scrollX<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;scrollHor&quot;<\/span><span class=\"sy0\">,<\/span> scrollY<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;scrollVer&quot;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span>view<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;scrollbar&quot;<\/span><span class=\"sy0\">,<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;scrollHor&quot;<\/span><span class=\"sy0\">,<\/span> group<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;horizontal&quot;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#93;<\/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>view<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;scrollbar&quot;<\/span><span class=\"sy0\">,<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;scrollVer&quot;<\/span><span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#93;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/plnkr.co\/edit\/hQvYgbqGD69G0dd1?preview\" rel=\"noopener\" target=\"_blank\">Check the source code ><\/a><\/p>\n<p>We split the Gantt layout into several columns:<\/p>\n<ul>\n<li>The grid<\/li>\n<li>The timeline<\/li>\n<li>The resizer element between the grid and the timeline<\/li>\n<li>And the vertical scrollbar<\/li>\n<\/ul>\n<p>In order to add an inner scrollbar into the grid element, add the <strong>scrollable<\/strong> property to the grid object and connect it to the horizontal scrollbar located in the same column. After that we can scroll the grid using the scrollbar element.<\/p>\n<p>We also need a horizontal scrollbar for the timeline element, which is added in the same way.<\/p>\n<p>Lastly, we connect both the grid and the timeline to the same vertical scrollbar element in order to synchronize their vertical position.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/09\/Horizontal-Scrollbar.gif\" alt=\"Horizontal Scrollbar in Gantt\" width=\"900\" height=\"824\" class=\"aligncenter size-full wp-image-6671\" \/><a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__specifying_columns.html#horizontalscrollbar\" rel=\"noopener\" target=\"_blank\">Check the documentation ><\/a><\/p>\n<h5>Hiding Columns in the Grid<\/h5>\n<p>Another approach to our original challenge is to provide a user with an ability to select which columns should be visible:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/09\/Visible-columns.gif\" alt=\"Visible columns of the Grid in Gantt\" width=\"900\" height=\"509\" class=\"aligncenter size-full wp-image-6655\" \/><\/p>\n<p>To do so, add a UI element where a user will be able to specify the visible columns and change the configuration of the grid after the user&#8217;s selection. You can hide any column either by removing it from the columns config or by setting the <strong><a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__specifying_columns.html#visibility\" rel=\"noopener\" target=\"_blank\">hide:true<\/a><\/strong> property. <\/p>\n<p>Given that we already know how to <a href=\"https:\/\/dhtmlx.com\/blog\/add-custom-elements-grid-javascript-gantt-dhtmlx-gantt-video-tutorial\/\" rel=\"noopener\" target=\"_blank\">add a UI control<\/a> where a user can select columns as well as add a dropdown menu to the Gantt header &#8211; all we need is to add inputs for each defined column. When the selection changes, we prepare an array of selected columns:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">function<\/span> createColumnsConfig<span class=\"br0\">&#40;<\/span>selectedColumns<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> newColumns <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; allColumns.<span class=\"me1\">forEach<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>column<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span><span class=\"br0\">&#40;<\/span>selectedColumns<span class=\"br0\">&#91;<\/span>column.<span class=\"me1\">name<\/span><span class=\"br0\">&#93;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; newColumns.<span class=\"me1\">push<\/span><span class=\"br0\">&#40;<\/span>column<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; newColumns.<span class=\"me1\">push<\/span><span class=\"br0\">&#40;<\/span>controlsColumn<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> newColumns<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Assign it to the columns config and repaint the Gantt:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">dropDown.<span class=\"me1\">onchange<\/span> <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> selection <span class=\"sy0\">=<\/span> getColumnsSelection<span class=\"br0\">&#40;<\/span>dropDown<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">columns<\/span> <span class=\"sy0\">=<\/span> createColumnsConfig<span class=\"br0\">&#40;<\/span>selection<span class=\"br0\">&#41;<\/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><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p><a href=\"https:\/\/plnkr.co\/edit\/wpHiQYWumlWT7iwF?preview\" rel=\"noopener\" target=\"_blank\">Check the source code ><\/a><\/p>\n<p>Ready to try it out on your own Gantt? Download our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day trial version<\/a> and get down to experimenting with the visibility of columns in the grid of dhtmlxGantt.<\/p>\n<p>We also invite you to <a href=\"https:\/\/www.youtube.com\/c\/dhtmlxui\" rel=\"noopener\" target=\"_blank\">subscribe to our YouTube channel<\/a> and keep an eye on the latest video tutorials!<\/p>\n<h5>Related Materials:<\/h5>\n<ul>\n<li><a href=\"https:\/\/dhtmlx.com\/blog\/dhtmlxgantt-video-tutorial-specify-columns-grid\/\" rel=\"noopener\" target=\"_blank\">Specifying Columns in the Grid of dhtmlxGantt<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/blog\/add-custom-elements-grid-javascript-gantt-dhtmlx-gantt-video-tutorial\/\" rel=\"noopener\" target=\"_blank\">Custom Elements in the Grid of dhtmlxGantt<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/blog\/filter-tasks-javascript-gantt-dhtmlx-video-tutorial\/\" rel=\"noopener\" target=\"_blank\">Filtering Tasks in dhtmlxGantt<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s keep on learning all the valuable possibilities of our JavaScript Gantt library with the help of our video tutorials. In the fourth video from our series, we&#8217;ll dive &#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-6649","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\/6649","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=6649"}],"version-history":[{"count":3,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6649\/revisions"}],"predecessor-version":[{"id":8939,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6649\/revisions\/8939"}],"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=6649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=6649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=6649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}