• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Adaptive Rendering

The DropDownTree provides an option for enabling adaptive rendering for the popup element. This functionality allows the component to adapt to the screen size by providing different rendering of the popup element based on the screen dimensions.

The Adaptive Mode changes the rendering of the popup element of the DropDownTree as per the screen resolution of the device (the horizontal value in px) with the following breakpoints:

  • Small screens - up to 500px—Displays a full-screen action sheet.
  • Medium screens - between 500px and 768px—Displays a popup as an action sheet pinned to the bottom of the screen.
  • Large screens - larger than 768px—Displays a popup as an animation container attached to the main element of the component.

To enable the adaptive rendering, set the adaptive property of the DropDownTree to true.

To set the title of the dialog window rendered when the DropDownTree is opened on a smaller screen, set the adaptiveTitle property of the component.

Resize the browser to see how the DropDownTree adapts to different resolutions.

Example
View Source
Change Theme:

In this article

Not finding the help you need?