Tree List View

Use it wherever data has both a hierarchy and several facts per row: a project plan with owners, due dates and progress, a file system with sizes and dates, a chart of accounts with balances, a bill of materials with quantities and costs. It is a DataGridView underneath, so fonts, cell styles, column sizing, selection and editing work as they do in any grid.

Columns

Add the columns before any rows. Exactly one column should be a BinaryTreeListViewColumn: that column carries the tree – the indent, the expand glyph, the connecting lines and the node's image or check box. It can be at any position. The other columns can be any DataGridViewColumn, including the editing columns made for this control: BinaryTreeListViewDatePickerColumn, BinaryTreeListViewNumericUpDownColumn, BinaryTreeListViewComboBoxColumn, BinaryTreeListViewOffice2007ColorPickerColumn, BinaryTreeListViewExtendedTextBoxColumn and BinaryTreeListViewNumericExtendedTextBoxColumn.

Nodes

Every row is a BinaryTreeListViewNode. Build the tree through Nodes, never through the grid's own rows: Nodes.Add(...) takes one value per column, in column order, and returns the new node, whose own BinaryTreeListViewNode.Nodes takes its children the same way. A node starts collapsed; call BinaryTreeListViewNode.Expand() or ExpandAllNodes to open it. Keep your own object with the row in Tag. To build the tree from a table instead, set HierarchicalDataSource to a DataTable whose first three columns are UID, ID and ParentID.

Expanding and collapsing

The user opens and closes a node by clicking its glyph, by double-clicking the tree cell (ExpandCollapseNodeOnDoubleClick), and with Shift+Right and Shift+Left (ExpandCollapsingOfNodesLevel). Each change raises BinaryTreeListViewNodeExpanding or BinaryTreeListViewNodeCollapsing first, which can cancel it or – for expanding – add the children at that moment, and then BinaryTreeListViewNodeExpanded or BinaryTreeListViewNodeCollapsed. Rows that are inside a collapsed node are not in the grid at all, so the grid's row indices count only the rows on show.

Sorting

Turn on AllowUserToSortColumns and a click on a heading sorts by that column, a second click reverses it and a third puts the original order back; SortNodesByColumn does the same from code. Siblings are sorted within their parent at every level, so the tree keeps its shape. The grid's own column sorting is not used: every column is made NotSortable as it is added.

Editing

Cells are edited as in any grid, starting the way CellEditingMode says – set that rather than DataGridView.EditMode, which the control switches as the user clicks between the tree's glyph area and the text. F2 always starts an edit. The special editing columns show their editor's chrome – a spinner, a drop-down button, a colour swatch – on every row while SpecialColumnCellsToDisplayEditingControlOnCellsAlways is on, so the grid reads as a form.

Appearance

The connecting lines are drawn in LineDrawingColor and LineDrawingDashStyle, or not at all (DrawNodeConnectingLines). The expand glyph is the system tree glyph unless both ExpandImage and CollapseImage are set. Each node shows an image (NodeImage, BinaryTreeListViewNode.Image), or a check box or radio button (SetUpNodeControlType). UseBuiltInRendering paints the headings and rows in gradients, and ShouldDrawFrame gives the control a rounded border with a soft shadow.

Drag and drop

With EnableAutomaticBuiltInDragDrop on, the user can drag a node, with everything beneath it, onto another node to make it that node's child, or onto the empty area below the last row to make it a top-level node. For your own drag and drop, set Control.AllowDrop and handle ItemDrag.

A project plan on a form, built in code. The first column is the tree; the others show an owner, a due date that edits with a calendar, and progress that edits with a spinner. Each node keeps its WorkItem in Tag.

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
using Binarymission.WinForms.Controls.TreeControls;

public sealed class WorkItem
{
    public string Title { get; set; }
    public string Owner { get; set; }
    public DateTime Due { get; set; }
    public decimal PercentDone { get; set; }
}

public sealed class ProjectPlanForm : Form
{
    private readonly BinaryTreeListView plan = new BinaryTreeListView();
    private readonly Label status = new Label();

    public ProjectPlanForm()
    {
        Text = "Website relaunch";
        ClientSize = new Size(820, 460);

        plan.Dock = DockStyle.Fill;
        plan.AllowUserToSortColumns = true;
        plan.LineDrawingColor = Color.Silver;
        plan.LineDrawingDashStyle = DashStyle.Dot;
        plan.ShouldDrawFrame = true;
        plan.FrameFocusedBorderColor = Color.SteelBlue;

        // Columns first: the tree column, then one column per fact.
        plan.Columns.Add(new BinaryTreeListViewColumn { Name = "Task", HeaderText = "Task", FillWeight = 260 });
        plan.Columns.Add(new DataGridViewTextBoxColumn { Name = "Owner", HeaderText = "Owner" });
        plan.Columns.Add(new BinaryTreeListViewDatePickerColumn { Name = "Due", HeaderText = "Due", Format = BinaryDatePickerFormat.Short });
        plan.Columns.Add(new BinaryTreeListViewNumericUpDownColumn { Name = "Done", HeaderText = "Done %", Maximum = 100 });

        BinaryTreeListViewNode design = AddTask(plan.Nodes, new WorkItem { Title = "Design", Owner = "Priya Shah", Due = new DateTime(2026, 11, 6), PercentDone = 60 });
        AddTask(design.Nodes, new WorkItem { Title = "Wireframes", Owner = "Priya Shah", Due = new DateTime(2026, 10, 23), PercentDone = 100 });
        AddTask(design.Nodes, new WorkItem { Title = "Visual design", Owner = "Tom Hughes", Due = new DateTime(2026, 11, 6), PercentDone = 20 });

        BinaryTreeListViewNode build = AddTask(plan.Nodes, new WorkItem { Title = "Build", Owner = "Ana Costa", Due = new DateTime(2026, 12, 11), PercentDone = 10 });
        AddTask(build.Nodes, new WorkItem { Title = "Checkout", Owner = "Ana Costa", Due = new DateTime(2026, 12, 4), PercentDone = 0 });

        plan.ExpandAllNodes();

        // Keep a summary task open while it still has work outstanding.
        plan.BinaryTreeListViewNodeCollapsing += (sender, e) =>
        {
            e.Cancel = ((WorkItem)e.Node.Tag).PercentDone < 100;
        };

        plan.SelectionChanged += (sender, e) =>
        {
            BinaryTreeListViewNode node = plan.CurrentNode;
            status.Text = node == null ? string.Empty : ((WorkItem)node.Tag).Title + " - " + ((WorkItem)node.Tag).Owner;
        };

        status.Dock = DockStyle.Bottom;
        Controls.Add(plan);
        Controls.Add(status);
    }

    private static BinaryTreeListViewNode AddTask(BinaryTreeListViewNodesCollection nodes, WorkItem item)
    {
        // One value per column, in column order.
        BinaryTreeListViewNode node = nodes.Add(item.Title, item.Owner, item.Due, item.PercentDone);
        node.Tag = item;
        return node;
    }
}