Most people are used to a comfortable sorting option, like, e.g. in the Windows Explorer: Clicking the table header of a column will sort the files in in ascending or descending order, this being indicated by an arrowhead pointing upwards or downwards shown in the table header.
Wouldn't it be nice if you could use this functionality also in XGantt? In my blog post I'm going to show you how this is done in three easy steps and with little programming effort.
What we want to achieve
The illustration below shows files in the Windows Explorer that are sorted by the column "Date modified" in ascending order, which is indicated by the little arrowhead pointing upwards:
This little arrowheads can easily be added to your Gantt chart - just follow the three steps described below.
Step #1: Create Arrowheads
You need two graphic files for displaying the arrowheads, hereinafter referred to as arrow-down.png and arrow-up.png, which have to be added as resources to your Visual Studio solution.
Step #2: Customize Table Format
In the XGantt table format StandardListCaption you have to tick the checkbox Text/Graphics combined for all fields.
Step #3: Add Code
After having carried out the steps described above you just have to add some code lines to your Gantt control:
int _sortedByColumn = 3;
private void Form1_Load(object sender, EventArgs e)
{
//Make the resources available for XGantt:
//In the following 2 lines the namespace has be be adjusted as necessary.
vcGantt1.SetImageResource("*ArrowDown",Default_Configuration.Properties.Resources.arrow_down);
vcGantt1.SetImageResource("*ArrowUp", Default_Configuration.Properties.Resources.arrow_up);
//Set the arrow in the table column by which your nodes are initially sorted:
VcTable activeTable = vcGantt1.TableCollection.Active;
VcTableFormat standardListCaptionTF = activeTable.TableFormatCollection.FormatByName("StandardListCaption");
//Select the table format field by which your nodes are initially sorted:
VcTableFormatField tff = standardListCaptionTF.get_FormatField(2);
tff.GraphicsFileName = "*ArrowUp";
//...
}
private void vcGantt1_VcTableCaptionLeftClicking(object sender, VcTableClickingEventArgs e)
{
VcNodeLevelLayout nodeLevelLayout = vcGantt1.NodeLevelLayout;
VcTableFormat standardListCaptionTF = e.Table.TableFormatCollection.FormatByName("StandardListCaption");
VcTableFormatField tff = standardListCaptionTF.get_FormatField((short)(e.ColumnNumber - 1));
if (e.ColumnNumber == _sortedByColumn)
//Clicked again on the same column: Just reverse the sort order!
{
if (nodeLevelLayout.get_SortOrder(0) == VcNodeSortingOrder.vcAscending)
{
nodeLevelLayout.set_SortOrder(0, VcNodeSortingOrder.vcDescending);
tff.GraphicsFileName = "*ArrowDown";
}
else
{
nodeLevelLayout.set_SortOrder(0, VcNodeSortingOrder.vcAscending);
tff.GraphicsFileName = "*ArrowUp";
}
}
else
//Clicked on another column: Sort by this column. Sort order: ascending
{
nodeLevelLayout.set_SortDataFieldIndex(0, tff.Index);
nodeLevelLayout.set_SortOrder(0, VcNodeSortingOrder.vcAscending);
tff.GraphicsFileName = "*ArrowUp";
tff = standardListCaptionTF.get_FormatField((short)(_sortedByColumn - 1));
tff.GraphicsFileName = string.Empty;
}
vcGantt1.SortNodes();
_sortedByColumn = e.ColumnNumber;
}
The result
If everything has gone to plan, the table headers in your Gantt chart should now show the sorting arrows like in the images below:
Next steps
Now try by yourself. If you do not use VARCHART XGantt so far, feel free to download a trial version. This version comes with full functionality, and we are happy to provide you with free tech support during your 30-days trial period.
Want to get more detailed information on selected VARCHART XGantt features? Read our blogpost on how to customize the display of the duration in the tooltip.