Scrollable DropDownTree

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;

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.

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.

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.

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.