Adaptive Rendering
Telerik UI for ASP.NET Core supports adaptive rendering for the components that incorporate popup elements. This functionality allows the component to adapt to the screen size by rendering the popup element differently based on the screen dimensions.
Supported Components
The following components support the adaptive rendering functionality:
Component | Documentation |
---|---|
AutoComplete | AutoComplete Adaptive Rendering Mode Documentation |
ComboBox | ComboBox Adaptive Rendering Mode Documentation |
DatePicker | DatePicker Adaptive Rendering Mode Documentation |
DateRangePicker | DateRangePicker Adaptive Rendering Mode Documentation |
DateTimePicker | DateTimePicker Adaptive Rendering Mode Documentation |
DropDownList | DropDownList Adaptive Rendering Mode Documentation |
DropDownTree | DropDownTree Adaptive Rendering Mode Documentation |
MultiColumnComboBox | MultiColumnComboBox Adaptive Rendering Mode Documentation |
MultiSelect | MultiSelect Adaptive Rendering Mode Documentation |
TimeDurationPicker | TimeDurationPicker Adaptive Rendering Mode Documentation |
TimePicker | TimePicker Adaptive Rendering Mode Documentation |
Basics
To enable the adaptive rendering, use the AdaptiveMode
option. It takes a member of the AdaptiveMode
enum:
-
None
(default) Auto
Enable the adaptive rendering
// NOTE: The configuration below includes only the DropDownList, but it applies to all components that support adaptive rendering.
// Adapts to the screen size to use the appropriate rendering.
@(Html.Kendo().DropDownList()
.Name("adaptiveDropDown")
.AdaptiveMode(AdaptiveMode.Auto)
... // Additional configuration.
)
@addTagHelper *, Kendo.Mvc
<!--NOTE: The configuration below includes only the DropDownList, but it applies to all components that support adaptive rendering.-->
<!--Adapts to the screen size to use the appropriate rendering.-->
<kendo-dropdownlist name="adaptiveDropDown"
adaptive-mode="AdaptiveMode.Auto">
<!-- Additional configuration.-->
</kendo-dropdownlist>
Rendering Specifics
When the AdaptiveMode
option is set to Auto
, the component considers the screen size to determine the appropriate rendering. The different rendering affects the popup element and how it is displayed to the user.
Three breakpoints define the rendering options as follows:
Small | Medium | Large | |
---|---|---|---|
Dimensions | up to 500px | 501px to 768px | over 768px |
Rendering | The popup is rendered as a fullscreen action sheet. | The popup is rendered as an action sheet docked to the bottom of the screen. | The popup is rendered as an animation container docked to the main element of the component. |
Customizing the Default Adaptive Breakpoints
You can customize the default adaptive breakpoints at the root level by using the kendo.setDefaults()
client-side method. To specify your desired breakpoints, call the kendo.setDefaults()
method by passing a key breakpoints
and a value that contains an object with properties:
Property | Description |
---|---|
small |
The upper boundary of the small threshold. Sets the max-width of the small media query in px . |
medium |
The lower and upper boundaries of the medium threshold. Sets the min-width and max-width of the medium media query in px . |
large |
The lower boundary of the large threshold. Sets the min-width of the large media query in px . |
Also, you can dynamically modify any of the adaptive breakpoints in your application at runtime by calling the kendo.setDefaults()
method.
The following example demonstrates how to customize the default breakpoints of the components with enabled adaptve mode.
@(Html.Kendo().DropDownList()
.Name("adaptiveDropDown")
.DataTextField("Text")
.DataValueField("Value")
.AdaptiveMode(AdaptiveMode.Auto)
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Black",
Value = "1"
},
new SelectListItem() {
Text = "Orange",
Value = "2"
},
new SelectListItem() {
Text = "Grey",
Value = "3"
}
})
)
// The below script sets the following thresholds:
// - small: 0 to 600 px (screen width is less than 601 px)
// - medium: 601 px to 1000 px (screen width is between 601 px and 1000 px)
// - large: over 1000 px (screen width is more than 1000 px)
<script>
kendo.setDefaults("breakpoints", {
small: "(max-width: 600px)",
medium: "(min-width: 600.1px) and (max-width: 1000px)",
large: "(min-width: 1000.1px)"
});
</script>
@addTagHelper *, Kendo.Mvc
@{
var color_data = new List<SelectListItem>()
{
new SelectListItem() {
Text = "Black",
Value = "1"
},
new SelectListItem() {
Text = "Orange",
Value = "2"
},
new SelectListItem() {
Text = "Grey",
Value = "3"
}
};
}
<kendo-dropdownlist name="adaptiveDropDown"
adaptive-mode="AdaptiveMode.Auto"
datatextfield="Text"
datavaluefield="Value"
bind-to="color_data">
</kendo-dropdownlist>
// The below script sets the following thresholds:
// - small: 0 to 600 px (screen width is less than 601 px)
// - medium: 601 px to 1000 px (screen width is between 601 px and 1000 px)
// - large: over 1000 px (screen width is more than 1000 px)
<script>
kendo.setDefaults("breakpoints", {
small: "(max-width: 600px)",
medium: "(min-width: 600.1px) and (max-width: 1000px)",
large: "(min-width: 1000.1px)"
});
</script>
Often, you may need to dynamically adjust the appearance of the components based on the current screen size. In such cases, you can utilize the kendo.mediaQuery()
client-side method, which allows you to handle media queries using the MediaQueryList object.
The following example showcases how to dynamically manage the orientation of the Menu component depending on the screen size:
- When the screen is up to 600 px wide, the Menu will be rendered vertically.
-
When the screen is more than 600 px wide, the Menu will be rendered horizontally.
@(Html.Kendo().Menu() .Name("navMenu") .Items(items => { items.Add().Text("Baseball") .Items(children => { children.Add().Text("Top News"); children.Add().Text("Photo Galleries"); children.Add().Separator(true); children.Add().Text("Videos Records"); children.Add().Text("Radio Records"); }); items.Add().Text("Golf") .Items(children => { children.Add().Text("Top News"); children.Add().Text("Photo Galleries"); children.Add().Separator(true); children.Add().Text("Videos Records"); children.Add().Text("Radio Records"); }); items.Add().Text("Swimming") .Items(children => { children.Add().Text("Top News"); children.Add().Text("Photo Galleries"); }); }) ) <script> $(document).ready(function () { const mediaQueryListener = kendo.mediaQuery('(max-width: 600px)') .onEnter((e) => { // The logic will be executed when the media query is matched. var menu = $("#navMenu").getKendoMenu(); menu.setOptions({orientation: "vertical"}); menu.wrapper.css("width", "150px"); }) .onLeave(() => { // The logic will be executed when the media query is not matched. var menu = $("#navMenu").getKendoMenu(); menu.setOptions({orientation: "horizontal"}); menu.wrapper.css("width", "100%"); }); }); </script>
@addTagHelper *, Kendo.Mvc <kendo-menu name="navMenu"> <items> <menu-item text="Baseball"> <sub-items> <menu-item text="Top News"/> <menu-item text="Photo Galleries"/> <menu-item separator="true"></menu-item> <menu-item text="Videos Records"/> <menu-item text="Radio Records"/> </sub-items> </menu-item> <menu-item text="Golf"> <sub-items> <menu-item text="Top News"/> <menu-item text="Photo Galleries"/> <menu-item separator="true"></menu-item> <menu-item text="Videos Records"/> <menu-item text="Radio Records"/> </sub-items> </menu-item> <menu-item text="Swimming"> <sub-items> <menu-item text="Top News"/> <menu-item text="Photo Galleries"/> </sub-items> </menu-item> </items> </kendo-menu> <script> $(document).ready(function () { const mediaQueryListener = kendo.mediaQuery('(max-width: 600px)') .onEnter((e) => { // The logic will be executed when the media query is matched. var menu = $("#navMenu").getKendoMenu(); menu.setOptions({orientation: "vertical"}); menu.wrapper.css("width", "150px"); }) .onLeave(() => { // The logic will be executed when the media query is not matched. var menu = $("#navMenu").getKendoMenu(); menu.setOptions({orientation: "horizontal"}); menu.wrapper.css("width", "100%"); }); }); </script>
See also
- Adaptive Rendering by the AutoComplete for ASP.NET Core (Demo)
- Adaptive Rendering by the ComboBox for ASP.NET Core (Demo)
- Adaptive Rendering by the DatePicker for ASP.NET Core (Demo)
- Adaptive Rendering by the DateRangePicker for ASP.NET Core (Demo)
- Adaptive Rendering by the DateTimePicker for ASP.NET Core (Demo)
- Adaptive Rendering by the DropDownList for ASP.NET Core (Demo)
- Adaptive Rendering by the DropDownTree for ASP.NET Core (Demo)
- Adaptive Rendering by the MultiColumnComboBox for ASP.NET Core (Demo)
- Adaptive Rendering by the MultiSelect for ASP.NET Core (Demo)
- Adaptive Rendering by the TimeDurationPicker for ASP.NET Core (Demo)
- Adaptive Rendering by the TimePicker for ASP.NET Core (Demo)