Our state of the art Gantt chart


Post by quandarycg »

We have an estimated hours field that we would like to have set as duration rather than the auto-calculated duration from start date to end date, which is in unit: days.

Our goal is to have unit of the duration field in hours so that way when we assign a resource, it does not extend the task duration out based on duration in days, but the duration in estimated hours.

Is this possible?


Post by arcady »

Sounds like you need to change default value for durationUnit field

class MyTask extends TaskModel {

    static get fields() {
        return [
            { name : 'durationUnit', defaultValue : 'hour' }
        ];
    }

}

const gantt = new Gantt({
    ...
    project : {
        // Let the Project know we want to use our own MyTask model with custom fields
        taskModelClass : MyTask,

Post by quandarycg »

Wonderful this did the trick! Now can we set our 'estimated hours' value to this column value?

** estimated hours is an integer value

I ask because whenever I try to set a field to populate that value, the gantt breaks.

columns: [
                        { type: "duration", width: 100, unit: "h", field: 'timeDuration' },
                        {
                             text: 'Estimated Hours Duration', width: 100, field: 'timeDuration', type: "duration" // when adding 'type: duration', gantt breaks
                        },
                        {
                            text: 'Estimated Hours', width: 100, field: 'timeDuration', // this works fine
                        },
]

And the error is: TypeError: Cannot read properties of undefined (reading 'charAt')


Post by alex.l »

If it's an integer, then use number column type. https://bryntum.com/docs/gantt/api/Grid/column/NumberColumn
DurationColumn requires Duration typed field, not integer. See docs here https://bryntum.com/docs/gantt/api/SchedulerPro/column/DurationColumn
It uses predefined internal data model field that combines duration and durationUnit and updates start/end dates accordingly.

All the best,
Alex


Post by quandarycg »

Thank you for this info! The aggregate column solved this issue.


Post by hien.nguyen »

Thanks team,

But I've other problem after apply this: horizontal bar not show (vertical bar show normal). I used version: gantt-5.1.5.

Best regards.


Post by tasnim »

Could you please show us an image that you're referring to by a "horizontal bar" and a "vertical bar"?


Post by hien.nguyen »

Yes, please see in attachment. I've used sample from gantt-5.1.5/examples/frameworks/react/javascript/basic
and add custom task model to change duration unit to hour as

class MyTaskModel extends TaskModel {
    static get fields() {
        return [
            { name : 'durationUnit', defaultValue : 'hour' }
        ];
    }
}

Result is OK for display duration as

hour

but horizontal bar not show. Please help me to review. Thanks.

Attachments
1.png
1.png (152.57 KiB) Viewed 609 times

Best regards.


Post by alex.l »

If you set defaultValue for the TaskModel duration as an hour, and didn't send that value from the server side, it might affects on all duration values in your tasks.
You don't see the scrollbar because there is no need to scroll. A project is fully visible on the screen.

But that's only my guess. Please attach a runnable test case, so we will be able to check your entire situation.

All the best,
Alex


Post by hien.nguyen »

Thanks for your advice.

I don't see the scrollbar because it not display: although I move some task to the right and can't scroll to view it (please see on attachment).

About runnable test case, I used sample code from gantt-5.1.5/examples/frameworks/react/javascript/basic and modify some:

  • Add class

    MyTaskModel

    to AppConfig.js
  • Load it into project

    taskModelClass : MyTaskModel

Attachments
1.png
1.png (122.03 KiB) Viewed 582 times

Best regards.


Post Reply