Skip to content

Commit c80c90b

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 02ec99a commit c80c90b

File tree

3 files changed

+289
-4
lines changed

3 files changed

+289
-4
lines changed

‎docs-aspnet/styles-and-layout/adaptive-rendering.md‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
---
2+
title: Adaptive Rendering
3+
page_title: Adaptive Rendering
4+
description: "Explore how the {{ site.product }} components that support adaptive mode are rendered based on the screen dimensions."
5+
slug: adaptive_rendering
6+
position: 1
7+
---
8+
9+
# Adaptive Rendering
10+
11+
{{ site.product }} 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.
12+
13+
## Supported Components
14+
15+
The following components support the adaptive rendering functionality:
16+
17+
| **Component** | **Documentation** |
18+
|-----------|---------------|
19+
| AutoComplete | [AutoComplete Adaptive Rendering Mode Documentation]({%slug htmlhelpers_autocomplete_adaptive_mode_aspnetcore%}) |
20+
| ComboBox | [ComboBox Adaptive Rendering Mode Documentation]({%slug htmlhelpers_combobox_adaptive_mode_aspnetcore%}) |
21+
| DatePicker | [DatePicker Adaptive Rendering Mode Documentation]({%slug htmlhelpers_datepicker_adaptive_mode_aspnetcore%}) |
22+
| DateRangePicker | [DateRangePicker Adaptive Rendering Mode Documentation]({%slug htmlhelpers_daterangepicker_adaptive_mode_aspnetcore%}) |
23+
| DateTimePicker | [DateTimePicker Adaptive Rendering Mode Documentation]({%slug htmlhelpers_datetimepicker_adaptive_mode_aspnetcore%}) |
24+
| DropDownList | [DropDownList Adaptive Rendering Mode Documentation]({%slug htmlhelpers_dropdownlist_adaptive_mode_aspnetcore%}) |
25+
| DropDownTree | [DropDownTree Adaptive Rendering Mode Documentation]({%slug htmlhelpers_dropdowntree_adaptive_mode_aspnetcore%}) |
26+
| MultiColumnComboBox | [MultiColumnComboBox Adaptive Rendering Mode Documentation]({%slug htmlhelpers_multicolumncombobox_adaptive_mode_aspnetcore%}) |
27+
| MultiSelect | [MultiSelect Adaptive Rendering Mode Documentation]({%slug htmlhelpers_multiselect_adaptive_mode_aspnetcore%}) |
28+
| TimeDurationPicker | [TimeDurationPicker Adaptive Rendering Mode Documentation]({%slug htmlhelpers_timedurationpicker_adaptive_mode_aspnetcore%}) |
29+
| TimePicker | [TimePicker Adaptive Rendering Mode Documentation]({%slug htmlhelpers_timepicker_adaptive_mode_aspnetcore%}) |
30+
31+
## Basics
32+
33+
To enable the adaptive rendering, use the `AdaptiveMode` option. It takes a member of the [`AdaptiveMode` enum](/api/kendo.mvc.ui/adaptivemode):
34+
35+
* `None` (default)
36+
* `Auto`
37+
38+
>caption Enable the adaptive rendering
39+
40+
```HtmlHelper
41+
// NOTE: The configuration below includes only the DropDownList, but it applies to all components that support adaptive rendering.
42+
43+
// Adapts to the screen size to use the appropriate rendering.
44+
@(Html.Kendo().DropDownList()
45+
.Name("adaptiveDropDown")
46+
.AdaptiveMode(AdaptiveMode.Auto)
47+
... // Additional configuration.
48+
)
49+
```
50+
{% if site.core %}
51+
```TagHelper
52+
@addTagHelper *, Kendo.Mvc
53+
<!--NOTE: The configuration below includes only the DropDownList, but it applies to all components that support adaptive rendering.-->
54+
55+
<!--Adapts to the screen size to use the appropriate rendering.-->
56+
<kendo-dropdownlist name="adaptiveDropDown"
57+
adaptive-mode="AdaptiveMode.Auto">
58+
<!-- Additional configuration.-->
59+
</kendo-dropdownlist>
60+
```
61+
{% endif %}
62+
63+
## Rendering Specifics
64+
65+
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.
66+
67+
Three breakpoints define the rendering options as follows:
68+
69+
|| **Small** | **Medium** | **Large** |
70+
|-------|-------|--------|-------|
71+
**Dimensions** | up to 500px | 501px to 768px | over 768px |
72+
**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. |
73+
74+
## Customizing the Default Adaptive Breakpoints
75+
76+
You can customize the [default adaptive breakpoints](#rendering-specifics) 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:
77+
78+
| **Property** | **Description** |
79+
| ----------- | ----------- |
80+
| `small` | The upper boundary of the small threshold. Sets the `max-width` of the small media query in `px`. |
81+
| `medium` | The lower and upper boundaries of the medium threshold. Sets the `min-width` and `max-width` of the medium media query in `px`.|
82+
| `large` | The lower boundary of the large threshold. Sets the `min-width` of the large media query in `px`.|
83+
84+
Also, you can dynamically modify any of the adaptive breakpoints in your application at runtime by calling the `kendo.setDefaults()` method.
85+
86+
The following example demonstrates how to customize the default breakpoints of the [components with enabled adaptve mode](#supported-components).
87+
88+
```HtmlHelper
89+
@(Html.Kendo().DropDownList()
90+
.Name("adaptiveDropDown")
91+
.DataTextField("Text")
92+
.DataValueField("Value")
93+
.AdaptiveMode(AdaptiveMode.Auto)
94+
.BindTo(new List<SelectListItem>() {
95+
new SelectListItem() {
96+
Text = "Black",
97+
Value = "1"
98+
},
99+
new SelectListItem() {
100+
Text = "Orange",
101+
Value = "2"
102+
},
103+
new SelectListItem() {
104+
Text = "Grey",
105+
Value = "3"
106+
}
107+
})
108+
)
109+
110+
// The below script sets the following thresholds:
111+
// - small: 0 to 600 px (screen width is less than 601 px)
112+
// - medium: 601 px to 1000 px (screen width is between 601 px and 1000 px)
113+
// - large: over 1000 px (screen width is more than 1000 px)
114+
<script>
115+
kendo.setDefaults("breakpoints", {
116+
small: "(max-width: 600px)",
117+
medium: "(min-width: 600.1px) and (max-width: 1000px)",
118+
large: "(min-width: 1000.1px)"
119+
});
120+
</script>
121+
```
122+
{% if site.core %}
123+
```TagHelper
124+
@addTagHelper *, Kendo.Mvc
125+
@{
126+
var color_data = new List<SelectListItem>()
127+
{
128+
new SelectListItem() {
129+
Text = "Black",
130+
Value = "1"
131+
},
132+
new SelectListItem() {
133+
Text = "Orange",
134+
Value = "2"
135+
},
136+
new SelectListItem() {
137+
Text = "Grey",
138+
Value = "3"
139+
}
140+
};
141+
}
142+
143+
<kendo-dropdownlist name="adaptiveDropDown"
144+
adaptive-mode="AdaptiveMode.Auto"
145+
datatextfield="Text"
146+
datavaluefield="Value"
147+
bind-to="color_data">
148+
</kendo-dropdownlist>
149+
150+
// The below script sets the following thresholds:
151+
// - small: 0 to 600 px (screen width is less than 601 px)
152+
// - medium: 601 px to 1000 px (screen width is between 601 px and 1000 px)
153+
// - large: over 1000 px (screen width is more than 1000 px)
154+
<script>
155+
kendo.setDefaults("breakpoints", {
156+
small: "(max-width: 600px)",
157+
medium: "(min-width: 600.1px) and (max-width: 1000px)",
158+
large: "(min-width: 1000.1px)"
159+
});
160+
</script>
161+
```
162+
{% endif %}
163+
164+
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 <a href="https://docs.telerik.com/kendo-ui/api/javascript/kendo/methods/mediaquery" target="_blank">`kendo.mediaQuery()`</a> client-side method, which allows you to handle media queries using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList" target="_blank">MediaQueryList object</a>.
165+
166+
The following example showcases how to dynamically manage the orientation of the [Menu]({% slug htmlhelpers_menu_aspnetcore%}) component depending on the screen size:
167+
168+
* When the screen is up to 600 px wide, the Menu will be rendered vertically.
169+
* When the screen is more than 600 px wide, the Menu will be rendered horizontally.
170+
171+
```HtmlHelper
172+
@(Html.Kendo().Menu()
173+
.Name("navMenu")
174+
.Items(items =>
175+
{
176+
items.Add().Text("Baseball")
177+
.Items(children =>
178+
{
179+
children.Add().Text("Top News");
180+
children.Add().Text("Photo Galleries");
181+
children.Add().Separator(true);
182+
children.Add().Text("Videos Records");
183+
children.Add().Text("Radio Records");
184+
});
185+
186+
items.Add().Text("Golf")
187+
.Items(children =>
188+
{
189+
children.Add().Text("Top News");
190+
children.Add().Text("Photo Galleries");
191+
children.Add().Separator(true);
192+
children.Add().Text("Videos Records");
193+
children.Add().Text("Radio Records");
194+
});
195+
196+
items.Add().Text("Swimming")
197+
.Items(children =>
198+
{
199+
children.Add().Text("Top News");
200+
children.Add().Text("Photo Galleries");
201+
});
202+
})
203+
)
204+
205+
<script>
206+
$(document).ready(function () {
207+
const mediaQueryListener = kendo.mediaQuery('(max-width: 600px)')
208+
.onEnter((e) => { // The logic will be executed when the media query is matched.
209+
var menu = $("#navMenu").getKendoMenu();
210+
menu.setOptions({orientation: "vertical"});
211+
menu.wrapper.css("width", "150px");
212+
})
213+
.onLeave(() => { // The logic will be executed when the media query is not matched.
214+
var menu = $("#navMenu").getKendoMenu();
215+
menu.setOptions({orientation: "horizontal"});
216+
menu.wrapper.css("width", "100%");
217+
});
218+
});
219+
</script>
220+
```
221+
{% if site.core %}
222+
```TagHelper
223+
@addTagHelper *, Kendo.Mvc
224+
225+
<kendo-menu name="navMenu">
226+
<items>
227+
<menu-item text="Baseball">
228+
<sub-items>
229+
<menu-item text="Top News"/>
230+
<menu-item text="Photo Galleries"/>
231+
<menu-item separator="true"></menu-item>
232+
<menu-item text="Videos Records"/>
233+
<menu-item text="Radio Records"/>
234+
</sub-items>
235+
</menu-item>
236+
<menu-item text="Golf">
237+
<sub-items>
238+
<menu-item text="Top News"/>
239+
<menu-item text="Photo Galleries"/>
240+
<menu-item separator="true"></menu-item>
241+
<menu-item text="Videos Records"/>
242+
<menu-item text="Radio Records"/>
243+
</sub-items>
244+
</menu-item>
245+
<menu-item text="Swimming">
246+
<sub-items>
247+
<menu-item text="Top News"/>
248+
<menu-item text="Photo Galleries"/>
249+
</sub-items>
250+
</menu-item>
251+
</items>
252+
</kendo-menu>
253+
254+
<script>
255+
$(document).ready(function () {
256+
const mediaQueryListener = kendo.mediaQuery('(max-width: 600px)')
257+
.onEnter((e) => { // The logic will be executed when the media query is matched.
258+
var menu = $("#navMenu").getKendoMenu();
259+
menu.setOptions({orientation: "vertical"});
260+
menu.wrapper.css("width", "150px");
261+
})
262+
.onLeave(() => { // The logic will be executed when the media query is not matched.
263+
var menu = $("#navMenu").getKendoMenu();
264+
menu.setOptions({orientation: "horizontal"});
265+
menu.wrapper.css("width", "100%");
266+
});
267+
});
268+
</script>
269+
```
270+
{% endif %}
271+
272+
## See also
273+
274+
* [Adaptive Rendering by the AutoComplete for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/autocomplete/adaptive-mode)
275+
* [Adaptive Rendering by the ComboBox for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/combobox/adaptive-mode)
276+
* [Adaptive Rendering by the DatePicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/datePicker/adaptive-mode)
277+
* [Adaptive Rendering by the DateRangePicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/daterangepicker/adaptive-mode)
278+
* [Adaptive Rendering by the DateTimePicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/datetimepicker/adaptive-mode)
279+
* [Adaptive Rendering by the DropDownList for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdownlist/adaptive-mode)
280+
* [Adaptive Rendering by the DropDownTree for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/dropdowntree/adaptive-mode)
281+
* [Adaptive Rendering by the MultiColumnComboBox for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/multicolumncombobox/adaptive-mode)
282+
* [Adaptive Rendering by the MultiSelect for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/multiselect/adaptive-mode)
283+
* [Adaptive Rendering by the TimeDurationPicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/timedurationpicker/adaptive-mode)
284+
* [Adaptive Rendering by the TimePicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/timepicker/adaptive-mode)

‎docs-aspnet/styles-and-layout/cards.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@ page_title: Cards
44
description: Learn how to use the Telerik UI card class to render a flexible content container in {{ site.product }} applications.
55
slug: cards_aspnetmvc6_aspnetmvc
66
previous_url: /knowledge-base/cards
7-
tags: cards, card, container, layout, flexible
8-
res_type: kb
7+
position: 10
98
---
109

10+
# Cards
11+
1112
The Telerik UI Cards for {{ site.framework }} is a set of classes that define flexible content containers.
1213

1314
A card can consist of a header, a body, and actions and can also accommodate images, lists, groups, separators, and more.

‎docs-aspnet/styles-and-layout/components-rendering-overview.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2-
title: Overview
2+
title: Components Rendering
33
page_title: Components Rendering Overview
44
description: "Learn about the rendering of the {{ site.product }} components and their appearance options."
55
slug: components_rendering_overview
66
position: 0
77
---
88

9-
# Components Rendering Overview
9+
# Components Rendering
1010

1111
> * R1 2023 is the last official release of Telerik UI for {{ site.framework }}, where LESS Themes are supported and shipped with the product.
1212
> * With the upcoming R3 2023 release in September, the fonts will no longer be delivered with the Telerik and Kendo UI themes. To continue using the font icons, you must add a separate CDN reference to the font icons stylesheet.

0 commit comments

Comments
 (0)