Our state of the art Gantt chart


Post by bharat95 »

Hi there,

I want a functionality like," I have a menu Item named 'Mark as Trouble', on click of that menu item, I want to display an icon to the complete left of the task." Please have a look at attachment.

Menu Introuble.png
Menu Introuble.png (54.68 KiB) Viewed 235 times

In above when I click on 'Mark as Trouble' the task board should update like below(The red icons should be placed at complete left of a task)

Introuble icon.png
Introuble icon.png (195.17 KiB) Viewed 235 times

Thanks,
Bharat.


Post by tasnim »

Here is an example of how you could add it

taskMenu : {
    items : {
        addIcon : {
            text : 'Add Icon',
            onItem(props) {
                props.taskRecord.iconCls = 'b-fa-solid b-fa-triangle-exclamation';
            }
        }
    }
}

Please also check docs about icons https://bryntum.com/products/gantt/docs/guide/Grid/customization/iconfont
https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskMenu

Attachments
chrome_P7top6SQng.gif
chrome_P7top6SQng.gif (1.73 MiB) Viewed 228 times

Post by bharat95 »

Hi tasnim,

Thanks for your response. Actually that was not my requirement. The one which you implemented is placing the icons in the place of dot(.). But for me the icons should be displayed to the complete left of a task record. See my attachment in a clear. The red in trouble icons are at the start of a task row. Please help me with this.

Thanks,
Bharat.


Post by tasnim »

Hi,

Here is an example of how you could achieve this

new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',

project : {
    autoLoad  : true,
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    },
    taskStore : {
        fields : ['isWarning']
    }
},

features : {
    taskMenu : {
        items : {
            addIcon : {
                text : 'Add Icon',
                onItem(props) {
                    props.taskRecord.isWarning = true;
                    props.source.refreshRows();
                }
            }
        }
    }
},

columns : [
    {
        type       : 'name',
        width      : 250,
        htmlEncode : false,
        renderer(event) {
            console.log(event);
            if (event.record.isWarning === true) {
                return `
                    <div style="position: absolute;transform: translate(-79px, 0px); height: 27px;">
                        <img style="width:100%;height:100%;" src="https://cdn-icons-png.flaticon.com/512/4201/4201973.png" alt="image" />
                    </div>
                    <div>${event.value}</div>
                `;
            }
            return event.value;
        }
    }
],

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return StringHelper.encodeHtml(taskRecord.name);
    }
}
});

Please check these docs
https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-htmlEncode
https://bryntum.com/products/gantt/docs/api/Grid/column/Column#config-renderer
https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#subclassing-the-taskmodel-class

Attachments
chrome_aBu81oZod6.gif
chrome_aBu81oZod6.gif (3.46 MiB) Viewed 200 times

Post by bharat95 »

Hi tasnim,

How to add a custom icon in the highlighted area in the attachment(i.e., menu item)? I'm able to add bryntum in-built icons but unable to do the same with my own icon.

Thanks,
Bharat.

Attachments
menuicon.PNG
menuicon.PNG (11.45 KiB) Viewed 170 times

Post by tasnim »

Hi,

You could set your icon class icon : 'icon-cls'
Please check docs https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskMenu#config-items


Post by bharat95 »

Hi tasnim,

My code:
.ts file

 markInTrouble: {
            //
            icon: 'my-custom-icon',
            
},

.css file

.my-custom-icon {
  background-image: url(../../../public/assets/images/Trouble_Bw.svg) !important;
}

I also used iconCls instead icon but no luck. Please help on this.

Thanks,
Bharat.


Post by tasnim »

Hi,

Try using it with ::before and add CSS code

		.my-icon::before {
			content : '\26A0';
		}

Post by bharat95 »

Hi tasnim,

I updated the code like this.

.ts

 markInTrouble: {            
icon: 'my-custom-icon', onItem() { //
},

.css

.my-custom-icon::before {
  background-image: url(../../../public/assets/images/Trouble_Bw.svg) !important;
}

This is also not working. Any other way to do? Please suggest.

Thanks,
Bharat.


Post by tasnim »

Hi,

Please try like this

.my-icon {
    background-image: url(https://cdn-icons-png.flaticon.com/512/5968/5968292.png);
    height: 18px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

It should be working for you

Here is how it looks like

Screenshot 2023-06-08 135510.png
Screenshot 2023-06-08 135510.png (26.62 KiB) Viewed 117 times

Post Reply