{"id":6956,"date":"2019-11-29T11:33:03","date_gmt":"2019-11-29T08:33:03","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6956"},"modified":"2026-09-24T18:25:02","modified_gmt":"2026-09-24T15:25:02","slug":"sort-reorder-tasks-grid-javascript-gantt-dhtmlx-video-tutorial","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/sort-reorder-tasks-grid-javascript-gantt-dhtmlx-video-tutorial\/","title":{"rendered":"How to Reorder Tasks in the Grid of JavaScript Gantt &#8211; DHTMLX Video Tutorial"},"content":{"rendered":"<p>While managing projects, users may face the need to change the order of tasks or move tasks between several Gantt projects. Today we&#8217;ll get acquainted with the ways of implementing this functionality in DHTMLX Gantt.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/srtb3nYOb-E\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Our HTML5 Gantt provides two alternative ways of reordering tasks in the grid:<\/p>\n<ul>\n<li>Via drag-and-drop<\/li>\n<li>Via sorting<\/li>\n<\/ul>\n<p>By default, both modes are disabled.<\/p>\n<p>In order to enable the reordering of tasks by drag-n-drop, we need to set the <strong>order_branch<\/strong> option to &#8216;true&#8217;:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ ordering tasks only inside a branch<\/span><br \/>\ngantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">order_branch<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\ngantt.<span class=\"me1\">init<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;gantt_here&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>The <strong>order_branch<\/strong> property activates the &#8216;branch&#8217; mode that enables the reordering of tasks within the same nesting level.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Gantt_tasks.gif\" alt=\"JavaScript Gantt tasks reordering\" width=\"1462\" height=\"724\" class=\"aligncenter size-full wp-image-6959\" \/><a href=\"https:\/\/plnkr.co\/edit\/DlLttul6Jlj9jsyo?preview\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Changing of the task position involves firing of the <strong>onBeforeTaskMove<\/strong> or <strong>onAfterTaskMove<\/strong> events; the first can be used to control where the task can be moved. To prevent moving to another sub-branch, use the <strong>onBeforeTaskMove<\/strong> event:<\/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\">order_branch<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span><br \/>\ngantt.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onBeforeTaskMove&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> parent<span class=\"sy0\">,<\/span> tindex<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> task <span class=\"sy0\">=<\/span> gantt.<span class=\"me1\">getTask<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span><span class=\"br0\">&#40;<\/span>task.<span class=\"me1\">parent<\/span> <span class=\"sy0\">!=<\/span> parent<span class=\"br0\">&#41;<\/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=\"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><br \/>\ngantt.<span class=\"me1\">init<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;gantt_here&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Gantt_tasks2.gif\" alt=\"Tasks reordering in JS Gantt\" width=\"1462\" height=\"723\" class=\"aligncenter size-full wp-image-6961\" \/><a href=\"https:\/\/plnkr.co\/edit\/HbVqUZ2ZBDb7pWWV\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nIf your Gantt contains lots of tasks, the default mode of the branch reordering may slow down the performance. To speed it up, you can make use of the &#8216;marker&#8217; mode:<\/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\">order_branch<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;marker&quot;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>In this mode, only the name of the task is reordered (on holding the left mouse key), and Gantt is re-rendered only when a task is dropped in the target position (on releasing the key):<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Gantt_tasks3.gif\" alt=\"Modes of task reordering - JS Gantt by DHTMLX\" width=\"1462\" height=\"723\" class=\"aligncenter size-full wp-image-6963\" \/><a href=\"https:\/\/plnkr.co\/edit\/v4Y8ZSzGUob9e2Oc\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><br \/>\nUnlike the default mode, changing the task position doesn&#8217;t involve the firing of the <strong>onBeforeTaskMove<\/strong> or <strong>onAfterTaskMove<\/strong> events. To prevent dropping of a task in a particular position, we can use the <strong>onBeforeRowDragMove<\/strong> event instead. Note that it works only in the &#8216;marker&#8217; mode:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ ordering tasks only inside a branch<\/span><br \/>\ngantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">order_branch<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;marker&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\ngantt.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onBeforeRowDragMove&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> parent<span class=\"sy0\">,<\/span> tindex<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">var<\/span> task <span class=\"sy0\">=<\/span> gantt.<span class=\"me1\">getTask<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span><span class=\"br0\">&#40;<\/span>task.<span class=\"me1\">parent<\/span> <span class=\"sy0\">!=<\/span> parent<span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &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><br \/>\ngantt.<span class=\"me1\">init<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;gantt_here&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Hope our tutorial turned out to be useful for you! If you&#8217;d like to experiment with DHTMLX Gantt yourself, download a <strong><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day evaluation version<\/a><\/strong>. <\/p>\n<p>Catch up with the previous tutorials from the series:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/dhtmlx.com\/blog\/filter-tasks-javascript-gantt-dhtmlx-video-tutorial\/\" rel=\"noopener\" target=\"_blank\">How to Filter Tasks in a JavaScript Gantt<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/dhtmlx.com\/blog\/add-custom-elements-grid-javascript-gantt-dhtmlx-gantt-video-tutorial\/\" rel=\"noopener\" target=\"_blank\">How to Add Custom Buttons, Icons, Menu, and Other Elements<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/dhtmlx.com\/blog\/dhtmlxgantt-video-tutorial-specify-columns-grid\/\" rel=\"noopener\" target=\"_blank\">How to Specify Columns of the Grid<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/dhtmlx.com\/blog\/manage-columns-visibility-grid-dhtmlxgantt-video-tutorial\/\" rel=\"noopener\" target=\"_blank\">How to Manage Columns Visibility in the Grid<\/a><\/strong><\/li>\n<\/ul>\n<p>Subscribe to our YouTube channel to stay tuned: <strong><a href=\"https:\/\/www.youtube.com\/user\/dhtmlx\" rel=\"noopener\" target=\"_blank\">https:\/\/www.youtube.com\/user\/dhtmlx<\/a><br \/>\n<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>While managing projects, users may face the need to change the order of tasks or move tasks between several Gantt projects. Today we&#8217;ll get acquainted with the ways of &#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-6956","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\/6956","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=6956"}],"version-history":[{"count":2,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6956\/revisions"}],"predecessor-version":[{"id":8812,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6956\/revisions\/8812"}],"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=6956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=6956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=6956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}