{"id":7322,"date":"2020-06-11T12:04:24","date_gmt":"2020-06-11T09:04:24","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=7322"},"modified":"2025-07-31T16:37:59","modified_gmt":"2025-07-31T13:37:59","slug":"how-to-edit-javascript-gantt-data-on-the-fly","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/how-to-edit-javascript-gantt-data-on-the-fly\/","title":{"rendered":"How to set up inline editors and edit JavaScript Gantt data on the fly"},"content":{"rendered":"<p>An essential feature of Gantt charts is the ability to edit projects&#8217; data quickly. In this video tutorial, we&#8217;re going to share tips on how to set up inline editing and enable end-users to create and change Gantt tasks right from the UI.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/0rIPrC0GtME\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>There are two ways of how end-users can edit Gantt data:<\/p>\n<ul>\n<li>using the Lightbox edit form;<\/li>\n<li>via inline editors in the Grid area.<\/li>\n<\/ul>\n<p>Inline editors give users a great advantage over the lightbox form speeding up the process of editing tasks and interacting with our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">HTML Gantt<\/a> chart. Thus, all changes into Gantt data like creating or updating tasks, connecting them, and defining task dates and duration, can be made right through the grid via built-in editors.<\/p>\n<h5>Built-in editors for editing Gantt data from the UI<\/h5>\n<p>Let&#8217;s dive deeper into the settings of DHTMLX <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__inline_editing.html\" rel=\"noopener\" target=\"_blank\">Gantt inline editors<\/a>.<\/p>\n<p>You can make Gantt column editable by adding the <strong>editor<\/strong> property to it:<\/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> textEditor <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span>type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">,<\/span> map_to<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;text&quot;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">var<\/span> dateEditor <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span>type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span> map_to<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;start_date&quot;<\/span><span class=\"sy0\">,<\/span> min<span class=\"sy0\">:<\/span> <span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">2020<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> max<span class=\"sy0\">:<\/span> <span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">2021<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">var<\/span> durationEditor <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span>type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;number&quot;<\/span><span class=\"sy0\">,<\/span> map_to<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;duration&quot;<\/span><span class=\"sy0\">,<\/span> min<span class=\"sy0\">:<\/span><span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span> max<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\ngantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">columns<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&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=\"sy0\">,<\/span> editor<span class=\"sy0\">:<\/span> textEditor<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&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=\"sy0\">,<\/span> editor<span class=\"sy0\">:<\/span> dateEditor<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&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=\"sy0\">,<\/span> editor<span class=\"sy0\">:<\/span> durationEditor<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp;<span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;add&quot;<\/span><span class=\"sy0\">,<\/span> width<span class=\"sy0\">:<\/span> <span class=\"nu0\">44<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>The editor object should have the <strong>type<\/strong> property that should match one of the defined types of editors and the <strong>map_to<\/strong> property that binds the editor to the property of the task object.<\/p>\n<p>The rest of the settings are specific to certain types of editors. For example, you can specify minimum and maximum values for the number and date editors.<\/p>\n<p>You can also define a new type of editor by adding a specially formatted object into the Gantt config. The public <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__inline_editors_ext.html\" rel=\"noopener\" target=\"_blank\">API of editors<\/a> is quite extensive, providing methods and events to control every aspect of their work.<\/p>\n<h5>How to create a custom inline editor<\/h5>\n<p>Let&#8217;s say you need to specify the colors of Gantt tasks. There is no built-in color picker in the grid of Gantt for changing tasks&#8217; colors, so let&#8217;s set up a custom inline editor on our own.<\/p>\n<p>To do so, firstly, we need to add an extra column to the grid of Gantt and place a color picker inside. We can take a simple HTML5 color input for a start.<\/p>\n<p>Let&#8217;s copy the code example <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__inline_editing.html#custominlineeditor\" rel=\"noopener\" target=\"_blank\">from the documentation<\/a> and use it as a template:<\/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\">editor_types<\/span>.<span class=\"me1\">color<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; show<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> config<span class=\"sy0\">,<\/span> placeholder<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">var<\/span> html <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;&lt;div&gt;&lt;input type='color' name='&quot;<\/span> <span class=\"sy0\">+<\/span> column.<span class=\"me1\">name<\/span> <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;'&gt;&lt;\/div&gt;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; placeholder.<span class=\"me1\">innerHTML<\/span> <span class=\"sy0\">=<\/span> html<span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; hide<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; set_value<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> node<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">this<\/span>.<span class=\"me1\">get_input<\/span><span class=\"br0\">&#40;<\/span>node<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">value<\/span> <span class=\"sy0\">=<\/span> value<span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; get_value<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> node<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">get_input<\/span><span class=\"br0\">&#40;<\/span>node<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">value<\/span> <span class=\"sy0\">||<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; is_changed<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> node<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> input <span class=\"sy0\">=<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">get_input<\/span><span class=\"br0\">&#40;<\/span>node<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> input.<span class=\"me1\">value<\/span> <span class=\"sy0\">!==<\/span> value<span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; get_input<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\">return<\/span> node.<span class=\"me1\">querySelector<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;input&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; is_valid<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> node<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> input <span class=\"sy0\">=<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">get_input<\/span><span class=\"br0\">&#40;<\/span>node<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"sy0\">!!<\/span>input.<span class=\"me1\">value<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; focus<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> input <span class=\"sy0\">=<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">get_input<\/span><span class=\"br0\">&#40;<\/span>node<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; input.<span class=\"me1\">focus<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Make sure to rename the control and change the <strong>show<\/strong> function to create a color input. <\/p>\n<p>We won&#8217;t need the <strong>hide<\/strong> method since our input doesn&#8217;t need any destructor or post-processing after it&#8217;s hidden, so we can leave it empty.<\/p>\n<p>The next two important methods are <strong>set_value<\/strong> and <strong>get_value<\/strong>. The former is called when the editor is opened to populate it with the value from the task. And the latter is called when the user saves the editor; the return value will be applied to the task object.<\/p>\n<p>The next step is the <strong>is_changed<\/strong> function. Since editors can be opened and closed easily, we only want to trigger data change when the user has modified the editor value. Inside this method, we&#8217;ll need to compare the initial value provided to the editor with the current one and return <strong>boolean true<\/strong> if values differ. Returning <strong>true<\/strong> will update the task with the new value, returning <strong>false<\/strong> will simply close the editor.<\/p>\n<p>The <strong>is_valid<\/strong> method works as it sounds, returning <strong>false<\/strong> will tell Gantt that the input value is not valid and should be discarded.<\/p>\n<p>The <strong>save<\/strong> method is needed for complex editors (such as predecessor selectors) that make multiple changes rather than modify a single property of a task. So let&#8217;s delete it.<\/p>\n<p>And finally, the <strong>focus<\/strong> method that should put a browser focus into our editor.<\/p>\n<p>Now we have a ready-to-use inline editor for selecting task colors.<\/p>\n<p>The next step is to add a new column to the grid config and attach the editor config to it. Note that the <strong>type<\/strong> property of the color editor must match the name we used for our editor above. The <strong>map_to<\/strong> value will define the property of the task object for the editor to write values to. We use the <strong>color<\/strong> property there since Gantt will automatically apply colors from this property:<\/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> textEditor <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span>type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">,<\/span> map_to<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;text&quot;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">var<\/span> dateEditor <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span>type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;date&quot;<\/span><span class=\"sy0\">,<\/span> map_to<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;start_date&quot;<\/span><span class=\"sy0\">,<\/span> min<span class=\"sy0\">:<\/span> <span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">2020<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span> max<span class=\"sy0\">:<\/span> <span class=\"kw1\">new<\/span> <span class=\"kw4\">Date<\/span><span class=\"br0\">&#40;<\/span><span class=\"nu0\">2021<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">var<\/span> durationEditor <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span>type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;number&quot;<\/span><span class=\"sy0\">,<\/span> map_to<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;duration&quot;<\/span><span class=\"sy0\">,<\/span> min<span class=\"sy0\">:<\/span><span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span> max<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">var<\/span> colorEditor <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span>type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;color&quot;<\/span><span class=\"sy0\">,<\/span> map_to<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;color&quot;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp;<br \/>\ngantt.<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=\"sy0\">,<\/span> editor<span class=\"sy0\">:<\/span> textEditor<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=\"sy0\">,<\/span> editor<span class=\"sy0\">:<\/span> dateEditor<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=\"sy0\">,<\/span> editor<span class=\"sy0\">:<\/span> durationEditor<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;color&quot;<\/span><span class=\"sy0\">,<\/span> align<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;Color&quot;<\/span><span class=\"sy0\">,<\/span> editor<span class=\"sy0\">:<\/span> colorEditor<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;add&quot;<\/span><span class=\"sy0\">,<\/span> width<span class=\"sy0\">:<\/span> <span class=\"nu0\">44<\/span><span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Now if we add some values to the data you should see it in action:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/Color-picker-in-DHTMLX-Gantt-1.png\" alt=\"Color picker in DHTMLX Gantt\" width=\"902\" height=\"166\" class=\"aligncenter size-full wp-image-7342\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/Color-picker-in-DHTMLX-Gantt-1.png 902w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/Color-picker-in-DHTMLX-Gantt-1-300x55.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/Color-picker-in-DHTMLX-Gantt-1-768x141.png 768w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/p>\n<p>As a final touch, we&#8217;ll properly display colors inside the color column. It&#8217;s done via a template the way we showed you in one of our previous <a href=\"https:\/\/www.youtube.com\/watch?v=IKFTQNOJExY&#038;feature=youtu.be\" rel=\"noopener\" target=\"_blank\">video tutorials<\/a>. We&#8217;ll define a template that will return a <strong>div<\/strong> element with a specified background color style:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"br0\">&#123;<\/span>name<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;color&quot;<\/span><span class=\"sy0\">,<\/span> align<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;center&quot;<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span><span class=\"st0\">&quot;Color&quot;<\/span><span class=\"sy0\">,<\/span> editor<span class=\"sy0\">:<\/span> colorEditor<span class=\"sy0\">,<\/span> template<span class=\"sy0\">:<\/span><br \/>\n&nbsp; &nbsp; <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; <span class=\"kw1\">return<\/span> <span class=\"st0\">&quot;&lt;div class='task-color-cell' style='background:&quot;<\/span> <span class=\"sy0\">+<\/span> task.<span class=\"me1\">color<\/span> <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;'&gt;&lt;\/div&gt;&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><\/div><\/div>\n<p>And apply some styles to display it correctly:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">.<span class=\"me1\">task<\/span><span class=\"sy0\">-<\/span>color<span class=\"sy0\">-<\/span>cell<span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; margin<span class=\"sy0\">:<\/span><span class=\"nu0\">10<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; width<span class=\"sy0\">:<\/span>20px<span class=\"sy0\">;<\/span><br \/>\n&nbsp; height<span class=\"sy0\">:<\/span>20px<span class=\"sy0\">;<\/span><br \/>\n&nbsp; border<span class=\"sy0\">:<\/span>1px solid #cecece<span class=\"sy0\">;<\/span><br \/>\n&nbsp; display<span class=\"sy0\">:<\/span>inline<span class=\"sy0\">-<\/span>block<span class=\"sy0\">;<\/span><br \/>\n&nbsp; border<span class=\"sy0\">-<\/span>radius<span class=\"sy0\">:<\/span>20px<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/HTML5-color-picker-in-DHTMLX-Gantt.png\" alt=\"HTML5 color picker in DHTMLX Gantt\" width=\"902\" height=\"166\" class=\"aligncenter size-full wp-image-7344\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/HTML5-color-picker-in-DHTMLX-Gantt.png 902w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/HTML5-color-picker-in-DHTMLX-Gantt-300x55.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/HTML5-color-picker-in-DHTMLX-Gantt-768x141.png 768w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><a href=\"https:\/\/plnkr.co\/edit\/JyWRJe0iEaRLwRZq?preview\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>How to create an inline editor with a third-party color picker<\/h5>\n<p>In case you want to use a proper color picker widget, the code won&#8217;t differ a lot. We can integrate a third-party color picker such as a jquery plugin named <a href=\"https:\/\/plugins.jquery.com\/spectrum\/\" rel=\"noopener\" target=\"_blank\">Spectrum<\/a>.<\/p>\n<p>The first step is to add the files of the Spectrum library to our sample.<\/p>\n<p>After that, update our control. We&#8217;ll define a variable where we&#8217;ll store a reference to our editor instance. We&#8217;ll need it to call a destructor when the input is hidden:<\/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> editor<span class=\"sy0\">;<\/span><br \/>\ngantt.<span class=\"me1\">config<\/span>.<span class=\"me1\">editor_types<\/span>.<span class=\"me1\">color<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; show<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> config<span class=\"sy0\">,<\/span> placeholder<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">var<\/span> html <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;&lt;div&gt;&lt;input type='color' name='&quot;<\/span> <span class=\"sy0\">+<\/span> column.<span class=\"me1\">name<\/span> <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;'&gt;&lt;\/div&gt;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; placeholder.<span class=\"me1\">innerHTML<\/span> <span class=\"sy0\">=<\/span> HTML<span class=\"sy0\">;<\/span><br \/>\n<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; editor <span class=\"sy0\">=<\/span> $<span class=\"br0\">&#40;<\/span>placeholder<span class=\"br0\">&#41;<\/span>.<span class=\"me1\">find<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;input&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">spectrum<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; change<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; &nbsp; &nbsp; &nbsp; &nbsp; gantt.<span class=\"me1\">ext<\/span>.<span class=\"me1\">inlineEditors<\/span>.<span class=\"me1\">save<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/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; editor.<span class=\"me1\">spectrum<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;show&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; hide<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\">if<\/span><span class=\"br0\">&#40;<\/span>editor<span class=\"br0\">&#41;<\/span><span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; editor.<span class=\"me1\">spectrum<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;destroy&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; editor <span class=\"sy0\">=<\/span> <span class=\"kw2\">null<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; set_value<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> node<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; editor.<span class=\"me1\">spectrum<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;set&quot;<\/span><span class=\"sy0\">,<\/span> value<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; get_value<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> node<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> editor.<span class=\"me1\">spectrum<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;get&quot;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">toHexString<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; is_changed<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> node<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> newValue <span class=\"sy0\">=<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">get_value<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> node<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> newValue <span class=\"sy0\">!==<\/span> value<span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; is_valid<span class=\"sy0\">:<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>value<span class=\"sy0\">,<\/span> id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> node<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> newValue <span class=\"sy0\">=<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">get_value<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> column<span class=\"sy0\">,<\/span> node<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> <span class=\"sy0\">!!<\/span>newValue<span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; focus<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; editor.<span class=\"me1\">spectrum<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;show&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>First, we need to modify our <strong>show<\/strong> method. When it&#8217;s called we need to initialize and display the color picker widget. Note that in our example we call the <strong>show<\/strong> method from a timeout. It&#8217;s needed to ensure that we&#8217;ll attempt to display it after all HTML elements are inserted into the document.<\/p>\n<p>Next, we&#8217;ll need to define the <strong>hide<\/strong> method. We&#8217;ll call the destructor when the editor is closed.<\/p>\n<p>The rest of the methods are relatively intuitive and don&#8217;t differ too much from our original implementation. We need to modify the way the value is obtained from the control.<\/p>\n<p>After it&#8217;s done everything should work as expected.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/06\/DHTMLX-Gantt-with-built-in-color-picker.gif\" alt=\"DHTMLX Gantt with built-in color picker\" width=\"800\" height=\"296\" class=\"aligncenter size-full wp-image-7346\" \/><a href=\"https:\/\/plnkr.co\/edit\/tB8sECIYfsGs8bZZ?preview\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>Ready to try it out yourself? Download a<strong> <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/download.shtml\" rel=\"noopener\" target=\"_blank\">free Gantt trial version<\/a><\/strong> and follow our video tutorial!<\/p>\n<h5>Previous tutorials from the series:<\/h5>\n<ul>\n<li><a href=\"https:\/\/dhtmlx.com\/blog\/filter-tasks-javascript-gantt-dhtmlx-video-tutorial\/\" rel=\"noopener\" target=\"_blank\">How to filter tasks<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/blog\/sort-reorder-tasks-grid-javascript-gantt-dhtmlx-video-tutorial\/\" rel=\"noopener\" target=\"_blank\">How to reorder tasks<\/a><\/li>\n<li><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><\/li>\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<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/blog\/manage-columns-visibility-grid-dhtmlxgantt-video-tutorial\/\" rel=\"noopener\" target=\"_blank\">How to manage columns&#8217; visibility<\/a><\/li>\n<\/ul>\n<p>If you&#8217;re interested in any other topics for building your own Gantt chart, leave your thoughts in the comment section below and follow <a href=\"https:\/\/www.youtube.com\/user\/dhtmlx\" rel=\"noopener\" target=\"_blank\">DHTMLX youtube channel<\/a> to stay tuned!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An essential feature of Gantt charts is the ability to edit projects&#8217; data quickly. In this video tutorial, we&#8217;re going to share tips on how to set up inline &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":7330,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,20,14],"class_list":["post-7322","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\/7322","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=7322"}],"version-history":[{"count":30,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7322\/revisions"}],"predecessor-version":[{"id":14246,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7322\/revisions\/14246"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/7330"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=7322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=7322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=7322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}