How to Groupby in TreeListView?

10 posts, 0 answers
  1. Khoa
    Khoa avatar
    25 posts
    Member since:
    Sep 2018

    Posted 22 Nov 2018 Link to this post

    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? 

  2. Dinko
    Admin
    Dinko avatar
    1220 posts

    Posted 26 Nov 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Khoa
    Khoa avatar
    25 posts
    Member since:
    Sep 2018

    Posted 26 Nov 2018 in reply to Dinko Link to this post

    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.

  4. Khoa
    Khoa avatar
    25 posts
    Member since:
    Sep 2018

    Posted 26 Nov 2018 in reply to Khoa Link to this post

    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>

  5. Dinko
    Admin
    Dinko avatar
    1220 posts

    Posted 27 Nov 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Khoa
    Khoa avatar
    25 posts
    Member since:
    Sep 2018

    Posted 27 Nov 2018 in reply to Dinko Link to this post

    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.

  7. Khoa
    Khoa avatar
    25 posts
    Member since:
    Sep 2018

    Posted 27 Nov 2018 in reply to Khoa Link to this post

    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.

  8. Dinko
    Admin
    Dinko avatar
    1220 posts

    Posted 30 Nov 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Khoa
    Khoa avatar
    25 posts
    Member since:
    Sep 2018

    Posted 30 Nov 2018 in reply to Dinko Link to this post

    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>

     

  10. Dinko
    Admin
    Dinko avatar
    1220 posts

    Posted 05 Dec 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top