How to Groupby in TreeListView?

[Khoa]

How can I Groupby in TreeListView?

I got a collection with items and want to group it by column propertyName in a TreeListView.

How can I achieve this? 

[Dinko]

Hi Khoa,

The RadTreeListView control does not support grouping and there are no immediate plans for it. The logic behind the control and the type of collection that is responsible for the main functionality do not allow us to do so without introducing huge breaking changes. 

If you need to have groups, our recommendation would be to work with RadGridView instead.

Regards,
Dinko
Progress Telerik

[Khoa]

Ok, I was just wondering. 

Is it possible to have column defined in TreeView? 

Because I have a collection of data which I want to display.

[Khoa]

Here's my xaml code, I want to add coumns for the two textblock in the stackpanel.

 

<telerik:RadTreeView >
                <TextBlock Text="Duplicates"  FontSize="15" FontWeight="SemiBold" />
                <telerik:RadTreeViewItem Header="{Binding Title}" ItemsSource="{Binding Symbols}" >
                    <telerik:RadTreeViewItem.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding symbolName}" Margin="0 0 40 0"/>
                                <TextBlock Text="{Binding symbolCategory}" />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:RadTreeViewItem.ItemTemplate>
                </telerik:RadTreeViewItem>
                <telerik:RadTreeViewItem Header="{Binding title}" ItemsSource="{Binding testSymbol}" >
                    <telerik:RadTreeViewItem.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" >
                                <TextBlock Text="{Binding Symbol}" Margin="0 0 40 0"/>
                                <TextBlock Text="{Binding SymbolCategory}" />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:RadTreeViewItem.ItemTemplate>
                </telerik:RadTreeViewItem>
            </telerik:RadTreeView>

[Dinko]

Hello Khoa,

I am not exactly sure how you want to visualize the columns in your main application. Basically, you can add a WPF Grid inside the StackPanel and specify two columns. Check the modified version of your code snippet.

<telerik:RadTreeView >
    <TextBlock Text="Duplicates"  FontSize="15" FontWeight="SemiBold" />
    <telerik:RadTreeViewItem Header="{Binding Title}" ItemsSource="{Binding Symbols}" >
        <telerik:RadTreeViewItem.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding symbolName}" Margin="0 0 40 0" Grid.Column="0"/>
                        <TextBlock Text="{Binding symbolCategory}" Grid.Column="1"/>
                    </Grid>
                </StackPanel>
            </DataTemplate>
        </telerik:RadTreeViewItem.ItemTemplate>
    </telerik:RadTreeViewItem>
    <telerik:RadTreeViewItem Header="{Binding title}" ItemsSource="{Binding testSymbol}" >
        <telerik:RadTreeViewItem.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" >
                    <TextBlock Text="{Binding Symbol}" Margin="0 0 40 0"/>
                    <TextBlock Text="{Binding SymbolCategory}" />
                </StackPanel>
            </DataTemplate>
        </telerik:RadTreeViewItem.ItemTemplate>
    </telerik:RadTreeViewItem>
</telerik:RadTreeView>

Regards,
Dinko
Progress Telerik

[Khoa]

Hi again,

Is it possible to get it the column on the top of the grid?

Because right now it only visualize the textblock. But I want to include column somewhere on top so we know what property these textblock value belongs to.

[Khoa]

Just like the grid view. That you can a column with the propertyname, and all values under that property is listed under.

 

Placing the column header for the grids over TreeviewItem also works I think.

[Dinko]

Hello Khoa,

I am not familiar with the requirement of your scenario, but you need to have a column header I would suggest you use RadTreeListView instead. Basically, you could customize the RadTreeListView control to look closer to the RadTreeView. You can check the Customize RadTreeListView to look like a RadTreeView help article for further information.

Regards,
Dinko
Progress Telerik

[Khoa]

I want to use two collection for each TreeViewItem in the TreeListView. How can I specify the RadTreeListView to have the same behavior as the RadTreeView I've coded over? If yes, how do I do this? :)

    <telerik:RadTreeViewItem Header="{Binding Title}" ItemsSource="{Binding Symbols}" >
        <telerik:RadTreeViewItem.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding symbolName}" Margin="0 0 40 0" Grid.Column="0"/>
                        <TextBlock Text="{Binding symbolCategory}" Grid.Column="1"/>
                    </Grid>                          
                </StackPanel>
            </DataTemplate>
        </telerik:RadTreeViewItem.ItemTemplate>
    </telerik:RadTreeViewItem>

 

[Dinko]

Hello Khoa,

I have prepared a sample project which demonstrates this behavior. The project used MVVM scenario. Regarding the custom ItemTemplate in the RadTreeViewItem, in RadTreeListView you can specify CellTemplate. Check the attached project.

Regards,
Dinko
Progress Telerik