unexpected view in treetimeline

Hello! Let’s we have tree structure (see tree.png) and 2 cases:

in first case every object has events only one type, accordingly treetimeline view (see smallTreeView.png), and

y_unit_original = { key : 1000000, open : true, label : "Group", children : [ { label : "Subgroup", key : 2000000, open : true, children : [ { label : "Object 1", key : 1 }, { label : "Object 2", key : 2 } ] }, { label : "Object 3", key : 3 } ] }
It’s expected view.

In second case every object has 2 types events, accordingly treetimeline view (bigTreeView.png), and

y_unit_original = { key : 1000000, open : true, label : "Group", children : [ { label : "Subgroup", key : 2000000, open : true, children : [ { label : "Object 1", key : 1, open : true, children : [ { label : "event type 1", key : 10001 }, { label : "event type 2", key : 20001 } ] }, { label : "Object 2", key : 2, open : true, children : [ { label : "event type 1", key : 10002 }, { label : "event type 2", key : 20002 } ] } ] }, { label : "Object 3", key : 3, open : true, children : [ { label : "event type 1", key : 10003 }, { label : "event type 2", key : 20003 } ] } ] }
I think it’s unexpected view and I think expected view is correctBigTree.png

Isn’t it?






correct view.


Hello,

The way how each level is displayed is configured in the CSS. Each label is using ‘dhx_scell_levelx’ class, where x is the level of the item (from 0).
In your case ‘event type 1’ of ‘Object 1’ is 4th level section and uses ‘dhx_scell_level3’ class. In dhtmlxscheduler_ext.css we have specified styles only for 1-3 levels (dhx_scell_level0 - dhx_scell_level2).
So in your case you have to add additional CSS class to make it work (4th level section should have event greater padding-left).

For example:

.dhx_matrix_scell .dhx_scell_level3{ padding-left: 50px; }
Best regards,
Ilya

Thanks! It works.