Adaptiveness
The Kendo UI for Angular Grid includes advanced adaptiveness features that dynamically adjust its layout and rendering to suit different screen sizes. This ensures a seamless and user-friendly experience across devices.
By default, the Grid adapts its internal tools and layout to maintain usability and visual appeal, even in constrained spaces. This adaptive behavior enhances the Grid's functionality, making it intuitive and efficient for users on any device.
The Grid adaptiveness extends to its built-in controls and tools, ensuring they render optimally in adaptive mode. You can customize this behavior by setting the adaptiveMode property to one of the supported values in the AdaptiveMode union.
Adaptive Grid Elements
When you enable the adaptiveness of the Grid, the component intuitively adjusts its elements to provide an optimal user experience across different screen sizes. This adaptive behavior ensures that the Grid remains functional, easy to interact with, and visually appealing, even in constrained layouts.
The following Grid tools support adaptive rendering, each transforming appropriately based on the available space:
- Filter Menu
- Column Menu
- Sort Toolbar Tool
- Filter Toolbar Tool
- Group Toolbar Tool
- Column Chooser Toolbar Tool
Each of these elements maintains full functionality while adapting its presentation to be more appropriate for the current viewport size, ensuring consistent usability regardless of the device.
Adaptive Filter Menu
The Adaptive Filter Menu adjusts its layout to ensure a user-friendly filtering experience across different screen sizes.
The following example demonstrates how the filter menu adapts to various screen sizes.
Adaptive Column Menu
The Adaptive Column Menu modifies its design to provide an intuitive and user-friendly experience for managing columns on devices with varying screen dimensions.
The following example illustrates the column menu's ability to adjust seamlessly to different screen sizes, ensuring an optimal user experience.
Adaptive Sort Toolbar Tool
The Adaptive Sort Toolbar Tool modifies its design to deliver an intuitive sorting experience tailored to various screen dimensions.
The following example demonstrates how the sort toolbar tool adapts to various screen sizes.
Adaptive Filter Toolbar Tool
The Adaptive Filter Toolbar Tool adjusts its layout to provide a seamless filtering experience tailored to various screen sizes.
The following example demonstrates how the filter toolbar tool adapts to different screen dimensions.
Adaptive Group Toolbar Tool
The Adaptive Group Toolbar Tool transforms its rendering to provide a seamless grouping experience across various screen sizes.
The following example demonstrates how the group toolbar tool adapts to different screen sizes.
Adaptive Column Chooser Toolbar Tool
The Adaptive Column Chooser Toolbar Tool adjusts its layout to ensure an intuitive and efficient column selection experience across various screen sizes.
The following example showcases how the column chooser toolbar tool adjusts its layout to accommodate various screen sizes effectively.
Adaptive Editing
The Grid adaptive editing feature ensures that the editing interface remains user-friendly and accessible on all devices. When the adaptiveMode is enabled, the editing popup automatically adjusts its layout and presentation based on the screen size:
- On small screens, the editing form appears as a full-screen action sheet, making it easy to focus on editing without distractions.
- On medium screens, the editing form is displayed as a docked action sheet at the bottom of the screen.
- On large screens, the standard Dialog editing form is used.
This adaptive behavior guarantees a consistent and efficient editing experience, regardless of the device or screen size.
The following example demonstrates the adaptiveness of the editing feature in action.
Adaptive Breakpoints
In adaptive mode, the Grid component automatically adapts to the current screen size and changes its rendering accordingly:
- On medium-sized screens, the Grid displays its tools as a docked to the bottom action sheet.
- On smaller screens, the Grid tools appear in a full-screen action sheet.
- In all other scenarios, including when the parameter is not set or is set to its default value of
'none', standard popup rendering is used.
The adaptive mode changes the rendering of the popup element of the Grid based on 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.