Our state of the art Gantt chart


Post by vconstruct »

Hi,

Currently, we have successfully implemented a custom renderer to the display a value (specifically the Activity name) within the cell, along with an accompanying Notes icon whenever there are associated notes for the record. However, we have encountered an issue with the order in which these elements are rendered (refer to Photo1 attached). Our goal is to have the notes icon positioned to the left of the bullet point icon, as shown in Photo2 attached. I was wondering if there is a solution to achieve this desired layout.

setColumnRender() {
  const columns = this.columnDef as any; //this.ganttRef.instance.columns as ColumnStore //Partial<ColumnConfig>[] | object[]

  if (columns && columns.length > 0) {
    for (let i = 0; i < columns.length; i++) {
      const column = columns[i] as any;
      if (column.type === 'name') {
        // eslint-disable-next-line no-loop-func, @typescript-eslint/ban-ts-comment
        // @ts-ignore
        column.renderer = ({ value, cellElement, row, record, widgets }) => {
          if (!record._data.notes?.length || record.data.iswbs) {
            return value;
          } else {
            return {
              children: [
                { tag: 'img', src: faFIleSVG, style: { height: '15', width: '15', margin: '5px' } },
                { html: value }
              ]
            }
          };
        };
      }
    }
  }
}
Attachments
Photo2.png
Photo2.png (226.37 KiB) Viewed 181 times
Photo1.png
Photo1.png (146.15 KiB) Viewed 181 times

Post by marcio »

Hey vconstruct,

I used your snippet to load a custom icon on our basic React demo and it loaded correctly (like what you desired). Perhaps there is some CSS that is changing the order of the row?

Attachments
Screenshot 2023-05-25 at 13.56.44.png
Screenshot 2023-05-25 at 13.56.44.png (144.38 KiB) Viewed 176 times

Best regards,
Márcio


Post by vconstruct »

Hi Marcio,

Thanks for the response. As mentioned, we are able to render the icon to the right of the bullet point icon (like in Photo1 and in your response). We want to render the notes icon to the left of the bullet point icon. see attached.

Attachments
Photo3.png
Photo3.png (259.29 KiB) Viewed 173 times

Post by tasnim »

Hi,

You could use this https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-iconCls to add an icon

                "iconCls"     : "b-fa-solid b-fa-bookmark",
Attachments
Screenshot 2023-05-26 100237.png
Screenshot 2023-05-26 100237.png (19.36 KiB) Viewed 144 times

Post by vconstruct »

Thanks for the response. This has been resolved.


Post Reply