Bryntum Support Forums

Posted: **Mon Feb 20, 2023 11:58 am**

Hi,

Is there a way to change the default collapse and expand icons in Gant chart? Also is it possible to add prepend additional icon on each record/task?

Thanks

Posted: **Mon Feb 20, 2023 12:55 pm**

Yes. Sure

Please check these docs link
https://bryntum.com/products/gantt/docs/api/Grid/column/TreeColumn#config-expandIconCls
https://bryntum.com/products/gantt/docs/api/Grid/column/TreeColumn#config-leafIconCls
https://bryntum.com/products/gantt/docs/api/Grid/column/TreeColumn#config-collapseIconCls

: chrome_Iu39l9hRKj.gif (333.97 KiB) Viewed 444 times

I used to this code to achieve that above

    columns : [
        { 
            type : 'name',
            width : 250,
            expandIconCls : 'b-fa-solid b-fa-angle-double-right',
            collapseIconCls : 'b-fa-solid b-fa-angle-double-down',
            leafIconCls : 'b-fa-solid b-fa-book'
        }
    ]

You could find these icon in font-awesome https://fontawesome.com/search
https://bryntum.com/products/gantt/docs/guide/Grid/customization/iconfont#font-awesome

Posted: **Mon Feb 20, 2023 1:13 pm**

Hi Tasnim,

We have our custom icon as follow.

.iconDeliverable 
{
    background-image: url('Images/deliverable.svg');
}

and this one does not work. the original dot (.) icon is also missing now after applying the following code.

{
               text: 'Name',
               type: 'name',
               width: 250,
               leafIconCls: 'iconDeliverable'
            },

Posted: **Mon Feb 20, 2023 4:02 pm**

What does the network tab say? Is that URL 404?

Posted: **Mon Feb 20, 2023 4:27 pm**

You need to add more styling for your svg. Please inspect DOM and see if path to svg is correct.
After that check height and width of svg you used and try to add size for background

background-size: 15px 15px;

It works well for me with next styling

.leaf-icon {
    background-image: url(./bell-svgrepo-com.svg);
    height: 15px;
    background-size: 15px 15px;
}

: Screenshot 2023-02-20 at 21.26.55.png (58.28 KiB) Viewed 418 times

Posted: **Tue Feb 21, 2023 7:24 am**

Thanks, it works now.

Posted: **Tue Feb 21, 2023 8:15 am**

Hi,
Just a follow up question.
Is there a way to put condition for leafIconCls? Let say we have the taskTypes=deliverable,activity and we need to use different icon per taskType.

{
               text: 'Name',
               type: 'name',
               width: 250,
               leafIconCls: 'iconDeliverable'
            },

Thanks

Posted: **Tue Feb 21, 2023 8:58 am**

All you need is pass/set https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-iconCls in task record data

    },
    "tasks"        : {
        "rows" : [
            {
                "id"          : 1000,
                "name"        : "Launch SaaS Product",
                "percentDone" : 34,
                "startDate"   : "2019-01-14",
                "endDate"     : "2019-03-20",
                "duration"    : 47,
                "expanded"    : true,
                "children"    : [
                    {
                        "id"          : 1,
                        "name"        : "Setup web server",
                        "percentDone" : 42.3,
                        "duration"    : 7,
                        "startDate"   : "2019-01-14",
                        "rollup"      : true,
                        "endDate"     : "2019-01-23",
                        "expanded"    : true,
                        "children"    : [
                            {
                                "id"          : 11,
                                "name"        : "Install Apache",
                                "percentDone" : 50,
                                "startDate"   : "2019-01-14",
                                "rollup"      : true,
                                "iconCls"     : "b-fa b-fa-glass-cheers", // <--- example
                                "duration"    : 3,
                                "color"       : "teal",
                                "endDate"     : "2019-01-17",
                                "cost"        : 200,
                                "priority"    : "high",

Posted: **Fri Mar 24, 2023 9:57 am**

Hi,

How to permanently remove the leaf icon? I tried the following but still there is a dot (.) icon displayed.

"iconCls": null,
"collapseIconCls": null,
"expandIconCls": null,
"leafIconCls": null

Thanks

Posted: **Fri Mar 24, 2023 11:38 am**

Hi,

null means you didn't set any special. Try to set false value

leafIconCls: false

Bryntum Support Forums

Bryntum Gantt custom collapse/expand icon

Bryntum Gantt custom collapse/expand icon

Re: Bryntum Gantt custom collapse/expand icon

Re: Bryntum Gantt custom collapse/expand icon

Re: Bryntum Gantt custom collapse/expand icon

Re: Bryntum Gantt custom collapse/expand icon

Re: Bryntum Gantt custom collapse/expand icon

Re: Bryntum Gantt custom collapse/expand icon

Re: Bryntum Gantt custom collapse/expand icon

Re: Bryntum Gantt custom collapse/expand icon

Re: Bryntum Gantt custom collapse/expand icon