Skip to content

Commit e6fac10

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent d4ad7fb commit e6fac10

File tree

69 files changed

+491
-7162
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+491
-7162
lines changed

‎docs-aspnet/_contentTemplates/components-rendering-section.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#components-rendering-section
2+
3+
## Rendering
4+
5+
Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the [Components Rendering Overview]({%slug components_rendering_overview%}) article.
6+
7+
To review the latest rendering of the component, refer to the HTML specifications in the [Kendo UI Themes Monorepo](https://github.com/telerik/kendo-themes/tree/develop). The `tests` folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.
8+
9+
#end

‎docs-aspnet/html-helpers/charts/chart-types/scatter-charts.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,82 @@ The primary Y axis crosses the X axis at point 0 (leftmost). The second, `torque
219219

220220
![{{ site.product_short }} A Scatter Line Chart with customized axis crossing value](../images/chart-scatter-line-axis-crossing-value.png)
221221

222+
## Smooth Scatter Line
223+
224+
By default, the series in the Scatter Line Chart are connected with a straight line.
225+
To display a smooth line, use the [`Style(ChartScatterLineStyle.Smooth)`](/api/kendo.mvc.ui.fluent/chartseriesbuilder#stylekendomvcuichartscatterlinestyle) setting of the `Series` configuration.
226+
227+
```HtmlHelper
228+
@(Html.Kendo().Chart()
229+
.Name("chart")
230+
.SeriesDefaults(seriesDefaults =>
231+
seriesDefaults.ScatterLine().Style(ChartScatterLineStyle.Smooth)
232+
)
233+
.Series(series => {
234+
series.ScatterLine(new int[][] {
235+
new [] {10, 40}, new [] {17, 50}, new [] {22, 70},
236+
new [] {35, 60}, new [] {47, 95}, new [] {60, 100}
237+
})
238+
.Name("1.6C");
239+
})
240+
)
241+
```
242+
{% if site.core %}
243+
```TagHelper
244+
@{
245+
var data = new int[][] {
246+
new [] {10, 40}, new [] {17, 50}, new [] {22, 70},
247+
new [] {35, 60}, new [] {47, 95}, new [] {60, 100}
248+
};
249+
}
250+
<kendo-chart name="chart">
251+
<series>
252+
<series-item style="ChartSeriesStyle.Smooth" type="ChartSeriesType.ScatterLine" name="1.6C" data="data">
253+
</series-item>
254+
</series>
255+
</kendo-chart>
256+
```
257+
{% endif %}
258+
259+
## Pan and Zoom
260+
261+
The Pan and Zoom features enable easy navigation and zoom control within the Scatter Chart to observe the data in different segments and portions according to your preferences.
262+
To enable panning, use the [`Pannable`](/api/kendo.mvc.ui.fluent/chartbuilder#pannablesystemboolean) setting. To turn on the zooming functionality, configure the [`Zoomable`](/api/kendo.mvc.ui.fluent/chartbuilder#zoomablesystemboolean) option.
263+
264+
```HtmlHelper
265+
@(Html.Kendo().Chart()
266+
.Name("chart")
267+
.Series(series => {
268+
series.ScatterLine(new int[][] {
269+
new [] {10, 40}, new [] {17, 50}, new [] {22, 70},
270+
new [] {35, 60}, new [] {47, 95}, new [] {60, 100}
271+
})
272+
.Name("1.6C");
273+
})
274+
.Pannable()
275+
.Zoomable()
276+
)
277+
```
278+
{% if site.core %}
279+
```TagHelper
280+
@{
281+
var data = new int[][] {
282+
new [] {10, 40}, new [] {17, 50}, new [] {22, 70},
283+
new [] {35, 60}, new [] {47, 95}, new [] {60, 100}
284+
};
285+
}
286+
<kendo-chart name="chart">
287+
<series>
288+
<series-item type="ChartSeriesType.ScatterLine" name="1.6C" data="data">
289+
</series-item>
290+
</series>
291+
<pannable enabled="true" />
292+
<zoomable enabled="true">
293+
</zoomable>
294+
</kendo-chart>
295+
```
296+
{% endif %}
297+
222298
## See Also
223299

224300
* [Using the API of the Chart HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/chart-api/index)

‎docs-aspnet/html-helpers/editors/autocomplete/appearance.md‎

Lines changed: 5 additions & 189 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ slug: appearance_autocomplete_aspnetcore
66
position: 2
77
---
88

9-
# AutoComplete Appearance
9+
# Appearance
1010

11-
As of the R1 2022 release, the AutoComplete component uses a new rendering. To learn more about the reasons for this decision, see the [Components Appearance]({% slug components_rendering_overview %}) article.
11+
In this article, you will find information about the styling options and rendering of the {{ site.product }} AutoComplete.
1212

13-
For a live example of the AutoComplete styling options, visit the [AutoComplete Appearance Demo](https://demos.telerik.com/{{ site.platform }}/autocomplete/appearance).
13+
For a live example, visit the [Appearance Demo of the AutoComplete](https://demos.telerik.com/{{ site.platform }}/autocomplete/appearance).
1414

1515
## Options
1616

@@ -232,193 +232,9 @@ The default `FillMode` value is `Solid` and it is applied to the wrapping span e
232232
</span>
233233
```
234234

235-
## Old vs New Rendering
236-
237-
Below you will find the differences between the old and the new rendering.
238-
239-
Wrapper Rendering:
240-
241-
<!-- OLD WRAPPER-->
242-
```html
243-
<span class="k-widget k-autocomplete">
244-
<input id="autocomplete" type="text" class="k-input" placeholder="...">
245-
</span>
246-
```
247-
248-
<!-- NEW WRAPPER -->
249-
```html
250-
<span class="k-autocomplete k-input k-input-md k-rounded-md k-input-solid">
251-
<input type="text" class="k-input-inner" value="..." placeholder="..." />
252-
</span>
253-
```
254-
255-
Popup rendering without virtualization:
256-
257-
<!-- OLD POPUP WITHOUT VIRTUALIZATION-->
258-
```html
259-
<div class="k-list-container k-popup k-group k-reset k-state-border-up" id="products-list" data-role="popup">
260-
[Header template]
261-
<div class="k-group-header">Argentina</div>
262-
<div class="k-list-scroller">
263-
<ul class="k-list k-reset">
264-
<li class="k-item">Patricio Simpson</li>
265-
...
266-
<li class="k-item k-first">
267-
Ann Devon
268-
<div class="k-group">UK</div>
269-
</li>
270-
</ul>
271-
</div>
272-
<div class="k-nodata">
273-
<div>No Data!</div>
274-
</div>
275-
<div class="k-footer">
276-
[Footer template]
277-
</div>
278-
</div>
279-
```
280-
281-
<!-- NEW POPUP WITHOUT VIRTUALIZATION -->
282-
```html
283-
<div class="k-popup k-group k-reset">
284-
<div class="k-list k-list-md">
285-
<div class="k-list-header">
286-
[header template]
287-
</div>
288-
<div class="k-list-group-sticky-header">Argentina</div>
289-
<div class="k-list-content k-list-scroller">
290-
<ul class="k-list-ul">
291-
<li class="k-list-item">
292-
<span class="k-list-item-text">Patricio Simpson</span>
293-
</li>
294-
...
295-
<li class="k-list-item k-first">
296-
<span class="k-list-item-text">Roland Mendel</span>
297-
<div class="k-list-item-group-label">Austria</div>
298-
</li>
299-
...
300-
</ul>
301-
</div>
302-
<div class="k-nodata">
303-
<div>No data found.</div>
304-
</div>
305-
<div class="k-list-footer">
306-
[Footer template]
307-
</div>
308-
</div>
309-
</div>
310-
```
311-
312-
Popup rendering with virtualization:
313-
314-
<!-- OLD POPUP WITH VIRTUALIZATION-->
315-
```html
316-
<div class="k-list-container k-popup k-group k-reset">
317-
<div>
318-
[Header template]
319-
</div>
320-
<div class="k-virtual-wrap">
321-
<div class="k-group-header"></div>
322-
<div class="k-virtual-content">
323-
<ul class="k-list k-reset k-virtual-list">
324-
<li class="k-virtual-item k-item">
325-
Vins et alcools Chevalier
326-
</li>
327-
...
328-
<li class="k-virtual-item k-item">
329-
Toms Spezialitäten
330-
</li>
331-
...
332-
</ul>
333-
<div class="k-height-container">
334-
<div style="height: ....;"></div>
335-
</div>
336-
</div>
337-
</div>
338-
<div class="k-nodata">
339-
<div>No data found.</div>
340-
</div>
341-
<div class="k-footer">
342-
[Footer template]
343-
</div>
344-
</div>
345-
```
346-
347-
<!-- NEW POPUP WITH VIRTUALIZATION-->
348-
```html
349-
<div class="k-popup k-group k-reset">
350-
<div class="k-list k-list-md k-virtual-list">
351-
<div class="k-list-header">
352-
[Header template]
353-
</div>
354-
<div class="k-list-group-sticky-header">Argentina</div>
355-
<div class="k-list-content k-virtual-content">
356-
<ul class="k-list-ul">
357-
<li class="k-list-item">
358-
<span class="k-list-item-text">
359-
Text
360-
</span>
361-
</li>
362-
...
363-
<li class="k-list-item k-first">
364-
<span class="k-list-item-text">
365-
Ernst Handel, Austria
366-
</span>
367-
<div class="k-list-item-group-label">Austria</div>
368-
</li>
369-
...
370-
</ul>
371-
<div class="k-height-container">
372-
<div style="height: ...;"></div>
373-
</div>
374-
</div>
375-
<div class="k-nodata">
376-
<div>No data found.</div>
377-
</div>
378-
<div class="k-list-footer">
379-
[Footer template]
380-
</div>
381-
</div>
382-
</div>
383-
```
384-
385-
## Visual Backwards Compatibility
386-
387-
In order to achieve the same look and feel as the old rendering, the element references must be updated. Visit the [CSS Classes Migration]({% slug components_rendering_overview %}#css-classes-migration) and [JQuery Selectors Migration]({% slug components_rendering_overview %}#jquery-selectors-migration) sections of the [Styling Overview]({% slug components_rendering_overview %}) article for additional information.
388-
389-
>The new styling and rendering supports only the default options when you use a LESS theme.
390-
391-
Previously, a reference to the AutoComplete input element was obtainable through the `k-input` class.
392-
393-
$(".k-input") // Returns a reference to the input element in the old rendering.
394-
395-
With the new rendering, the AutoComplete input element must be targeted by using the k-input-inner class.
396-
397-
$(".k-input-inner") // Returns a reference to the input element in the new rendering.
398-
399-
The following example showcases how to change the background colors of the input and button elements of the **AutoComplete** in both the new, and the old rendering:
400-
401-
```
402-
<style>
403-
/* Doesn't work BEFORE R1 2022 */
404-
.k-input-inner{ /* change the input field style */
405-
background-color:red;
406-
}
407-
.k-list-item{ /* change the style of the items */
408-
background-color:red;
409-
}
410-
411-
/* Doesn't work AFTER R1 2022 */
412-
.k-input{ /* change the input field style */
413-
background-color:red;
414-
}
415-
.k-item{ /* change the style of the items */
416-
background-color:red;
417-
}
418-
</style>
419-
```
235+
@[template](/_contentTemplates/components-rendering-section.md#components-rendering-section)
420236

421237
## See Also
422238

423-
* [Appearance Overview Article]({% slug components_rendering_overview %})
239+
* [Components Appearance Overview]({% slug components_rendering_overview %})
424240
* [Appearance Demo of the AutoComplete](https://demos.telerik.com/aspnet-mvc/autocomplete/appearance)

‎docs-aspnet/html-helpers/editors/checkbox/appearance.md‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
---
22
title: Appearance
3-
page_title: "{{ site.framework }} CheckBox Documentation - CheckBox Appearance"
3+
page_title: Appearance
44
description: "Learn how to customize the appearance of the Telerik UI CheckBox HtmlHelper for {{ site.framework }}."
55
slug: checkbox_appearance
66
position: 2
77
---
88

9-
# CheckBox Appearance
9+
# Appearance
1010

11-
> As of the R1 2022 release, the CheckBox uses a brand new rendering.
12-
13-
In this article, you will find information about the new appearance of the {{ site.product }} CheckBox.
14-
15-
For additional information regarding the decision behind these changes, visit the [Components Rendering](https://docs.telerik.com/{{ site.platform }}/styles-and-layout/components-rendering-overview) article.
11+
In this article, you will find information about the styling options and rendering of the {{ site.product }} CheckBox.
1612

1713
For a live example, refer to the [Appearance Demo of the CheckBox](https://demos.telerik.com/{{ site.platform }}/checkbox/appearance).
1814

@@ -98,7 +94,10 @@ The default value is `Medium` and it is added as a class `k-roundend-md` to the
9894
<input type="checkbox" class="k-checkbox k-roundend-md" id="checkBoxName"/>
9995
```
10096

97+
@[template](/_contentTemplates/components-rendering-section.md#components-rendering-section)
98+
10199
## See Also
102100

101+
* [Components Appearance Overview]({% slug components_rendering_overview %})
103102
* [Appearance of the CheckBox HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/checkbox/appearance)
104103
* [Server-Side API](/api/checkbox)

0 commit comments

Comments
 (0)