How to use TreeLayout with GraphLinkModel

I am using GridLayout with Groups, Nodes and Links. Model that I used is GraphLinkModel.
I want to re-arrange all the groups as per tree layout.

Is there a reason you can’t use a TreeLayout as the Diagram.layout to lay out those three nodes?

I can use TreeLayout. But my implementation uses GridLayout because I want the groups to flow from left to right in one row only.
Now I want on click of a button : All Groups to rearrange themselves in Tree Fashion so that the Links make more sense.

OK, so it sounds like your button wants to set Diagram.layout to be an instance of TreeLayout.

The Fishbone Layout sample demonstrates three HTML buttons each determining a different layout.

How can I use GraphLinkModel in tree layout ?
I have many properties in data for link. I have many link specific feature based on data prop of link.

Model types and layouts are completely independent of each other.

If your GraphLinksModel happens to have data in it that defines a tree-structured graph, then a TreeLayout will probably do a good job laying out the nodes of the diagram.

If you have a lot of data properties on your link data, that’s fine. You can choose to use them in Bindings on elements of your Link template. Or you could even use multiple Link templates.