Skip to content

Commit 4bf7101

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 3b60d3b commit 4bf7101

File tree

17 files changed

+531
-87
lines changed

17 files changed

+531
-87
lines changed

‎docs-aspnet-core/helpers/tag-helpers/colorpicker.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: ColorPicker
3+
page_title: ColorPicker | Telerik UI for ASP.NET Core Tag Helpers
4+
description: "Learn the basics when working with the ColorPicker tag helper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
previous_url: /aspnet-core/helpers/colorpicker
6+
slug: taghelpers_colorpicker_aspnetcore
7+
---
8+
9+
# ColorPicker Tag Helper Overview
10+
11+
The ColorPicker tag helper helps you configure the Kendo UI ColorPicker widget in ASP.NET Core applications.
12+
13+
## Basic Usage
14+
15+
The following example demonstrates how to define the ColorPicker by using the ColorPicker tag helper.
16+
17+
###### Example
18+
19+
<kendo-colorpicker name="picker">
20+
<messages apply="Change" cancel="Close" />
21+
</kendo-colorpicker>
22+
23+
## Configuration
24+
25+
The ColorPicker tag helper configuration options are passed as attributes of the tag and through nested tags (`<messages>`).
26+
27+
###### Example
28+
29+
```tab-cshtml
30+
31+
@(Html.Kendo().ColorPicker()
32+
.Name("picker")
33+
.Value("#fff")
34+
.Messages(m => m.Apply("Change").Cancel("Close"))
35+
.Events(events => events.Select("preview"))
36+
)
37+
```
38+
```tab-tagHelper
39+
40+
<kendo-colorpicker name="picker" value="#fff" on-select="preview">
41+
<messages apply="Change" cancel="Close" />
42+
</kendo-colorpicker>
43+
```
44+
45+
The ColorPalette tag helper configuration options are passed as attributes of the tag and through nested tags (`<tile-size>`).
46+
47+
###### Example
48+
49+
```tab-cshtml
50+
51+
@(Html.Kendo().ColorPalette()
52+
.Name("palette")
53+
.Columns(4)
54+
.TileSize(s => s.Width(34).Height(19))
55+
.Palette(new string[] {
56+
"#f0d0c9", "#e2a293", "#d4735e", "#65281a",
57+
"#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
58+
"#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
59+
"#e1dca5", "#d0c974", "#a29a36", "#514d1b",
60+
"#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
61+
})
62+
.Events(events => events.Change("preview"))
63+
)
64+
```
65+
```tab-tagHelper
66+
67+
@{
68+
string[] colorPickerPalette = new string[] {
69+
"#f0d0c9", "#e2a293", "#d4735e", "#65281a",
70+
"#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
71+
"#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
72+
"#e1dca5", "#d0c974", "#a29a36", "#514d1b",
73+
"#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
74+
};
75+
}
76+
<kendo-colorpalette name="palette" columns="4" on-change="preview" palette-colors="colorPickerPalette">
77+
<tile-size height="19" width="34" />
78+
</kendo-colorpalette>
79+
```
80+
81+
## See Also
82+
83+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
84+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
85+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects on Linux]({% slug gettingstartedlinux_aspnetmvc6_aspnetmvc %})
86+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/helpers/tag-helpers/combobox.md‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,9 @@ The ComboBox tag helper configuration options are passed as attributes of the ta
3535
.Filter(FilterType.Contains)
3636
.AutoBind(false)
3737
.MinLength(3)
38-
.DataSource(source =>
39-
{
40-
source.Read(read =>
41-
{
42-
read.Action("GetProducts", "Home");
43-
})
44-
.ServerFiltering(true);
45-
})
38+
.DataSource(source => source
39+
.Read(read => read.Action("GetProducts", "Home"))
40+
)
4641
)
4742
```
4843
```tab-tagHelper
@@ -53,18 +48,12 @@ The ComboBox tag helper configuration options are passed as attributes of the ta
5348
datavaluefield="ProductID"
5449
auto-bind="false"
5550
min-length="3" style="width: 100%;">
56-
<datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
51+
<datasource type="DataSourceTagHelperType.Custom">
5752
<transport>
58-
<read url="@Url.Action("GetProducts", "Home")" data="onAdditionalData" />
53+
<read url="@Url.Action("GetProducts", "Home")" />
5954
</transport>
6055
</datasource>
6156
</kendo-combobox>
62-
63-
<script>
64-
function onAdditionalData() {
65-
return kendo.ui.ComboBox.requestData(jQuery("#products"));
66-
}
67-
</script>
6857
```
6958

7059
## See Also

‎docs-aspnet-core/helpers/tag-helpers/dialog.md‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,34 +14,58 @@ The Dialog tag helper helps you configure the Kendo UI Dialog widget in ASP.NET
1414

1515
The following example demonstrates how to define the Dialog by using the Dialog tag helper.
1616

17+
> **Important**
18+
>
19+
> A change in the Dialog's tags has been introduced in R1 2018, in order to allow more complex configuration of the widget. Previously it was possible to nest content directly within the `<kendo-dialog>` tag, since R1 2018 content must be nested within a `<content>` tag.
20+
1721
###### Example
1822

19-
<kendo-dialog name="dialog1">Dialog contents</kendo-dialog>
23+
<kendo-dialog name="dialog1">
24+
<content>Dialog contents</content>
25+
</kendo-dialog>
2026

2127
## Configuration
2228

23-
The Dialog tag helper configuration options are passed as attributes of the tag. Its content is placed between the opening and closing tags.
29+
The Dialog tag helper configuration options are passed as attributes of the tag. Its content is placed within a `<content>` tag.
2430

2531
###### Example
2632

2733
```tab-cshtml
2834
@(Html.Kendo().Dialog()
2935
.Name("dialog")
3036
.Title("Software Update")
31-
.Content("Do you agree terms and conditions?")
37+
.Content("<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>")
3238
.Modal(false)
39+
.Actions(actions =>
40+
{
41+
actions.Add().Text("Skip this version");
42+
actions.Add().Text("Remind me later");
43+
actions.Add().Text("Install update").Primary(true);
44+
})
3345
.Events(ev => ev.Close("dialog_close"))
3446
)
3547
```
3648
```tab-tagHelper
37-
<kendo-dialog name="dialog" title="Software Update" closable="false" modal="false"
38-
content="Do you agree terms and conditions?" on-close="dialog_close">
39-
</kendo-dialog>
49+
<kendo-dialog name="dialog" title="Software Update" modal="false" on-close="dialog_close">
50+
<content>
51+
<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>
52+
</content>
53+
<actions>
54+
<action text="Skip this version">
55+
</action>
56+
<action text="Remind me later">
57+
</action>
58+
<action primary="true" text="Install update">
59+
</action>
60+
</actions>
61+
</kendo-dialog>
4062
```
4163

42-
> **Important**
43-
>
44-
> The Dialog tag helper does not provide options for adding actions. For more information on how to work around this limitation, refer to the demo on using the [Razor syntax helper method](http://demos.telerik.com/aspnet-core/dialog/index).
64+
Simple content can be set through the `content` attribute:
65+
66+
###### Example
67+
68+
<kendo-dialog name="dialog" title="Software Update" content="Some content"></kendo-dalog>
4569

4670
## See Also
4771

‎docs-aspnet-core/helpers/tag-helpers/dragdrop.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Drag and Drop
3+
page_title: Drag and Drop | Telerik UI for ASP.NET Core Tag Helpers
4+
description: "Learn the basics when working with the Drag and Drop tag helper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
previous_url: /aspnet-core/helpers/dragdrop
6+
slug: taghelpers_dragdrop_aspnetcore
7+
---
8+
9+
# Drag and Drop Tag Helper Overview
10+
11+
The Drag and Drop tag helper helps you configure the Kendo UI Drag and Drop widget in ASP.NET Core applications.
12+
13+
## Basic Usage
14+
15+
The following example demonstrates how to define the Drag and Drop by using the Drag and Drop tag helper.
16+
17+
###### Example
18+
19+
<div id="droptarget" class="k-header"
20+
kendo-droptarget="true"
21+
on-kendo-dragenter="droptargetOnDragEnter"
22+
on-kendo-dragleave="droptargetOnDragLeave"
23+
on-kendo-drop="droptargetOnDrop" >Drag the small circle here.</div>
24+
<div id="draggable"
25+
kendo-draggable="true"
26+
kendo-hint="draggableHint"
27+
on-kendo-dragstart="draggableOnDragStart"
28+
on-kendo-dragend="draggableOnDragEnd"></div>
29+
30+
## See Also
31+
32+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
33+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
34+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects on Linux]({% slug gettingstartedlinux_aspnetmvc6_aspnetmvc %})
35+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/helpers/tag-helpers/dropdownlist.md‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,9 @@ The DropDownList tag helper configuration options are passed as attributes of th
3232
.DataValueField("ProductID")
3333
.HtmlAttributes(new { style = "width:100%;" })
3434
.Filter(FilterType.Contains)
35-
.DataSource(source =>
36-
{
37-
source.Read(read =>
38-
{
39-
read.Action("GetProducts", "Home");
40-
})
41-
.ServerFiltering(true);
42-
})
35+
.DataSource(source => source
36+
.Read(read => read.Action("GetProducts", "Home"))
37+
)
4338
)
4439
```
4540
```tab-tagHelper
@@ -49,18 +44,12 @@ The DropDownList tag helper configuration options are passed as attributes of th
4944
datatextfield="ProductName"
5045
datavaluefield="ProductID"
5146
style="width: 100%;">
52-
<datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
47+
<datasource type="DataSourceTagHelperType.Custom">
5348
<transport>
54-
<read url="@Url.Action("GetProducts", "Home")" data="onAdditionalData" />
49+
<read url="@Url.Action("GetProducts", "Home")" />
5550
</transport>
5651
</datasource>
5752
</kendo-dropdownlist>
58-
59-
<script>
60-
function onAdditionalData() {
61-
return kendo.ui.DropDownList.requestData(jQuery("#products"));
62-
}
63-
</script>
6453
```
6554

6655
## See Also

‎docs-aspnet-core/helpers/tag-helpers/maskedtextbox.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: MaskedTextBox
3+
page_title: MaskedTextBox | Telerik UI for ASP.NET Core Tag Helpers
4+
description: "Learn the basics when working with the MaskedTextBox tag helper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
previous_url: /aspnet-core/helpers/maskedtextbox
6+
slug: taghelpers_maskedtextbox_aspnetcore
7+
---
8+
9+
# MaskedTextBox Tag Helper Overview
10+
11+
The MaskedTextBox tag helper helps you configure the Kendo UI MaskedTextBox widget in ASP.NET Core applications.
12+
13+
## Basic Usage
14+
15+
The following example demonstrates how to define the MaskedTextBox by using the MaskedTextBox tag helper.
16+
17+
###### Example
18+
19+
<kendo-maskedtextbox name="ssn" mask="000-00-0000" value="003-12-3456"></kendo-maskedtextbox>
20+
21+
## Configuration
22+
23+
The MaskedTextBox tag helper configuration options are passed as attributes of the tag.
24+
25+
###### Example
26+
27+
```tab-cshtml
28+
29+
@(Html.Kendo().MaskedTextBox()
30+
.Name("phone_number")
31+
.Mask("(999) 000-0000")
32+
.Value("555 123 4567")
33+
)
34+
```
35+
```tab-tagHelper
36+
37+
<kendo-maskedtextbox name="phone_number" mask="(999) 000-0000" value="555 123 4567"></kendo-maskedtextbox>
38+
```
39+
40+
## See Also
41+
42+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
43+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
44+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects on Linux]({% slug gettingstartedlinux_aspnetmvc6_aspnetmvc %})
45+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/helpers/tag-helpers/multiselect.md‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,9 @@ The MultiSelect tag helper configuration options are passed as attributes of the
3232
.DataValueField("ProductID")
3333
.HtmlAttributes(new { style = "width:100%;" })
3434
.Filter(FilterType.Contains)
35-
.DataSource(source =>
36-
{
37-
source.Read(read =>
38-
{
39-
read.Action("GetProducts", "Home");
40-
})
41-
.ServerFiltering(true);
42-
})
35+
.DataSource(source => source
36+
.Read(read => read.Action("GetProducts", "Home"))
37+
)
4338
)
4439
```
4540
```tab-tagHelper
@@ -49,18 +44,12 @@ The MultiSelect tag helper configuration options are passed as attributes of the
4944
datatextfield="ProductName"
5045
datavaluefield="ProductID"
5146
style="width: 100%;">
52-
<datasource type="DataSourceTagHelperType.Custom" server-filtering="true">
47+
<datasource type="DataSourceTagHelperType.Custom">
5348
<transport>
54-
<read url="@Url.Action("GetProducts", "Home")" data="onAdditionalData" />
49+
<read url="@Url.Action("GetProducts", "Home")" />
5550
</transport>
5651
</datasource>
5752
</kendo-multiselect>
58-
59-
<script>
60-
function onAdditionalData() {
61-
return kendo.ui.MultiSelect.requestData(jQuery("#products"));
62-
}
63-
</script>
6453
```
6554

6655
## See Also

0 commit comments

Comments
 (0)