Bryntum Support Forums

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 }
              ]
            }
          };
        };
      }
    }
  }
}

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?

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.

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

Thanks for the response. This has been resolved.