We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Problems with multcolumn

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?


1 Reply

PB Priyanga Balasubramaniam Syncfusion Team March 18, 2016 09:06 AM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon