Smart Gantt chart summary bars
Customizing Gantt/schedule charts to display subtask bars for collapsed summary rows (WPF)
Let’s face it: managers — and, in fact, all end users — will never be able to properly grasp everything from a Gantt chart with hundreds of rows after a first glance (or even after a first scroll). Be that a standard Gantt chart using a single task bar per row Microsoft Project-like approach or a more generic Schedule chart that presents more items per line by design.
And this, even if the user interface would have been set up to focus on a specific timeline section according to the user’s needs or to be zoomed out according to the timeline’s total duration: it’s just too much vertical information presented there, as well!
It’s time for some customization, then. Using components from our Gantt chart library for WPF, let’s allow end users to get a better preview of all those child item visuals directly for the collapsed summary rows, too! That is, when the summary rows in the hierarchy get “minimized”, we should still display child item bars (rather than a single, less informative summary bar) directly in that row: no more need to scroll down to easily understand the data both at an overall and at the finest detail level, then!
Summary bars in ScheduleChartDataGrid
Let’s start with the second choice — the ScheduleChartDataGrid — because (although it may sound more difficult) it’s going to be easier to customize for these needs.
This is what we want to achieve — a hierarchical list of resources with task bars that still get shown in the summary row itself when collapsed (note that we’ve enabled showing multiple bars per row under different lines in the same row if times overlap, and this applies both to leaf resources and summary rows too):
Here is how we did it (with a bit of XAML and C#):
In short, what we do is to set up a collapse/expand handler that moves tasks under child Schedule chart items to be displayed as bars for the summary item itself when collapsed, and vice-versa.
Yes, it is this easy! Here is the full source of the sample app described above.
Summary bars in GanttChartDataGrid
Now let’s try it with GanttChartDataGrid, too. Although the Gantt chart component is more simple when compared to a Schedule chart we’ll need to do more steps to achieve what we want.
What we want is to make it work like this:
Here is the admittedly, slightly longer, code to enable the intended behavior (XAML and C# code behind):
Actually, to make this work, we need to “reset” the internal GanttChartDataGrid.GanttChartView.Items there, setting a “clone” collection created on the fly. This way we could manually configure DisplayRowIndex properties for shown items so they appear on certain vertical positions depending on ActualDisplayRowIndex values taken from the clones’ sources; those are correctly updated internally by the left grid while the hierarchy is modified by collapsing and expanding nodes.
Of course, we then also needed to synchronize clones and originals and an entire apparatus (consisting of multiple helper methods and change event handers) was created — not a big deal, however, afterall.
But as before, here is the entire source code of the sample app, if you want to dig it deeper.
