Our state of the art Gantt chart


Post by additout »

Hello Bryntum team,

screenshot.png
screenshot.png (100.15 KiB) Viewed 240 times

We want to change the milestones visually. Is there any way to change the diamond form based on what we receive as data? Insert any kind of icon inside? Also I tried to use the "style" prop changing the background but it doesn't change the diamond color. Please let me know any way to change those diamond milestone styles. (Not via css because that way it changes all the milestones, we want to difference every milestone).

Another question is, lets say for example that I receive in my data: A, B, C, D, E and I want to show those 5 columns, but If the next Gantt receives A, B, C, I want to show only those 3 columns. Is it possible to show and hide columns based on the data?

Thank you in advance


Post by tasnim »

Hi,

You could use the taskRenderer for this

    taskRenderer({ taskRecord }) {
        if (taskRecord.isMilestone) {
            taskRecord.cls.add('red-milestone');
        }
    }

And here is how you could style it

.red-milestone.b-gantt-task .b-gantt-task-content {
    background-color: red;
}

https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-cls


Post by additout »

Hello Tasnim,

Thank you for your quick response, I would also like to know about the columns thing.

Regards


Post by tasnim »

Yes. Sure.

This is the style for column

[data-region="locked"] .red-milestone.b-grid-row .b-grid-cell {
    background-color:red;
}

Post by additout »

Hello Tasnim,

I will ask the question again:

Lets say for example that I receive in my data: A, B, C, D, E values and I want to show those 5 values on different columns, but If the next Gantt receives A, B, C, instead of A, B, C, D, E I want to show only those 3 columns. Is it possible to show and hide columns based on the received data?

Thanks


Post by marcio »

Hey additout,

I believe you have two possible approaches.

One: you can use https://bryntum.com/products/gantt/docs/api/Grid/column/Column#function-hide to hide a column. Example:

gantt.columns.get('D').hide()

Two: you can use https://bryntum.com/products/gantt/docs/api/Grid/data/ColumnStore#function-filter to filter the columns with a custom function. Example

gantt.columns.filter((record) => record.field !== 'D' && record.field !== 'E')

Best regards,
Márcio


Post Reply