We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Treeview - Scrolling and Scrollbars not correct

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.

3 Replies

PR Piramanayagam Ramakrishnan Syncfusion Team April 18, 2016 10:30 AM UTC

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



RO Rob ONeill July 12, 2016 02:40 PM UTC

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.


PR Piramanayagam Ramakrishnan Syncfusion Team July 13, 2016 12:00 PM UTC

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 


Loader.
Up arrow icon