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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Treeview - Scrolling and Scrollbars not correct

Thread ID:

Created:

Updated:

Platform:

Replies:

123736 Apr 15,2016 09:36 AM UTC Jul 13,2016 12:00 PM UTC JavaScript 3
loading
Tags: ejTreeView
Rob ONeill
Asked On April 15, 2016 09:36 AM UTC

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 [Syncfusion]
Replied On 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


Rob ONeill
Replied On 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.

Piramanayagam Ramakrishnan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;