Our state of the art Gantt chart


Post by rodel.ocfemia »

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


Post by tasnim »

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
chrome_Iu39l9hRKj.gif (333.97 KiB) Viewed 368 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


Post by rodel.ocfemia »

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'
            },

Post by Animal »

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


Post by alex.l »

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
Screenshot 2023-02-20 at 21.26.55.png (58.28 KiB) Viewed 342 times

All the best,
Alex


Post by rodel.ocfemia »

Thanks, it works now.


Post by rodel.ocfemia »

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


Post by alex.l »

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",

All the best,
Alex


Post by rodel.ocfemia »

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


Post by alex.l »

Hi,

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

leafIconCls: false

All the best,
Alex


Post Reply