Customizing the tree cell templates in DataTreeGrid control of Hierarchical Data Light Library and GanttChartDataGrid control of Gantt Chart Light Library

If you need to customize the tree cell template of the DataTreeGrid control from Hierarchical Data Light Library or of the GanttChartDataGrid control from Gantt Chart Light Library you should be aware that they don't automatically merge the custom DataTemplates that you might specify as DataTreeGridColumn.CellTemplate and/or DataTreeGridColumn.CellEditTemplate with the built-in base tree view style. This behavior is required in order to provide optimal runtime performance. Therefore, to ensure that the column presents tree expanders while using your own templates, you need to manually merge your templates with the built-in templates. The original template definitions are presented below:

• For Silverlight™ controls:

  • DataTreeGridColumn.CellTemplate:

    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Rectangle Grid.Column="0" Width="{Binding Path=IndentationWidth}"/>
            <Border Grid.Column="1" Width="16">
                <ToggleButton Template="{Binding DataTreeGrid.ExpanderTemplate}" ClickMode="Press"
                    IsChecked="{Binding IsExpanded, Mode=TwoWay}"
                    Visibility="{Binding ExpanderVisibility, FallbackValue=Collapsed}" IsEnabled="{Binding IsActuallyCollapsible}"/>
            </Border>
            <ContentControl Grid.Column="2" Content="{Binding Content}" VerticalAlignment="Center" Padding="2,3"/>
        </Grid>
    </DataTemplate>

  • DataTreeGridColumn.CellEditTemplate:

    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Rectangle Grid.Column="0" Width="{Binding Path=IndentationWidth}"/>
            <Border Grid.Column="1" Width="16">
                <ToggleButton Template="{Binding DataTreeGrid.ExpanderTemplate}" ClickMode="Press"
                    IsChecked="{Binding IsExpanded, Mode=TwoWay}"
                    Visibility="{Binding ExpanderVisibility, FallbackValue=Collapsed}" IsEnabled="False"
                    Opacity="0.35"/>
            </Border>
            <TextBox x:Name="TextBox" Grid.Column="2" Text="{Binding Content, Mode=TwoWay}"
                Padding="0,2" Background="Transparent" VerticalAlignment="Stretch"/>
        </Grid>
    </DataTemplate>

• For WPF controls:

  • DataTreeGridColumn.CellTemplate:

    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Rectangle Grid.Column="0" Width="{Binding Path=IndentationWidth}"/>
            <Border Grid.Column="1" Width="16">
                <ToggleButton Template="{Binding DataTreeGrid.ExpanderTemplate}" ClickMode="Press"
                    IsChecked="{Binding IsExpanded, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                    Visibility="{Binding ExpanderVisibility, FallbackValue=Collapsed}" IsEnabled="{Binding IsActuallyCollapsible}"/>
            </Border>
            <ContentControl Grid.Column="2" Content="{Binding Content}" Padding="0,4" Margin="2,0"/>
        </Grid>
    </DataTemplate>

  • DataTreeGridColumn.CellEditTemplate:

    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Rectangle Grid.Column="0" Width="{Binding Path=IndentationWidth}"/>
            <Border Grid.Column="1" Width="16">
                <ToggleButton Template="{Binding DataTreeGrid.ExpanderTemplate}" ClickMode="Press"
                    IsChecked="{Binding IsExpanded, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                    Visibility="{Binding ExpanderVisibility, FallbackValue=Collapsed}" IsEnabled="{Binding IsActuallyCollapsible}"/>
            </Border>
            <TextBox x:Name="TextBox" Grid.Column="2" Text="{Binding Content, Mode=TwoWay}"
                BorderThickness="0" Padding="0" VerticalAlignment="Stretch"/>
        </Grid>
    </DataTemplate>