Treeview - Scrolling and Scrollbars not correct

[Rob ONeill]

Hi,

When using the Treeview inside a div that has a css property of overflow to auto, height and width set it doesn't to use the scrollbars as expected. If the vertical scrollbar is activated you cannot see the horizontal scrollbar until vertical scrollbar has scrolled to the bottom. Also with keyboard navigation as you scroll down the treeview if the active node is below the scroll area height the scrolling does not follow it.

This is not the same when implementing a normal <ul> list.

See example ... http://jsplayground.syncfusion.com/Sync_uzgaiwu5

Cheers ... Rob.

[Piramanayagam Ramakrishnan]

Hi Rob,

Thanks for contacting Syncfusion support.

We have analysed your query. We can achieve your requirement (Need to move the scroller while navigate TreeView node using keyboard navigation) in sample level. The Element.scrollIntoView() method scrolls the current element into the visible area of the browser window. We can use this method in TreeView keyPress event to achieve your requirement. Please refer the below code sample.

[Script]

$("#treeview").ejTreeView({

    width: "100%",

    height: "100%",

    keyPress: function (args) {

        args.currentElement && args.currentElement.find("a.e-text")[0].scrollIntoView(false); //the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor

    }

});

For your reference, we have prepared a sample based on your requirement in the link: http://jsplayground.syncfusion.com/nvlj3uci

Please let us know whether the provided sample is helpful in achieving your requirement. If not, get back to us with more information for us to assist you.

Regards,
Piramanayagam R

[Rob ONeill]

Hi,

The keyboard navigation is ok but the scrollbars are still out of sync.

"When using the Treeview inside a div that has a css property of overflow to auto, height and width set it doesn't to use the scrollbars as expected. If the vertical scrollbar is activated you cannot see the horizontal scrollbar until vertical scrollbar has scrolled to the bottom"

Cheers ... Rob.

[Piramanayagam Ramakrishnan]

Hi Rob, 

 

Thanks for your update. 

 

We would like to inform you that, TreeView control have scroller support when we specify the width and height property to it. You can make use of these property for displaying scroller when TreeView content exceed the specified width or height. Please refer the below code sample, 

 

[Script] 

 

$("#tree1").ejTreeView({ 

    showCheckbox: true, 

    allowEditing: true, 

    width: "100%", 

    height: "100%", 

    keyPress: function (args) { 

        args.currentElement && args.currentElement.find("a.e-text")[0].scrollIntoView(false); //the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor 

    } 

}); 

 

 

For your reference we have prepared the sample in the link: http://jsplayground.syncfusion.com/siuos4b2 

 

If you want to display the scroller in parent element instead of displaying TreeView then, you need to override the CSS property of TreeView control like below in your sample. 

 

[Style] 

 

.e-treeview.e-js { 

    overflow: visible; 

} 

 

  

For your reference we have prepared the sample based on your requirement (“When using the Treeview inside a div that has a css property of overflow to auto, height and width set it doesn't to use the scrollbars as expected”) in the link: http://jsplayground.syncfusion.com/i4zwwrgg 

 
Please let us know whether the provided sample is helpful in achieving your requirement. If not, get back to us with more information for us to assist you. 

 

Regards, 

Piramanayagam R