A simple model to hold the data:

Then, a ViewModel can show and create data defined by that model:

I hook up the newly created Gantt-wrapper that has this text to describe its requirements:

A list column with the name TreeNodes.

Each TreeNode should have Column1 and Column2 to display in the grid.

TreeNodes can also have an association TimeItems; each TimeItem should have Start,Stop(DateTime), Text(string), and Color(int).

TreeNodes can also have an association TreeNodes to sub TreeNodes; these tree nodes should also have Column1, 2, and TimeItems.

To allow for a TimeItem to move from one row to another, add an Action column on TimeItem named MoveToNewRow; also declare a viewmodel variable vNewRow of the type your class representing the TimeItem has.

You can then implement the move in the Action execute expression; vNewRow.SomeTimeItem.add(self)

We need to read and understand to make our ViewModel fit the need of the rather complex UI control. If we follow these guidelines, we get data shown in the control – bound by WPF-databinding:

We can do things like select and move, resize, switch rows, edit texts in the tree, etc.

The Gantt control also supports Windows 8 gestures.

To find out how to create overrides and components in AngularJS, look here.