Problems with multcolumn

[Richard]

Based on one of your examples I created a sample project using TreeViewadv - the project works and displays the tree of data.

The XAML is :

<syncfusion:ChromelessWindow x:Class="TreeContextMenuDemo.Window1" UseNativeChrome="True"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:local="clr-namespace:TreeContextMenuDemo" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 

        WindowStartupLocation="CenterScreen" xmlns:sblayout="clr-namespace:SampleLayout.WPF;assembly=Syncfusion.SampleLayout.WPF" 

    Title="ContextMenu Demo" Width="750"  Icon="App.ico"

    Height="620" FontFamily="Calibri" FontSize="13" >

    <syncfusion:ChromelessWindow.DataContext>

        <local:ViewModel/>

    </syncfusion:ChromelessWindow.DataContext>

    <syncfusion:ChromelessWindow.Resources>

        <local:BooleanToVisibilityConverter x:Key="Converter"/>

        <Style TargetType="syncfusion:TreeViewItemAdv" x:Key="2">

            <Setter Property="IsExpanded" Value="True"/>

            <Setter Property="IsEditable" Value="true"/>

            <Setter Property="IsInEditMode" Value="{Binding IsEditing, Mode=TwoWay}"/>

            <Setter Property="IsSelected" Value="{Binding  IsSelected,Mode=TwoWay}"/>

        </Style>

        <HierarchicalDataTemplate x:Key="1"  ItemsSource="{Binding SubFolders}">

            <StackPanel Orientation="Horizontal">

                <ContextMenuService.ContextMenu>

                    <ContextMenu ItemsSource="{Binding ContextItems}">

                    </ContextMenu>

                </ContextMenuService.ContextMenu>

                <Image Source="{Binding Image}" Margin="1"/>

                <TextBlock Text="{Binding Caption}" Margin="1" />

            </StackPanel>

        </HierarchicalDataTemplate>

    </syncfusion:ChromelessWindow.Resources>

    <Grid>

        <Grid >

            <sblayout:SampleLayoutControl HideEventsLog="true"   Header="TreeView-ContextMenu" x:Name="Sblayout"

                                          Description="The TreeViewAdv Control is used to display data in a hierarchical order.The TreeViewAdv framework provides options for including Context Menus which can be displayed when a tree-node is right-clicked using HierarchicalDataTemplate support.">

                <Grid HorizontalAlignment="Center" VerticalAlignment="Center">

                    <syncfusion:TreeViewAdv x:Name="treeview"   

                                            ItemsSource="{Binding Models}" 

                                            ItemContainerStyle="{StaticResource 2}" 

                                            ItemTemplate="{StaticResource 1}" >

                    </syncfusion:TreeViewAdv>

                </Grid>

            </sblayout:SampleLayoutControl>

        </Grid>

    </Grid>

</syncfusion:ChromelessWindow>

I then attempted to make the treeview a multi-column treeview by doing the following :

 - setting the MultiColumnEnable property  ( e.g. MultiColumnEnable="True" )

 - adding a column collection

The XAML now looks like this

<syncfusion:ChromelessWindow x:Class="TreeContextMenuDemo.Window1" UseNativeChrome="True"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:local="clr-namespace:TreeContextMenuDemo" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 

        WindowStartupLocation="CenterScreen" xmlns:sblayout="clr-namespace:SampleLayout.WPF;assembly=Syncfusion.SampleLayout.WPF" 

    Title="ContextMenu Demo" Width="750"  Icon="App.ico"

    Height="620" FontFamily="Calibri" FontSize="13" >

    <syncfusion:ChromelessWindow.DataContext>

        <local:ViewModel/>

    </syncfusion:ChromelessWindow.DataContext>

    <syncfusion:ChromelessWindow.Resources>

        <local:BooleanToVisibilityConverter x:Key="Converter"/>

        <Style TargetType="syncfusion:TreeViewItemAdv" x:Key="2">

            <Setter Property="IsExpanded" Value="True"/>

            <Setter Property="IsEditable" Value="true"/>

            <Setter Property="IsInEditMode" Value="{Binding IsEditing, Mode=TwoWay}"/>

            <Setter Property="IsSelected" Value="{Binding  IsSelected,Mode=TwoWay}"/>

        </Style>

        <HierarchicalDataTemplate x:Key="1"  ItemsSource="{Binding SubFolders}">

            <StackPanel Orientation="Horizontal">

                <ContextMenuService.ContextMenu>

                    <ContextMenu ItemsSource="{Binding ContextItems}">

                    </ContextMenu>

                </ContextMenuService.ContextMenu>

                <Image Source="{Binding Image}" Margin="1"/>

                <TextBlock Text="{Binding Caption}" Margin="1" />

            </StackPanel>

        </HierarchicalDataTemplate>

    </syncfusion:ChromelessWindow.Resources>

    <Grid>

        <Grid >

            <sblayout:SampleLayoutControl HideEventsLog="true"   Header="TreeView-ContextMenu" x:Name="Sblayout"

                                          Description="The TreeViewAdv Control is used to display data in a hierarchical order.The TreeViewAdv framework provides options for including Context Menus which can be displayed when a tree-node is right-clicked using HierarchicalDataTemplate support.">

                <Grid HorizontalAlignment="Center" VerticalAlignment="Center">

                    <syncfusion:TreeViewAdv x:Name="treeview"   MultiColumnEnable="True"

                                            ItemsSource="{Binding Models}" 

                                            ItemContainerStyle="{StaticResource 2}" 

                                            ItemTemplate="{StaticResource 1}" >

                        <syncfusion:TreeViewAdv.Columns>

                            <syncfusion:TreeViewColumnCollection>

                                <syncfusion:TreeViewColumn Width="150" Header="col1" DisplayMemberBinding="{Binding Path=Caption, RelativeSource={RelativeSource AncestorType={x:Type syncfusion:TreeViewItemAdv}}}"/>

                                <syncfusion:TreeViewColumn Width="100" Header="col2" DisplayMemberBinding="{Binding Path=Caption, RelativeSource={RelativeSource AncestorType={x:Type syncfusion:TreeViewItemAdv}}}"/>

                                <syncfusion:TreeViewColumn Width="50" Header="col3" DisplayMemberBinding="{Binding Path=Caption, RelativeSource={RelativeSource AncestorType={x:Type syncfusion:TreeViewItemAdv}}}"/>

                            </syncfusion:TreeViewColumnCollection>

                        </syncfusion:TreeViewAdv.Columns>

                    </syncfusion:TreeViewAdv>

                </Grid>

            </sblayout:SampleLayoutControl>

        </Grid>

    </Grid>

</syncfusion:ChromelessWindow>

Now when the code runs there is a significant delay before the treeview is displayed. The "labels" on the tree nodes are missing and the application becomes unresponsive.

Any ideas what I am doing wrong?

[Priyanga Balasubramaniam]

Hi Richard,

Thank you for contacting Syncfusion Support.

We have analyzed your code and prepared a sample for Multicolumn TreeView to meet your requirement. In this sample, we have included separate HierarchicalDataTemplate to bind with TreeViewColumn CellTemplate. Please download the sample from the below location.

Sample: MultiColumn_TreeViewSample


Regards,
Priyanga B