Custom columns, column info not available inside template

Not able to address the following usecase. I have a few fields which are user created which I would like to display to user.

I tried following code to add column to Gantt grid however, it doesn’t work since template function doesn’t have any information of column and just gives ganttTask model in argument. Here is the code I tried:

if(this.ganttTasks[0].task.CustomFields.length > 0){ var customFieldColumns = []; for(var i =0; i < this.ganttTasks[0].task.CustomFields.length; i++){ var name = this.ganttTasks[0].task.CustomField[i].Name; var customFieldId = this.ganttTasks[0].task.CustomFields[i].CustomFieldId; var add_column = { name: "custom_field_"+ customFieldId, label: name, align: "center", resize: true, hide: true, template: (ganttTask: GanttTaskModel) =>{ var value = ""; var cft = ganttTask.task.CustomFields.find(x=> x.CustomFieldId == customFieldId); switch (cft.Type) { case CustomFieldTypeEnum.Text: value = cft.TextValue; break; case CustomFieldTypeEnum.Number: value = cft.NumberValue.toString(); break; case CustomFieldTypeEnum.Enum: value = cft.EnumValue.EnumId == undefined ? null : cft.EnumValue.Name; break; } return value; } } customFieldColumns.push(add_column); } this.ganttColumns.push.apply(this.ganttColumns,customFieldColumns); }

Specifically in the above code, the customFieldId is not available inside the template. If I have the information of the column too inside the template I could solve this issue.

Looking forward to a solution to this.

Have you tried to use “config_columns” option to add a column? … onfig.html … lumns.html
By using it you can add custom columns, and task properties are available in templates using that method.
If you want to add columns dynamically, it is still possible by using “config_columns”. Please check this snippet to see how it works:
As you can see there is a custom field called duration² that is squared duration. You can add even HTML elements like a text_field or a button.
If you click on the “add column” button, Gantt will add a new column and you can customize it by changing column object properties.

Hi Ramil,

Check out this snippet: the problem here is I don’t have the information on column inside the template function.

If I understand you correctly, you need to get the information of the column, i.e. column properties inside the template function. Am I correct?
You can use this.[property] to get it:
There you can see that the variable (and task text too) can get the column’s name or width. And you can change the column’s name in the function.

But also I see that you add “i” variable value to each task name, but they all end “_3”. This happens because the function is called for each task while there is only one variable and it is limited by “3” in the “for” loop.
To workaround this you can use a variable to show the text and manually increment the variable value:

i = (i + 1) % 3;

After parsing the data you need to initiate gantt again to update the values in the UI. Here is the example:

If you need to get something else, please give me more details or create a snippet(or HTML file) where I can see what you want to get.

Thanks for the tip Works!

Hi guy,
-I’m customizing content off column by use gantt.custom_teamplate. I had difficulty adding a component.

This is gantt.custom_teamplate

And result is:


Thank you!
----- End -----

Gantt doesn’t support Angular methods and elements. The dev team will investigate if it is possible to add that support, but I cannot give you any ETA. So, the PopupCustom element won’t work in Gantt. You can only return HTML elements.
I modified your code a little and now Gantt shows the elements correctly: