Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
480
WebDataTree inside DropDown: Scroll nodes into view
posted

Hi,

I have a WebDataTree inside a WebDropDown in my application. Our customer requires to be able to move inside the tree using the arrow keyboards. This works fine out of the box, but if the content of the tree is too big for the dropdown and creates a scroll it doesn't bring the selected nodes into view when moving down with the arrow keys.

I'm trying to implement it using the client side SelectionChanged event and the scrollIntoView function but havent been able to make it work.

I attach an example of the situation.

Many thanks in advance.

TreeDemo.rar
Parents
No Data
Reply
  • 480
    posted

    UPDATE:

    I managed to get the scroll to work using this code in the ActivationChanged client event:

    function activationChanged(sender, args) {

       setTimeout(function () {

            sender._activeNode.get_element().scrollIntoView();

        }, 200);
    }

    I needed the timeout because the dropdown was closing for some reason when selecting a node.

    However the scrollIntoView is executing every single time, even when clicking an element in the middle of the dropdown and scrolls the element to the top. Our client is extremely picky with this kind of behaviours and I'm sure will complain about this.

    Is there a way to perform the scroll only when it's needed?

    Many thanks in advance.

Children