Scrollable DropDownTree

[Douglas]

I am trying to implement scrolling within a DropDownTree KendoReact component. So far, I am not seeing that this is possible, but am hoping there is a solution or workaround. Does anyone have suggestions?

We are basically implementing a large list of selectable items to a user (may also change to a MultiSelectTree to make this work), but due to the number of items we have, the vertical height goes off the page.

 

I did find a forum post from a while back here that makes it seem like maybe this feature is to be implemented come January 2024, but am not positive.

[Wissam]

Hi, Douglas,

I would suggest using the popupSetting property of the component which allows you to set a className to the Popup using the popupClass prop.

In the class, you can set the height to a specific value, where if the dropdown items are larger than the set height, a vertical scrollbar will appear:

• https://stackblitz.com/edit/react-ndxgwx?file=app%2Fmain.tsx

Please check the above example, and let me know if this solution matches what you need.

Regarding the forum post, it is related the Kendo UI for jQuery DropDownTree, but for the KendoReact component this functionality is possible.

Regards,
Wissam
Progress Telerik

[Douglas]

Thank you so much for that assistance! It seems to work perfectly for how we desired. I had tried utilizing the popupSettings before but was unsuccessful in getting it to trigger - the class name triggered it, I did not know I needed that.

[Wissam]

You are welcome, Douglas. I am really glad that my reply was helpful to you.

[Douglas]

Hello, I am reaching back out to see if maybe you could still further help me. I am trying to make the styling a bit more dynamic for screen size. So, for example, I am passing in a parent height element through props (unsure if this is the best way, but it is *a* way) and then trying to use that height as part of the height in the styling for the popup. Do you have any suggestions on how to achieve this?

I tried just putting in the variable within the style like below, but that did not seem to do anything.

height: {parentHeight} * .8;

I am now working on creating a styles variable outside that style tag and then apply it as such, but still struggling to find that solution..

[Wissam]

Hi, Douglas,

If the `parentHeight` is passed as props and is being updated, this will require setting it to a state variable and setting it in a `useEffect` hook such that `parentHeight` is in the dependency array.

const MyDropDownTree = (props) => {
  const [parentHeight, setParentHeight] = React.useState(props.parentHeight);
  React.useEffect(()=> {
    setParentHeight(props.parentHeight);
  }, [props.parentHeight])
}

Like this, you can pass the `parentHeight` state variable to the `height` style where parentHeight gets updated when the props are updated.

Since you are looking for a dynamic popup height, I can also suggest checking the adaptive feature of the DropDownList which sets the popup width, height, and position based on the screen width:

• https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdowntree/adaptive-rendering/

I hope this helps, but please let me know if you have any further questions.

Regards,
Wissam
Progress Telerik

[Douglas]

Sorry, I meant like the drop-down aspect of the dialog popup. We did apply adaptive to the popup dialog itself and that stays a consistent and good height/width. But without the style class you assisted me with creating, the dropdown aspect of the popup went off-screen.

I ended up finding two solutions in the meantime - I was able to successfully pass in and utilize a variable to determine height, but then I also ended up going with using a percentage of vh to determine height of the dropdown popup piece which seems to ensure it does not go off-screen and stays above the bottom of the screen.

[Filip]

Hi, Douglas,

I created an example using adaptive rendering, however, I was not able to observe the issue with the popup going off-screen:

https://stackblitz.com/edit/react-6huk9p-auyjfm?file=app%2Fmain.jsx

Can you please send us a runnable example that reproduces this undesired behavior so that I can debug it locally see why this is occurring and find a possible solution?

Regards,
Filip

[Douglas]

So an easy replication of this is to just insert a lot of items for the data. For example, I just copied several data objects in tree-data.js and pasted them over and over. After reload of the project, expanding the list makes the DropDownTree go below the size of the screen. In our project, we restrict the main/outer window to be a certain size, so we are unable to scroll in that DropDownTree that went off the page (until Wissam helped provide the scrolling feature). However, I was able to get your project to not remain "above the bottom of the window by X amount" when duplicating the items.

I included a screenshot of your example output. It may be hard to see, but the main window does allow scrolling in itself (versus separate DropDownTree scrolling), so I am able to at least scroll to the bottom of the list. But, the bottom of that tree does hit the bottom of the page without using the vh style I had applied.

[Konstantin Dikov]

Hi Douglas,

If there will be no scrollbar for the main window, you need to ensure that the height of the popup is with such a width that will fit within that height (using the popupSettings for enabling the scrolling within the popup). As for the adaptive rendering, it will have a scrollable container by default, so it will work out-of-the-box even with high number of items.

I do agree that the default popup should also have a fixed max-height with enabled scrolling, so we might consider logging an item for such enhancement.

Nevertheless, if further assistance is needed, please share a stackblitz example demonstrating the remaining issue with the enabled scrolling through the popupSettings.