TreeView working with flexbox

[Randy]

Hi,

I'm trying to display a TreeView inside a div. The intention is that the TreeView can take all the available spaces left besides other controls.

HTML (properties on other controls are omitted):

<div class="container">
    <div class="topbar">
        <div style="padding-top: 1.03125em">
            <kendo-dropdownlist [data]="configs">
            </kendo-dropdownlist>
        </div>
        <div>
            <kendo-textbox-container>
                <input kendoTextBox>
            </kendo-textbox-container>
        </div>
    </div>
    <div class="maincontent">
        <div>
            <kendo-treeview [nodes]="data" textField="text" kendoTreeViewExpandable kendoTreeViewSelectable
                kendoTreeViewHierarchyBinding childrenField="items">
            </kendo-treeview>
        </div>
        <div>
            <kendo-grid [data]="dwgs" class="view-container"></kendo-grid>
        </div>
    </div>
</div>

 

CSS:

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.topbar {
  display: flex;
}

.topbar > div {
  flex: 1;
}

.maincontent {
  display: flex;
  flex: 1;
}

.maincontent > div {
  flex: 1;
  padding: 0.5em 0;
}

.view-container {
  height: 100%;
}

 

The problem is when tree node is expanded, when the total height exceeds the available heights, it seems the <ul> DOM inside kendo-treeview will extends the height of kendo-treeview and so does the div wrapping it. As a result the scroll bar of the outer most div (class="container") is enabled, instead of the scroll bar of kendo-treeview itself. This leads to that the whole section to be scrolled but not tree view only. I've tried many css settings but failed to restrict the scroll bar to be inside tree view only. The scroll bar of the tree view will be shown only when the height of the kendo-treeview is set fixed as px, which I don't want to since I prefer it to be self-adjusted.

So how should I make the tree view scroll bar to work instead of triggering the scroll bar of the outer most div?

Thanks in advance.

[Dimitar]

Hello Randy,

In order to use the TreeView with a scroll bar, some height constraints will have to be applied - there is no way to work-around this. If the height of the component is not restricted, it will always be displayed in its full height, and a scroll bar will be applied in the first parent container that allows for it.

An option for you is to set the height of the component dynamically. Refer to this example where the initial component height is set as inline height style. Another way to tackle the problem is to set as TreeView height its parent container height. In any case, applying the height style value programmatically seems like the most straight-forward solution.

Let me know if further assistance on the topic is required.

Regards,
Dimitar
Progress Telerik

[Randy]

Hi Dimitar,

Thank you for the explanation and example, that makes sense.

However I was lucky to come up with another css approach to acheive the expected, though not very elegant.

Add another css class (folderTree) in the div wrapping treeview:

<div class="folderTree">
    <kendo-treeview [nodes]="data" textField="text" kendoTreeViewExpandable kendoTreeViewSelectable
        kendoTreeViewHierarchyBinding childrenField="items">
    </kendo-treeview>
</div>

 

Then define the css styles:

.mainContent .folderTree {
  display: flex;
  flex-direction: column;
}

.mainContent .folderTree > kendo-treeview {
  flex: 1;
  height: 100px; /* this is essential for the tree view to display its own scroll */
}

:host ::ng-deep .k-treeview > .k-group {
  height: 100%;
}

 

The height setting in the 2nd style is the tricky part. It can be set as value that small enough, but a fixed one, so the flexbox and treeview can work together to make scroll bar appears in treeview. If the window shrink to a height smaller than this, again the scroll bar will appear in its parent container. I'm not quite sure how flexbox and treeview deal with it but I guess this set the "height constraints" you mentioned.

Thanks,

Randy

[Dimitar]

Hello Randy,

I'm glad you found a more suitable solution to your problem. Hopefully this approach will reach other people that have bumped into the same issue.

Just keep in mind that the ::ng-deep selector has been deprecated for a while now, and it will be removed at some point. So you should consider moving that code to your global CSS file. A common approach is to target the specific TreeView with a specific class so that the styles don't leak to other TreeViews throughout the app. 

<div class="folderTree">
    <kendo-treeview class="treeview-flex-container"></kendo-treeview>
</div>

.treeview-flex-container.k-treeview > .k-group {
  height: 100%;
}

If further information is required, feel welcome to write back.

Regards,
Dimitar
Progress Telerik

[Randy]

Hi Dimitar,

Thank you for the suggestion. Will update accordingly.

Thanks,

Randy