Skip to content

Latest commit

 

History

History
119 lines (88 loc) · 5.74 KB

adaptive-rendering.md

File metadata and controls

119 lines (88 loc) · 5.74 KB
title page_title description slug tags published position
Adaptive Rendering
Adaptive Rendering
Explore how the components with popup elements can react to the changes in the
adaptive-rendering
telerik,blazor,adaptive,rendering,mobile
true
1

Adaptive Rendering

Telerik UI for Blazor supports adaptive rendering for the components that incorporate popup elements. This functionality allows the component to adapt to the screen size by providing different rendering of the popup element based on the screen dimensions.

caption In this article:

Supported Components

The adaptive rendering functionality is supported by the following components:

  • AutoComplete
  • ColorPicker
  • ComboBox
  • DatePicker
  • DateRangePicker
  • DateTimePicker
  • DropDownList
  • MultiColumnComboBox
  • MultiSelect
  • TimePicker

Basics

To enable the adaptive rendering use the AdaptiveMode parameter. It takes a member of the AdaptiveMode enum:

  • None (default)
  • Auto

Optionally, you may set the Title and Subtitle parameters to provide custom header and subtitle text for the popup on small and medium devices.

caption Enable the adaptive rendering

````RAZOR // NOTE: The configurations below includes only the DropDownList, but it is applicable to all of the above listed components

// Adapts to the screen size to use the appropriate rendering. <TelerikDropDownList ... AdaptiveMode="@AdaptiveMode.Auto" Title="Select item"... />


## Rendering Specifics

When you set the `AdaptiveMode` to `Auto`, the component will take the screen size into consideration to use the appropriate rendering. The different rendering targets the popup element of the component and how it will be displayed to the user.

Three breakpoints define the rendering options as follows:

@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)

|| **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. |

## Customize the Default Adaptive Breakpoints

You can customize the [above-listed default adaptive breakpoints](#rendering-specifics) at the root level by configuring the [`<TelerikRootComponent>`](slug:rootcomponent-overview). To specify your desired breakpoints:

1. Wrap the content of the `<TelerikRootComponent>` (`@Body` and potentially other elements) in `<ChildContent>` tag.
1. Add the `<RootComponentSettings>` component inside the [`<TelerikRootComponent>`](slug:rootcomponent-overview).
1. Add the `<RootComponentAdaptiveSettings>` component inside the `<RootComponentSettings>` tag and configure its properties:

@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)

| Parameter | Type | Description |
| ----------- | ----------- | ----------- |
| `Small` | `int` <br/> (`500`) | The upper boundary of the small threshold. Sets the `max-width` of the small media query in `px`. |
| `Medium` | `int` <br/> (`768`) | The upper boundary of the medium threshold. Sets the `max-width` of the medium media query in `px`.|

>caption Customize the default adaptive breakpoints

<div class="skip-repl"></div>
````RAZOR
@* The below configuration sets the following thresholds:
- Small: 0 to 400px
- Medium: 401px to 900px
- Large: over 900px *@

    <TelerikRootComponent>
        <RootComponentSettings>
            <RootComponentAdaptiveSettings Small="400" Medium="900"></RootComponentAdaptiveSettings>
        </RootComponentSettings>
        <ChildContent>
             @Body
        </ChildContent>
    </TelerikRootComponent>

Limitations

Some of the supported components allow custom values, for example, ComboBox and MultiColumnComboBox. Using custom values with AdaptiveMode.Auto is currently not supported. To expedite the development of this feature, vote for the related feature request in the Blazor Feedback Portal: Support for custom values in AdaptiveMode.

See also