Changing layout based on tree

How do I achieve a changing layout when I click on a tree node?

Lets say a have a tree with news, books and customers. The main layout has a tree in a cell on the left and on the right side I’d like to place the layouts based on these categories:

  • for news 2 cells, one with a grid, one with a form
  • for books only one grid in one cell
  • for customers 3 cells, two with a grid, one with a form.

So I’d like to change the “content layout” dynamicly when I click on a node. How is the logic for this example meant to be implemented? Does the visual designer support this?

You may use views: … yout_views

Here is the sample dhtmlxLayout/samples/01_init/09_views.html ( … views.html )

Thanks Alexandra!

Can I also attach a Layout or multiple cells to a cell?


  • click on tree node 1 shows cells b and c
  • click on tree node 2 shows only cell b …

There could be 2 views:

1 view - layout “1C”
2 view - layout “2E” or “2U”

I guess this can’t be achieved within the DHTMLX Designer? I can’t find a way to add multiple layouts to a cell.

Yes, designer doesn’t support views. Please see view documentation and sample: … views.html

Instead of grid and tree there could be 1c layout and 2e layout