TreeListView, GridView or none of them

8 posts, 0 answers
  1. Daní
    Daní avatar
    303 posts
    Member since:
    Feb 2008

    Posted 04 Aug 2010 Link to this post

    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?
  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 04 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Daní
    Daní avatar
    303 posts
    Member since:
    Feb 2008

    Posted 04 Aug 2010 Link to this post

    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.
  5. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 10 Aug 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Daní
    Daní avatar
    303 posts
    Member since:
    Feb 2008

    Posted 17 Sep 2010 Link to this post

    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:local="clr-namespace:RadControlsSilverlightApp1"
        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.
  7. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 17 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Sudharshanan
    Sudharshanan avatar
    1 posts
    Member since:
    Oct 2010

    Posted 10 Nov 2010 Link to this post

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

    Thanks
    Sudhar
  9. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 10 Nov 2010 Link to this post

    Hello,

     The Silverlight 3 version of our treelist was discontinued. 

    Sincerely yours,
    Vlad
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
DevCraft banner