Multi Column Tree using FlexyTable

The FlexyGantt by default shows a FlexyTree (TreeView derived) on the left panel.

FlexyTree shown to the left of the gantt.

You can easily replace it with an editable multi-column tree list (FlexyTable instance) by defining a template like this:

<ControlTemplate x:Key="flexyGanttTableTemplate">

                <!-- DataContext for this will be a FlexyGanttTable instance -->

                <fxgantt:FlexyTable >

                    <fxgantt:FlexyTable.Columns>

                        <DataGridTemplateColumn Header="Name">

                            <DataGridTemplateColumn.CellTemplate>

                                <!-- DataContext for the DataTemplates here will be an instance of FlexyNodeData.-->

                                <DataTemplate>

                                    <fxgantt:ExpandableTextBlock Text="{Binding Data, Converter={StaticResource nameConverter}}"></fxgantt:ExpandableTextBlock>

                                </DataTemplate>

                            </DataGridTemplateColumn.CellTemplate>

                            <DataGridTemplateColumn.CellEditingTemplate>

                                <DataTemplate>

                                    <fxgantt:ExpandableTextBox Text="{Binding Data, Converter={StaticResource twoWayNameConverter}, Mode=TwoWay}"></fxgantt:ExpandableTextBox>

                                </DataTemplate>

                            </DataGridTemplateColumn.CellEditingTemplate>

                        </DataGridTemplateColumn>

                        <DataGridTextColumn Header="Tasks Count" IsReadOnly="true"

                                                 Binding="{Binding Data.EmployeeTasks.Count}">

                            <DataGridTextColumn.CellStyle>

                                <Style TargetType="DataGridCell">

                                    <Setter Property="HorizontalContentAlignment" Value="Center" ></Setter>

                                </Style>

                            </DataGridTextColumn.CellStyle>

                        </DataGridTextColumn>

                    </fxgantt:FlexyTable.Columns>

                </fxgantt:FlexyTable>

            </ControlTemplate>

Note that the DataContext for each row is a "node" in the underlying hierarchy and since this is a hierarchy, the type of bound object in each row could be different. Use Converters in the Bindings above to display appropriate data in the cells.

Assign the above template to the CustomSourceListViewTemplate property as follows:

<fxgantt:FlexyGantt CustomSourceListViewTemplate="{StaticResource flexyGanttTableTemplate}">

This will replace the default FlexyTree instance with the above FlexyTable.

FlexyTable (multi-column grid) shown to the left of the gantt.

---

� RadiantQ 2009 - 2019. All Rights Reserved.