Bryntum Support Forums

Hello Bryntum team,

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

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

Hello Tasnim,

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

Regards

Yes. Sure.

This is the style for column

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

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

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')