Representing hierarchical data .net winforms

Question

Hello all

How i can represent the following hierarchical data ? What control should be used , if possible example will help.

-node 
-----node1 - -data--data --data
-------------node111 -- data -- data
-------------node112 -- data -- data
-------------node113 -- data -- data
-----node2 - -data--data --data
-------------node1121 -- data -- data
-----node3 - -data--data --data

and if possible i need to put in most of the cells several icons .

I have found this tutorial Link , can someone support me more information ?

Is that possible if yes how ?

Thanks a lot .

Answer 1

One way might be to create a derived TreeNode object, force it to contain a List<data> :

// requires declaration of : using System.Windows.Forms;

// sample data class
public class data
{
    public string Name;
    public int ID;
}

public class XTreeNode : TreeNode
{
    List<data> theData = new List<data>();

    public XTreeNode(string theNodeID)
    {
        this.Text = theNodeID;
    }

    public void addData(data newData)
    {
        theData.Add(newData);
    }
}

Here's a (not elegant) sample of what building an instance of the above data structure might look like (on a WinForm) : assume you have a TreeView, named 'treeView1 on the Form :

    XTreeNode currentNode;
    data currentData;

    for (int i = 0; i < 10; i++)
    {
        // create the node and add it to the 'treeView1
        currentNode = new XTreeNode(i.ToString());
        treeView1.Nodes.Add(currentNode);

        // add some data entries to the List<data> of the derived TreeNode
        currentData = new data {Name = "one", ID = 100};
        currentNode.addData(currentData);

        currentData  = new data { Name = "two", ID = 200 };
        currentNode.addData(currentData);

        currentData = new data { Name = "three", ID = 300 };
        currentNode.addData(currentData);

        // sample of adding a child node
        currentNode.Nodes.Add(new XTreeNode((i * 100).ToString()));
    }

For the question of how you woud visually display the List<data> associated with each Node : the usual way would be to combine the Treeview with a ListView, and synchronize their locations and item heights : then display the List<data> on the same "row" as the corresponding TreeNode.

Of course you can implement your own Node and NodeCollection entities which are completely independent of any control : this example presents a mixed-case of relying on a .NET control to serve as both data structure and presentation mechanism.

There's an excellent example of a combination TreeView/ListView on CodeProject that has been maintained, updated, and extended, for years : Phillip Piper's : "A Much Easier to Use ListView", first published 2006, last update October, 2009 : its functionality is so rich that if compares favorably, imho, with commercial components.

Answer 2

The built-in Windows Forms controls aren't great for this. What you're actually looking for is a tree-grid hybrid control (AKA multi-column tree view or TreeList).

DevExpress has an XtraTreeList, which is what I use (not free), and is probably the closest to what you're asking for. Telerik's GridView can also display grid data in a hierarchical fashion if you set up the groupings right.

If those prices are too steep, you might try FlexibleTreeView. Or if you desperately need something free, check out this CodeProject page: Advanced TreeView for .NET. It's going to be a lot more quirky and difficult to use than the commercial products, but it will do the job.

Note that I'm assuming that the data is uniform, that you basically want to display the same data for every node in the hierarchy. If the data is heterogeneous (completely different columns depending on the type of node or level), what you actually want to use is a hierarchical GridView. You can get those from the same publishers listed above. I'm not aware of any half-decent free version.

Answer 3

Yes, this can be done with IntegralUI TreeView. The solution is to create a table template for each node with three cells in which you can add data. I have created a simple demo which creates a table where:

• First cell has a text
• Second cell has two icons
• Third cell has a Button control

To keep the table layout structure, I set that table will have the whole width of the node (100%). In this way when TreeView is resized, the table is also resized. See a screenshot:

Note Each node can have its own custom layout. So you can create different templates for different group of nodes.

Here is the code:

Just place a Button, IntegralUI TreeView control and an ImageList component with some images on the Form.

    private void button1_Click(object sender, EventArgs e)
    {
        this.treeView1.SuspendUpdate();

        CreateNode(null, 0);

        this.treeView1.ResumeUpdate();
    }

    private void CreateNode(LidorSystems.IntegralUI.Lists.TreeNode parentNode, int level)
    {
        if (level == 3)
            return;

        int imgIndex1 = 0;
        int imgIndex2 = 1;
        LidorSystems.IntegralUI.Lists.TreeNode node = null;
        String content = String.Empty;

        for (int i = 0; i < 3; i++)
        {
            node = new LidorSystems.IntegralUI.Lists.TreeNode(string.Format("Node {0}", level.ToString() + i.ToString()));

            Button btn = new Button();
            btn.Size = new Size(50, 22);
            btn.Text = node.Text;
            node.Controls.Add(btn);

            imgIndex1 = i % 4;
            imgIndex2 = imgIndex1 + 1;

            content = "<div><table width=\"100%\"><tr>";
            content += "<td width=\"30%\">" + node.Text + "</td>";
            content += "<td width=\"30%\"><img index=\"" + imgIndex1.ToString() + "\"></img><img index=\"" + imgIndex2.ToString() + "\"></img></td>";
            content += "<td width=\"40%\"><control index=\"0\"></control></td></tr></table></div>";
            node.Content = content;

            CreateNode(node, level + 1);

            if (parentNode == null)
                this.treeView1.Nodes.Add(node);
            else
                parentNode.Nodes.Add(node);
        }
    }

For more uniform data presentation, you can use the TreeListView control.