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
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
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
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'
},
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;
}
All the best,
Alex
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