How can I display multiple tasks and/or milestones on the same line?

[maltinho8]

Example would be something like this:

[baish-bng]

Hi, did you find a solution for this yet?

[maltinho8]

Not yet - but I think you have to manipulate the y-Position of the task in combination with the displayOrder

[ivosturm]

Hi I am also in need of this feature. Did you already find a solution for this?

[maltinho8]

No - do you have an approach?

[ivosturm]

No, I don’t. The client for which I want to implement an interactive Gantt chart will need this functionality, so if we choose this library then I will try to add this. If I start, I will let you know.

[ivosturm]

I have an approach. It does need the displayorder to be correct. So, it tries to add the task in the same row and if not possible, adds a new row. My approach doesn't sort the tasks in the right way to make them fit. You really need to prepare the data to make sure this is reflected in an ascending displayorder. But, if you do that, my approach will work. Let me know if you want me to share it with you.

[felipeleo1995]

I have an approach. It does need the displayorder to be correct. So, it tries to add the task in the same row and if not possible, adds a new row. My approach doesn't sort the tasks in the right way to make them fit. You really need to prepare the data to make sure this is reflected in an ascending displayorder. But, if you do that, my approach will work. Let me know if you want me to share it with you.

please share with us

[maltinho8]

@ivosturm it would be awesome if you can share your solution with us!

[LoGaNsF]

@ivosturm It would be great if you could share your approach. I need something like that and I could really use it. Thank you.

[fabiavmz]

@ivosturm , could you please share your solution? It is an interesting feature that I need to add to a project.

Thanks in advance.

[xinyan999]

@ivosturm Could you please share your solution with me? Thank you so much!

[ivosturm]

I forked the project and added all needed changes to the code I think. The tricky part is my code (not on public GitHub) has a lot more features than only the horizontal displaying. So, I tried to pull out only that change in the forked code on my public GitHub account. It should be as simple as just adding isHorizontalDisplay = false as a property for the Gantt component. I hope I didn't miss anything. Please try my code and let me know if it works for you. If so, I will ask to pull my changes.

There is one other complexity added: if the label wouldn't fit the task bar, it would be displayed outside the bar. For horizontal mode this is unwanted as then labels could overlap other tasks on the same horizontal lane. So I added logic that will always show the label inside and will abbreviate it if the label doesn't fit, ending the label in that case with three dots to show it has been abbreviated.

The list of changes of my forked version:

1. in public-types.dts added to DisplayOption isHorizontalDisplay boolean;
2. in Gantt.tsx
   • created local variable isHorizontalDisplay based on _ref.isHorizontalDisplay
   • in call to convertToBarTasks function added isHorizontalDisplay variable and populated from local variable in Gantt
   • Added isHorizontalDisplay boolean to gridProps, barProps and tableProps
   • Added barTaskUniqueIndices to make sure GanttHeight is adjusted when multiple tasks are on same line/index in horizontal mode
   • Fed BarTaskIndexMax parameter based on barTaskUniqueIndices to TaskGantt
3. Update bar-helper.tsx: Introduced corrected index to keep index same if next task in line 'fits' next to other task (doesn't overlap)
4. Update task-gantt.tsx:
   • Added barTaskIndexMax property
   • Added dynamic height based on isHorizontalDisplay setting and newly introduced barTaskUniqueIndices
   • Added viewMode to newBarProps to feed to TaskGanttContent
5. Update grid-body.tsx
   • Don't create new row in gridBody if tasks can fit horizontally next to each other
6. Update task-gantt-content.tsx
   • Added isHorizontalDisplay and viewMode property and feed it to TaskItem
7. Update task-item.tsx
   • Added mechanism to put label inside task and abbreviate if in horizontal display mode and the label is too big. Also added ViewMode dependency to retrigger logic once view mode changes.
8. Update task-list-table.tsx
   • Implemented isHorizontalDisplay correction of task index
9. Update task-list.tsx
   • Added isHorizontalDisplay to tableProps