{"id":5180,"date":"2018-07-05T15:24:33","date_gmt":"2018-07-05T11:24:33","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=5180"},"modified":"2023-05-05T12:47:49","modified_gmt":"2023-05-05T09:47:49","slug":"dhtmlxgantt-5-2","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlxgantt-5-2\/","title":{"rendered":"dhtmlxGantt 5.2: Enhanced UX with Inline Editing and Split Tasks"},"content":{"rendered":"

Our JavaScript gantt chart library<\/a> for project management rolls out its third update this year. <\/p>\n

Meet dhtmlxGantt 5.2 with a super user-friendly way for modifying your gantt chart’s content by means of inline editing and a brand-new task-management feature of task splitting as well as a number of other important updates and improvements!<\/p>\n

Download dhtmlxGantt 5.2 trial version for 30-day evaluation<\/a><\/strong><\/p>\n

Inline Editing<\/h5>\n

In prior versions of dhtmlxGantt changing task characteristics was available solely through the edit form (lightbox). End users had to click on each task to call the lightbox in order to describe tasks and set their time period together with start and end dates and then close the lightbox to check the changes in the gantt chart and open it up again if some more corrections were needed. <\/p>\n

From now on editing tasks couldn’t be any simpler with inline editing. You can create tasks from scratch and make any corrections in the existing tasks right in the grid area due to special built-in editors. Create a task, type in its name, choose the start time and how long it will take to fulfill the task, define its priority and connect the task with other tasks in your project – and observe how your gantt chart changes before your very eyes. <\/p>\n

\"gantt<\/p>\n

Inline editing is easily enabled via columns configuration. Version 5.2 includes 5 types of predefined editors: text, number, date, select and predecessor editors.<\/p>\n

var<\/span> textEditor =<\/span> {<\/span>type:<\/span> "text"<\/span>,<\/span> map_to:<\/span>"text"<\/span>}<\/span>;<\/span>
\n
\ngantt.config<\/span>.columns<\/span> =<\/span> [<\/span>
\n    {<\/span>name:<\/span> "text"<\/span>,<\/span> tree:<\/span> true,<\/span> width<\/span>:<\/span> 200<\/span>,<\/span> editor:<\/span> textEditor}<\/span>,<\/span>
\n    ...
\n]<\/span>;<\/span><\/div><\/div>\n

Additionally, you can create your own custom inline editor to make any other changes to tasks necessary for your project.<\/p>\n

For user convenience inline editing is available in two predefined modes:<\/p>\n

1) Simple click-and-edit mode<\/strong><\/p>\n

It’s a simple and effective solution for inline editing. Editors are opened by a mouse click on a grid cell.<\/p>\n

Keyboard shortcuts:
\nEnter<\/strong> – to save the editor
\nEsc<\/strong> – to close without saving
\nTab\/Shift-Tab<\/strong> – to start editing the next\/previous cell<\/p>\n

Check the sample ><\/a><\/p>\n

2) Inline editing in conjunction with keyboard navigation<\/strong><\/p>\n

This is where new inline editing truly shines!<\/p>\n

\"ganttTry it out in inline editing with keyboard navigation sample ><\/a><\/p>\n

You can easily create new tasks by entering the description into a placeholder row, navigate between cells using arrow keys and have the MS-Project like experience when editing automatically starts as soon as you start typing the text.<\/p>\n

Additionally, the keyboard navigation extension gives you a complete control over the project via customizable keyboard shortcuts, which bring the user experience to a completely new level.<\/p>\n

Main shortcuts:<\/p>\n

Any letter or number<\/strong> – to open the editor in the current cell and enter the edit mode
\nEnter<\/strong> – to open\/close the editor
\nSpacebar<\/strong> – to open the editor
\nArrows<\/strong> – to navigate between grid cells
\nShift+Right Arrow<\/strong> – to indent a task
\nShift+Left Arrow<\/strong> – to outdent a task
\nShift+Up Arrow<\/strong> – to collapse a branch with tasks
\nShift+Down Arrow<\/strong> – to expand a branch with tasks<\/p>\n

It’s also possible to implement a mouse\/keyboard mapping schema for inline editors.<\/p>\n

Split Tasks [PRO Edition]<\/h5>\n

It may happen that one of the tasks in a project can’t be carried out in one go for some reason like vacation of the person in charge or other events, which result in the need to break a task into parts. Gantt chart version 5.2 comes out with a split task feature, which allows interrupting a task and dividing it into several linked parts.<\/p>\n

\"ganttCheck Split Tasks Sample ><\/a><\/p>\n

{<\/span>id:<\/span> 1<\/span>,<\/span> text<\/span>:<\/span> "Task #2"<\/span>,<\/span> start_date:<\/span> "03-04-2018 00:00"<\/span>,<\/span> type:<\/span> "project"<\/span>,<\/span>
\n    render:<\/span>"split"<\/span>,<\/span> parent:<\/span> 0<\/span>}<\/span>,<\/span>  
\n{<\/span>id:<\/span> 2<\/span>,<\/span> text<\/span>:<\/span> "Task #2.1"<\/span>,<\/span> start_date:<\/span> "03-04-2018 00:00"<\/span>,<\/span> duration:<\/span> 1<\/span>,<\/span>
\n    parent:<\/span> 1<\/span>}<\/span>,<\/span>
\n{<\/span>id:<\/span> 3<\/span>,<\/span> text<\/span>:<\/span> "Task #2.2"<\/span>,<\/span> start_date:<\/span> "05-04-2018 00:00"<\/span>,<\/span> duration:<\/span> 2<\/span>,<\/span>
\n    parent:<\/span> 1<\/span>}<\/span>,<\/span>
\n{<\/span>id:<\/span> 4<\/span>,<\/span> text<\/span>:<\/span> "Task #2.3"<\/span>,<\/span> start_date:<\/span> "08-04-2018 00:00"<\/span>,<\/span> duration:<\/span> 1<\/span>,<\/span>
\n    parent:<\/span> 1<\/span>}<\/span><\/div><\/div>\n

Internally, a split task is stored as a regular summary item with subtasks, while the display mode shows splits in the same row where an original item was. The public API allows switching between a split mode and tree mode of task display on the fly, which gives users more control over the project.<\/p>\n

Checkbox and Radio Button Controls<\/h5>\n

Now you can also make use of two types of controls in a lightbox: checkboxes<\/a> and radio buttons<\/a>. They come in useful when you need to choose team members for assigning resources, switch between the tree and split modes for displaying tasks or define the priority of tasks in your project. <\/p>\n

Styling Your Gantt<\/h5>\n

And the cherry on the cake is an extensive guide to working with styles in Gantt<\/a> recently updated and completed to cover all customization options. As you may know, our gantt chart is 100% customizable, every element can be tailored to your requirements with ease. And if our 7 predefined skins aren\u2019t enough, there\u2019s lots of room for your own creativity. Changing background colors of columns, rows and cells in the grid and scale areas, adding buttons, icons and other custom elements wherever needed, coloring text and tasks according to their progress, styling baselines and deadlines, tooltips, links and what not – all that is described in our guide.<\/p>\n

Besides the features mentioned above, dhtmlxGantt 5.2 brings about such enhancements as ability to set task types automatically [PRO Edition], Auto Scheduling performance improvement and updated Content Security Policy extension<\/strong>.<\/p>\n

Note that split tasks and ability to set task types automatically are available only in Professional Edition under Commercial and Enterprise licenses<\/a>.<\/em><\/p>\n

To test all these features right now, download version 5.2 for 30-day evaluation<\/a>.<\/p>\n

Our current clients are welcome to get the released update in their Client Area<\/a>.<\/p>\n

Enjoy the update and don’t hesitate to leave us your feedback in the comments section!<\/p>\n

Related Resources:<\/h5>\n