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.
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?
Hello Carlos,
Thank you for using our community.
I’m looking at your into this matter for you. I will follow-up with you regarding my findings.
Best Regards, Marina Stoyanova, Software Developer, Infragistics, Inc.
Thank you for the patience.
I have investigated the matter that you pointed out. The workaround that you found seems to be fixing the behavior. When you click on a node it scrolls the element to the top of the scrollable area because of the scrollIntoView default settings. Here you can see what options are available for this methos:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
I can suggest you setting the alignToTop parameter to false, but in this case when you click on an element it will move it to the end bottom of the visible scrolling area:
sender._activeNode.get_element().scrollIntoView(false)
Thanks for looking into it. I already had tried scrollIntoView(false). However it doesn´t seem to work correclty in my case, it scrolls but always leaving the element just below the visible area.
There are some jquery plugins that implement scrollIntoViewIfNeeded(), but I wasn't able to make them work with the WebDropDown.
Best regards.
What I can suggest you to do is to log the behavior with the “scroll into view” as a product idea at http://ideas.infragistics.com, the Product Ideas site allows you to suggest new product features, new functionalities in existing products and controls, and even request new controls and products altogether. Members of the Infragistics Community then vote for the features and suggestions they want to see added to the products, resulting in the most popular features bubbling up to the top.
When planning new releases, our Product Management team will look at the most popular features and use your feedback to prioritize upcoming work.
What is more I would like to inform you that 12.1 version of our control is no longer supported. I suggest you to upgrade your project to one of the latest versions if possible. More information may be found on our product lifecycle page at:
http://www.infragistics.com/help/product-lifecycle/
If you need further assistance, please let me know.