[REACT] GANTT: how to set custom Project Start and Project End vertical Lines

[clovisapp]

Hi Bryntum, i cannot find a way to set custom "project start" date and "project end" vertical line dates inside the Gantt

Cf https://bryntum.com/products/gantt/docs/api/Gantt/feature/ProjectLines

Is there a way to "customise" these two dates, independently of elements shown in the Gantt ?

[marcio]

Hey clovisapp,

Thanks for reaching out.

If you check the source code of the example that is available in the documentation that you shared, you'll see

const project = new ProjectModel({
    startDate : new Date(2019, 11, 27),

So, you can set the start/end date of the project model, and that date will be used for the project lines.

Are you seeing a different behavior in your application?

[clovisapp]

Thanks @Marcio,

How can i do that with React ? (here a screenshot of how we implement currently Bryntum)

[clovisapp]

Moreover in the given screenshot, how to create a custom vertical line ? (like the line "Important date") ?

[clovisapp]

Last question: when clicking on "Project start" and "Project end" vertical line, is that possible to trigger a custom action ?
Can you provide a quick react example ?

Thanks a lot for your help !

[marcio]

Hey clovisapp,

So, regarding setting the start/end date for the project model, you can achieve that with the following:

<BryntumGanttProjectModel
	//...other props
	startDate={'2019-01-01'}
	endDate={'2019-01-10'}

https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#field-startDate
https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#field-endDate

Regarding the custom vertical line, like "Important date", you can achieve that by adding a TimeRange with 0 duration, you can see a live example here https://bryntum.com/products/gantt/examples/timeranges/

Regarding the click listener, you can add the following eventListener to handle that

document.addEventListener('click', (ev) => {
	if(ev.target.className.includes('b-sch-timerange')) {
    		console.log('clicked on timerange')
	}
})

Tested on the example that I mentioned earlier.

[clovisapp]

Hello @marcio

We were able to set the vertical lines for the start and end of the project applying the strategy that you indicated us.

...
projectLinesFeature: true, // looks like it forces magnetism
...

<BryntumGanttProjectModel
	//...other props
	startDate={'2019-01-01'}
	endDate={'2019-01-10'}

But we are getting an "unexpected behavior", despite having set the dates for the vertical lines, they automatically move to the start of the leftmost task and the end of the rightmost task for start line and end line respectively.

Is there a setting to prevent them from being automatically positioned? and strictly follow the dates passed to BryntumGanttProjectModel?

Grabación 2024-04-15 105441.mp4

(3.96 MiB) Downloaded 14 times

[marcio]

Hey clovisapp,

If you check the demo in the documentation, you'll see that the project start date defines where the tasks will be rendered https://bryntum.com/products/gantt/docs/api/Gantt/feature/ProjectLines.

Regarding the end date, Gantt will forward schedule the events by default, so it's expected that the calculation changes the project end date.

But we have https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-projectConstraintResolution which you could set to ignore.

[clovisapp]

@marcio

Looks like you have a lot of automations with that. How could we simplify display horizontal marker with react bryntum gantt, with no "blakc magic" happening function of them ?

<BryntumGanttProjectModel
	//...other props
	startDate={'2019-01-01'}
	endDate={'2019-01-10'}

[marcio]

Hey clovisapp,

Not really, you can test it in our demo here https://bryntum.com/products/gantt/examples/basic/

class Task extends TaskModel {

static $name = 'Task';

static get fields() {
    return [
        // enable project border constraint check
        { name : 'projectConstraintResolution', defaultValue : 'ignore' },
    ];
}
}

new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project           : {
        autoLoad  : true,
        transport : {
            load : {
                url : '../_datasets/launch-saas.json'
            }
        },
        taskModelClass: Task
    },

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);
    }
}
});