How to populate radtreeview hierarchically

[Jerry]

I have a oracle procedure that returns the following data from a user search

First column is a checkbox

ckbx  Label     Name    Year    Category    Type
          Label1    Name1   2020    Cat1        Type1
          Label2    Name2   2020    Cat1        Type1
          Label3    Name3   2021    Cat2        Type1  
          Label4    Name4   2022    Cat3        Type2
         Label5    Name5   2021    Cat4        Type3
         Label6    Name6   2021    Cat4        Type3
  
  
Hierarchical display (Type, Category, Year, Label, Name)
Type1
    |_Cat1
         |_2020
              |_ckbx Label1 Name1
              |_ckbx Label2 Name2          
    |_Cat2
          |_2021
                |_ckbx Label3 Name3
Type2
    |_Cat3
          |_2022
                |_ckbx Label4 Name4
Type3
    |_Cat4
          |_2021
                |_ckbx Label5 Name5
                |_ckbx Label6 Name6

This will allow the user to click only the type they want to see values returned then be able to check the box and add to their cart the data they want to download.

 

I'm using VS 2019 professional, C#, and Oracle DB 19c, telerik tools are from 2020_1_114_dev_hotfix for asp.net

 

thank you

[Attila Antal]

Hi Jerry,

The hierarchical structure you have described rather looks like Grouping items by certain fields. I'm afraid the TreeView component does not have that functionality.

The Grid has grouping functionality that may work for your case. See RadGrid Grouping demo.

You can group the items, first by type, then by category, and finally by year.

This is how the table would look with the Grouping

 

The full code:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource" AllowMultiRowSelection="true">
    <MasterTableView AutoGenerateColumns="false" DataKeyNames="ID">
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="Type" />
                </GroupByFields>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="Type" FormatString="{0}" HeaderText=" " HeaderValueSeparator="" />
                </SelectFields>
            </telerik:GridGroupByExpression>

            <telerik:GridGroupByExpression>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="Category" />
                </GroupByFields>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="Category" FormatString="{0}" HeaderText=" " HeaderValueSeparator="" />
                </SelectFields>
            </telerik:GridGroupByExpression>

            <telerik:GridGroupByExpression>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="Year" />
                </GroupByFields>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="Year" FormatString="{0}" HeaderText=" " HeaderValueSeparator="" />
                </SelectFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>

        <Columns>
            <telerik:GridClientSelectColumn></telerik:GridClientSelectColumn>
            <telerik:GridBoundColumn DataField="Label" HeaderText="Label"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Name" HeaderText="Name"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
    </ClientSettings>
</telerik:RadGrid>

<script runat="server">
    protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
    {
        var data = new List<MyItem>();

        data.Add(new MyItem() { Id = 1, Label = "Label1", Name = "Name1", Year = 2020, Category = "Cat1", Type = "Type1" });
        data.Add(new MyItem() { Id = 2, Label = "Label2", Name = "Name2", Year = 2020, Category = "Cat1", Type = "Type1" });
        data.Add(new MyItem() { Id = 3, Label = "Label3", Name = "Name3", Year = 2021, Category = "Cat2", Type = "Type1" });
        data.Add(new MyItem() { Id = 4, Label = "Label4", Name = "Name4", Year = 2022, Category = "Cat3", Type = "Type2" });
        data.Add(new MyItem() { Id = 5, Label = "Label5", Name = "Name5", Year = 2021, Category = "Cat4", Type = "Type3" });
        data.Add(new MyItem() { Id = 6, Label = "Label6", Name = "Name6", Year = 2021, Category = "Cat5", Type = "Type3" });

        (sender as RadGrid).DataSource = data;
    }

    public class MyItem
    {
        public int Id { get; set; }
        public string Label { get; set; }
        public string Name { get; set; }
        public int Year { get; set; }
        public string Category { get; set; }
        public string Type { get; set; }
    }
</script>

 

If you wanted to have that for the TreeView, you would have to setup the parent-child relation between items using the ID and ParentID fields. Every node must be a separate item.

This would be the table structure you would need to have

This is how it would be presented

 

Full Code:

<telerik:RadTreeView ID="RadTreeView1" runat="server" DataFieldID="ID" DataFieldParentID="ParentID" DataTextField="Text"></telerik:RadTreeView>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            var data = new List<MyItem>();

            data.Add(new MyItem() { ID = 1, ParentID = null, Text = "Type1" });
            data.Add(new MyItem() { ID = 2, ParentID = null, Text = "Type2" });
            data.Add(new MyItem() { ID = 3, ParentID = null, Text = "Type3" });
            data.Add(new MyItem() { ID = 4, ParentID = 1, Text = "Cat1" });
            data.Add(new MyItem() { ID = 5, ParentID = 1, Text = "Cat2" });
            data.Add(new MyItem() { ID = 6, ParentID = 2, Text = "Cat3" });
            data.Add(new MyItem() { ID = 7, ParentID = 3, Text = "Cat4" });
            data.Add(new MyItem() { ID = 8, ParentID = 4, Text = "2020" });
            data.Add(new MyItem() { ID = 9, ParentID = 5, Text = "2021" });
            data.Add(new MyItem() { ID = 10, ParentID = 6, Text = "2022" });
            data.Add(new MyItem() { ID = 11, ParentID = 7, Text = "2021" });
            data.Add(new MyItem() { ID = 12, ParentID = 8, Text = "Label1 Name1" });
            data.Add(new MyItem() { ID = 13, ParentID = 8, Text = "Label2 Name2" });
            data.Add(new MyItem() { ID = 14, ParentID = 9, Text = "Label3 Name3" });
            data.Add(new MyItem() { ID = 15, ParentID = 10, Text = "Label4 Name4" });
            data.Add(new MyItem() { ID = 16, ParentID = 11, Text = "Label5 Name5" });
            data.Add(new MyItem() { ID = 17, ParentID = 11, Text = "Label6 Name6" });

            RadTreeView1.DataSource = data;
            RadTreeView1.DataBind();
        }
    }

    public class MyItem
    {
        public int ID { get; set; }
        public int? ParentID { get; set; }
        public string Text { get; set; }
    }
</script>

 

I hope this will prove helpful.

 

Regards,
Attila Antal
Progress Telerik