Our state of the art Gantt chart
Hi, I wanna know if we can have those custom lines, like project start and project finish, but for other stuff.
Example: I wanna have a custom flag that is created by the user, like this:
custom customline.png (108.38 KiB) Viewed 71 times
If doesn't supported native by bryntum, do you guys have any idea on how to include it? Should I create a custom store for those lines? Tkx in advance!
Hi,
You can add this like this
msedge_k0tNyNaStk.gif (230.84 KiB) Viewed 61 times
Example:
First you'd need to have https://bryntum.com/products/gantt/docs/api/Scheduler/feature/TimeRanges feature enabled.
You can replace the code of this demo https://bryntum.com/products/gantt/examples/basic/
with the code below
import { Gantt, StringHelper } from '../../build/gantt.module.js?474872';
import shared from '../_shared/shared.module.js?474872';
new Gantt({
appendTo : 'container',
dependencyIdField : 'sequenceNumber',
rowHeight : 45,
tickSize : 45,
barMargin : 8,
project : {
autoLoad : true,
transport : {
load : {
url : '../_datasets/launch-saas.json'
}
}
},
features : {
timeRanges : true
},
tbar : [
{
type : 'button',
text : 'Add timerange',
onAction({ source }) {
const gantt = source.up('gantt');
gantt.timeRangeStore.add({
id : 'custom2',
name : 'Custom flag added by user',
startDate : new Date("2019-01-14"),
cls : 'red'
});
}
}
],
columns : [
{ type : 'name', width : 250 }
],
// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
if (taskRecord.isLeaf && !taskRecord.isMilestone) {
return StringHelper.encodeHtml(taskRecord.name);
}
}
});
And this is the CSS I used
.b-sch-timerange.b-sch-timeranges.b-sch-line.red {
background: red;
}
Docs
https://bryntum.com/products/gantt/docs/api/Scheduler/data/TimeRangeStore#function-add
https://bryntum.com/products/gantt/docs/api/Scheduler/model/TimeRangeModel
Hope it helps.
Best regards,
Tasnim
Exactly what I want. Thanks!