Our state of the art Gantt chart


Post by rodel.ocfemia »

Hi,

Can the resources image supports bytes or base64 string?

"resources" : {
	"rows" : [
	  { "id" : 1, "name" : "Celia", "city" : "Barcelona", "calendar" : null, "image" : "celia.jpg" },
	  { "id" : 2, "name" : "Lee", "city" : "London", "calendar" : null, "image" : "lee.jpg"  },
	  { "id" : 3, "name" : "Macy", "city" : "New York","calendar" : null, "image" : "macy.jpg"  },
	]
},

Post by tasnim »

Yes. for that you could use https://bryntum.com/products/gantt/docs/api/Gantt/model/ResourceModel#field-imageUrl
This is a base64 image

Screenshot 2023-03-29 154833.png
Screenshot 2023-03-29 154833.png (51.48 KiB) Viewed 176 times

Post by rodel.ocfemia »

Hi,

How to display the avatar beside the name but in the same column.
Also, can I put the imageUrl directly in the task records?

{
	"id": 1,
	"name": "Website Design",
	"percentDone": 50,
	"startDate": null,
	"manuallyScheduled": false,
	"rollup": true,
	"endDate": "2022-03-14",
	"duration": 0,
	"expanded": true,
	"cls": "",
	"imageUrl": "base64string here"
},

Post by tasnim »

Hi,

You can't just directly set it to task Record.

In which column you want to display the image and text

In the name column like this?

Screenshot 2023-03-29 163306.png
Screenshot 2023-03-29 163306.png (70.36 KiB) Viewed 167 times

Post by rodel.ocfemia »

Yes, in one of the columns. Please see sample.

Capture.PNG
Capture.PNG (12.01 KiB) Viewed 165 times

Post by tasnim »

Hi,

Here is an example

    columns : [
        { type : 'name', width : 250, htmlEncode : false,
            renderer : (props) => {
                return `
                    <div style="display: flex; align-items: center;">
                        <img style="margin-right : 10px;" src="image" />
                        <p>${props.value}</p>
                    </div>
                `;
            }
        }
    ]

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


Post Reply