Adaptiveness
Adaptiveness is an advanced capability that allows you to enhance the Kendo UI for Angular MultiSelectTree to appear in a completely new layout depending on the screen size.
Adaptive Mode
The MultiSelectTree supports an adaptive mode that provides a mobile-friendly rendering of its popup. To enable it set the adaptiveMode input property to auto.
The MultiSelectTree component will automatically adapt to the current screen size and will change its rendering accordingly. On medium-sized screens, the suggestion list will display as a docked to the bottom action sheet, while in smaller screens - a full-screen action sheet will be used. In all other scenarios, including when the parameter has not been set or it has been to its default value of 'none', a standard popup rendering will be used.
The adaptive mode changes the rendering of the popup element of the MultiSelectTree as per the screen resolution of the device (the horizontal value in px) with the following breakpoints:
- Small screens—up to
500px. - Medium screens—between
500pxand768px. - Large screens—larger than
768px.
If you need to customize the default values of the adaptive breakpoints, refer to the Adaptive Settings article.
The following example demonstrates the adaptive mode of the Kendo UI for Angular MultiSelectTree.