Custom Columns in Gantt chart

Gantt
#1

Hi,

I have requirements to create two columns inside column,

  • Start Date → Actual Date, Planned Date
  • Add React form fields in column cells

is it possible with Dhtmlx Gantt chart.

image
image1114×445 24 KB

Thanks,

#2

Hello @nagappletree,

Regarding creating two columns inside the column:

There is no way to render two cells structure inside one column, but
you can get similar results through template function, by dividing cell content between two separate divs.

It may look like the following fragment:

gantt.config.columns =  [
  {name:"text",       label:"Task name",  width:"*", tree:true },
  {name:"start_date", label:"Start time", width:150 },
  {name:"custom",   label:"Custom Date Coulmn",   width:350, template: function(obj){

  return `
    <div>
      <div class='some-class'>  ${dateToStr(obj.start_date)} </div> 
      <div class='some-class-2'> ${dateToStr(obj.end_date)} </div>
    </div>
  `
  } }
];

Here is the live demo(HTML/CODE tabs):
http://snippet.dhtmlx.com/5/752df094b

Regarding using React form fields in column cells -
Unfortunately, Gantt doesn’t support React methods and elements.
This feature stays in our dev tracker and will be implemented in the future, but I cannot give you any ETA.
For now, you can only return HTML elements(like in a code fragment above).

1 Like