Mats Bryntse
10 November 2014

Ext Gantt: The New Task Split Feature

Sometimes a task is not worked on continuously, the work may be stopped as planned or due to unexpected circumstances. […]

Sometimes a task is not worked on continuously, the work may be stopped as planned or due to unexpected circumstances. Let’s say a machine breaks down, in such a scenario the Ext Gantt supports splitting the task into segments. The easiest way to split a task is to use the new context menu option. Simply right click on the task where you want the split to happen and choose the “Split task” option.

Screen Shot 2014-11-07 at 09.16.41

The ‘split’ API method

You can of course also call the ‘split‘ method of the Gnt.model.Task class. Here’s how you call the split method manually:

[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
var taskStore = new Gnt.data.TaskStore({
root : {
expanded : true,
children : [{
Id : 1,
StartDate : new Date(2014, 10, 3),
Duration : 4,
leaf : true
}]
}
});

var task = taskStore.getById(1);
console.log(task.getSegments()); // null – task is not segmented

// Will split the task in two segments, 1 day + 3 days
task.split(new Date(2014, 10, 4));

console.log(task.getSegments().length) // => 2 segments now
console.log(task.getSegments()[0].getDuration()) // 1
console.log(task.getSegments()[1].getDuration()) // 3
[/crayon]

All you have to do is to provide the date when you want the split to be made. By default, a gap of 1 task ‘duration unit’ will be introduced after the split. The second split in the example above will hence start on November 5. You can control the gap by passing two additional parameters after the split date, one for the duration, and another argument for the duration unit.

The ‘merge’ API method

Merging a split tasks is just as easy as splitting. Simply drag two pieces together in the UI and they will be merged automatically. You can of course do the same via the merge method of the Task API:

[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
var taskStore = new Gnt.data.TaskStore({
root : {
expanded : true,
children : [{
Id : 1,
StartDate : new Date(2014, 10, 3),
EndDate : new Date(2014, 10, 7),
leaf : true
}]
}
});

var task = taskStore.getById(1);
console.log(task.getSegments()); // null – task is not segmented

// Will split the task in two segments, 1 day + 3 days
task.split(new Date(2014, 10, 4));

// Will merge the two segments
task.merge(task.getSegment(0), task.getSegment(1));

console.log(task.getSegments()) // => null, no segments now
[/crayon]

Data Structure

When loading data with segmented tasks, the incoming JSON structure should look like this:

[crayon striped=”false” lang=”js” nums=”false” toolbar=”false”]
{
“Id” : 11,
“leaf” : true,
“Name” : “Investigate”,
“PercentDone” : 50,
“StartDate” : “2010-01-18”,
“Segments” : [
{
“Id” : 1,
“StartDate” : “2010-01-18”,
“Duration” : 1
},
{
“Id” : 2,
“StartDate” : “2010-01-20”,
“Duration” : 2
},
{
“Id” : 3,
“StartDate” : “2010-01-25”,
“Duration” : 5
}
]
}
[/crayon]

It’s pretty self explanatory, you simply describe the segments in order with a date and duration (and optional duration unit). Note that the segments themselves are not part of the TaskStore directly, and can only be queried on the task level. The same structure as above will be used when tasks are serialized and sent to the server to be saved.

Try it out right now!

To try this feature out and do your own first task split, head over to our advanced and right click one of the tasks. Happy splitting!

Mats Bryntse

Ext Gantt