TreeListView, GridView or none of them

[Daní]

Hello,

I have a hierirchical data model, in summary is as following code snippet:

public class Group
{
    public string GroupName { get; set; }
    public List<Group> Subgroups { get; set; }
    public List<Item> Items { get; set; }

}
public class Item
{
    public int MyProperty { get; set; }
    public int MyProperty2 { get; set; }
    public int MyProperty3 { get; set; }
    public int MyProperty4 { get; set; }
    public int MyProperty5 { get; set; }
}

As you can see, Groups can be nested with no limit. It's simliar to a Folder-files structure, but data is not homogenous as needed for the TreeListView control. In fact, i'd like grouping behavior of the GridView control, but I don't know how to implement this gruping GridView.

Any help or idea?

[Vlad]

Hello,

Generally you can use RadTreeListView if you want to show Groups/Subgroups. Please check the attached project for reference. 

Best wishes,
Vlad
the Telerik team

[Daní]

Hello Vlad,

I'm affraid my explanation wasn't good enough. I'd like to view Item class propeties (MyProperty, MyProperty1,...) as the TreelistView Headers. As I explained before, I'd like to get the same behavior when GridView is grouped, but I don't know how to achive this type of grouping in DataGrid. Maybe I can achieve this playing with RowStyleSelector and/or CellStyleSelector in TreeListView. I can define an interface with a merge of the properties in Grou and Item classes, both classes implement this interface, then I can define two RowStyles, one per Group, with a template similar to the Grouping row in Datagrid for Group's instances and another style per Item instances. Using the RowStyleSelector I can supply the corresponding RowStyle depending on the instance type.

[Vlad]

Hello,

 Unfortunately I'm not sure how to bind Groups/Subgroups however show Items in the grid. I'm afraid that this is not possible. 

Regards,
Vlad
the Telerik team

[Daní]

I found a nice solution to show heteogenous data with the help of RowTemplateSelector.I've definied an interface with a merge of the two types involved. Let's see:

public interface IData

    {

        int MyProperty { get; set; }

        int MyProperty2 { get; set; }

        int MyProperty3 { get; set; }

        int MyProperty4 { get; set; }

        int MyProperty5 { get; set; }

        string GroupName { get; set; }

        List<IData> AllChilds { get; set; }

    }

    public class Group: IData

    {

        public Group(List<Group> subGroups, List<Item> items)

        {

            Subgroups = subGroups;

            Items = items;

            AllChilds = new List<IData>();

            AllChilds.AddRange(Subgroups.ToArray());

            AllChilds.AddRange(Items.ToArray());

 

        }

        public int MyProperty { get; set; }

        public int MyProperty2 { get; set; }

        public int MyProperty3 { get; set; }

        public int MyProperty4 { get; set; }

        public int MyProperty5 { get; set; }

        public string GroupName { get; set; }

        public List<IData> AllChilds { get; set; }

        public List<Group> Subgroups { get; set; }

        public List<Item> Items { get; set; }

 

    }

    public class Item: IData

    {

        public int MyProperty { get; set; }

        public int MyProperty2 { get; set; }

        public int MyProperty3 { get; set; }

        public int MyProperty4 { get; set; }

        public int MyProperty5 { get; set; }

 

        public string GroupName

        {

            get { return null; }

            set { }

        }

 

        public List<IData> AllChilds

        {

            get { return null; }

            set { }

        }

    }
      

    public class MyViewModel

    {

        public List<IData> Children { get; set; }

    }

Nou let's use a RadTreeListView in a USerControl

<UserControl x:Class="RadControlsSilverlightApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:local="clr-namespace:RadControlsSilverlightApp1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <UserControl.Resources>
        <local:MyViewModel x:Key="ViewModel"/>
        <local:RowStyleSelector x:Key="RowStyleSelector"/>
    </UserControl.Resources>
  <Grid x:Name="LayoutRoot" DataContext="{StaticResource ViewModel}">
        <telerik:RadTreeListView ItemsSource="{Binding Path=Children}" RowStyleSelector="{StaticResource RowStyleSelector}">
            <telerik:RadTreeListView.ChildTableDefinitions>
                <telerik:TreeListViewTableDefinition ItemsSource="{Binding AllChildren}"/>
            </telerik:RadTreeListView.ChildTableDefinitions>
            <telerik:RadTreeListView.Columns>
                <telerik:GridViewDataColumn Header="MyProperty" DataMemberBinding="{Binding Path=MyProperty}"/>
                <telerik:GridViewDataColumn Header="MyProperty1" DataMemberBinding="{Binding Path=MyProperty1}"/>
                <telerik:GridViewDataColumn Header="MyProperty2" DataMemberBinding="{Binding Path=MyProperty2}"/>
                <telerik:GridViewDataColumn Header="MyProperty3" DataMemberBinding="{Binding Path=MyProperty3}"/>
                <telerik:GridViewDataColumn Header="MyProperty4" DataMemberBinding="{Binding Path=MyProperty4}"/>
                <telerik:GridViewDataColumn Header="MyProperty5" DataMemberBinding="{Binding Path=MyProperty5}"/>
            </telerik:RadTreeListView.Columns>
        </telerik:RadTreeListView>
  </Grid>
</UserControl>

Note that ItemsSource is a List<IData>, and TreeListViewTableDefinition has as itemsSource the AllChildren property definied in IData.
A RowStyleSelecor is needed, it looks as following:

public class RowStyleSelector: StyleSelector
    {
        public override Style SelectStyle(object item, DependencyObject container)
        {
            if (item is Group)
                return Application.Current.Resources["GroupRowStyle"] as Style;
            return base.SelectStyle(item, container);
        }
    }

Easy selector, I want rows with Group instances to look without cells, just a TextBlock with the GroupName. So I must provide a GroupRowStyle an modify the RowTemplate. As all you know, the GridViewRowTemplate has a lot of xaml, the best option is, using blend, editing the RadTreeListView RowStyle. What I did was editing the RowStyle at the App.xaml (so it's avaliable via Application.Resources) with a "GroupRowStyle" key. I won't copy all the xaml, is a lot of code. Jus the key to not show the cells is substitute the DataCellsPresenter named "PART_DataCellsPresenter" by a ContentPresenter as follows:

<ContentPresenter VerticalAlignment="Center" DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource TemplatedParent}}" Content="{Binding GroupName}" Grid.Column="3" />

Easy, now, rows with Group instances will not show cells, just the GroupName. Of course, a more xaml work is neede to give the "GroupRowStyle" a nice look.

I0d like to attach the example solution, but zip o rar are not allowed types.

[Veselin Vasilev]

Hi Daní,

I invite you to attach the zip file (containing the runnable sample project) in our code-libraries section.
This way the community will benefit from your application, and you will receive up to 10 000 Telerik Points.

Thank you for your efforts.

Greetings,
Veselin Vasilev
the Telerik team

[Sudharshanan]

Please post the Silverlight 3 TreeListView samples. With xaml design for grid and subgrids.

Thanks
Sudhar

[Vlad]

Hello,

 The Silverlight 3 version of our treelist was discontinued. 

Sincerely yours,
Vlad
the Telerik team