HierarchicalDataTemplate in ASP.NET Treeview?

[Peter]

I'm working on a project for a client, where the app I'm building will serve to edit an XML file consumed by a live application. The application is written in Flash, and quite unstable, so I am kind of stuck with the less than optimal XML setup.

The XML is made up (simplified) like the following:

<MenuItem id="1" label="category1">
   <Description>Description for Category 1</Description>
   <Image>Image for category 1</Image>
   <Item label ="Category1Item1">
      <Price>12.99</Price>
      <Type>Wood</Type>
      <additionalElementsHere />
   </Item>
   <Item label ="Category1Item2">
      <Price>112.99</Price>
      <Type>Stone</Type>
      <additionalElementsHere />
   </Item>
   <AdditionalItemsHere />
</MenuItem>
<AdditionMenuITemsHere />

 

 

I've been using a Telerik treeview bound to an XMLDataSource to display the data and allow users to interact with it (add/delete nodes, move nodes by means of drag and drop, or copy nodes and the underlying elements). So far, so good.

Now my client would like to know if it is somehow possible to use the <Type> Element of the Item elements as grouping containers.

So currently the treeview looks like this:

category1
--Category1Item1
--Category1Item2

And ideally, it should end up looking like this:

category1
--Wood
----Category1Item1
----Category1Item123
--Stone
----Category1Item2
----Category1Item456

 

I read up on HierarchicalDataTemnplates, but have not managed to figure out if these work in the ASP.NET controls supplied by Telerik. I would like to try and stick to what I have so far, as many hours of work have already gone into the product so far.

I'd appreciate it if someone could point me in the right direction of how to tackle this particular issue.

Thanks in advance :)

Peter

[Bozhidar]

Hello Peter,

Unfortunately RadTreeView for ASP .NET doesn't support HierarchicalDataTemplates. With the structure of the data that you have, the only possible way to achieve the layout that you've specified is to manually rearrange the TreeView once it's bound  on the server. If the categories are the first level of nodes and you've bound the Type of the item to the Value property, it should look something like this:

protected void Page_Load(object sender, EventArgs e)
{
    RadTreeView1.DataBind();
    RearangeTreeView(RadTreeView1);
}

private void RearangeTreeView(RadTreeView tree)
{
    foreach (RadTreeNode category in tree.Nodes)
    {
        List<RadTreeNode> itemTypes = new List<RadTreeNode>();
        foreach (RadTreeNode categoryItem in category.Nodes)
        {
            var type = itemTypes.FirstOrDefault(x => x.Text == categoryItem.Value);
            if (type == null)
            {
                type = new RadTreeNode(categoryItem.Value);
                itemTypes.Add(type);
            }

            type.Nodes.Add(categoryItem);
        }

        category.Nodes.Clear();
        category.Nodes.AddRange(itemTypes);
    }
}

 
All the best,
Bozhidar
the Telerik team

[Peter]

Hi Bozhidar, and thanks for your reply.

Unfortunately, I limited my treeview to a depth of 2 only, and have the DataTextField set to label. Thus, I do not see anything below the <Item label ="Category1Item1">  node. I increased the depth, but now am not really sure how to read out the node, seeing I lack a label attribute that copntains the material type, and I am not sure how I can get the TreeView to store additonal data from the XML file (Like the innerText of the type labels, which is what I'd need).

I can pick between id and label, and that seems to be about it.

Thanks.

Peter

[Bozhidar]

Hello Peter,

Unfortunately I'm not quite sure I understand your requirements. In order for me to provide a specific solution  I need to get a deeper understanding of the issue. Could you provide a sample page demonstrating the problem ( xml file included ). Also, please specify the way the treeview appears now, as well as the desired outcome.
 
Greetings,
Bozhidar
the Telerik team

[Peter]

Thanks for the reply. I actually went ahead and added label attributes to the Type elements, containing the value that's found in the element value. I'll have to hope that this will not break the application that relies on the XML file, but I'll cross that bridge when I get there.

This at least allows me to add the Type elements in the Treeview. I'm now revising the original code you supplied to meet my exact criteria, but am fairly confident I'll get it to work.

Thanks so much for your assistance :)

Peter