Skip to content

Commit 815cf9f

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent a7188b6 commit 815cf9f

Some content is hidden

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

43 files changed

+1436
-294
lines changed

‎docs-aspnet-core/html-helpers/editors/switch/overview.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Overview
3+
page_title: Switch | UI for ASP.NET Core Switch HtmlHelper
4+
description: "Learn the basics when working with the Kendo UI Switch for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: overview_switchhelper_aspnetcore
6+
position: 1
7+
---
8+
9+
# Switch HtmlHelper Overview
10+
11+
The Switch HtmlHelper extension is a server-side wrapper for the [Kendo UI Switch](https://demos.telerik.com/kendo-ui/switch/index) widget.
12+
13+
## Getting Started
14+
15+
### The Basics
16+
17+
Kendo UI Switch is used to display two exclusive choices.
18+
19+
### Configuration
20+
21+
Add the Switch.
22+
23+
###### Example
24+
25+
```
26+
@(Html.Kendo().Switch()
27+
.Name("switch") //The name of the Switch is mandatory. It specifies the "id" attribute of the widget.
28+
.Checked(true)
29+
)
30+
```
31+
32+
## Event Handling
33+
34+
You can subscribe to all Switch [events](https://docs.telerik.com/kendo-ui/api/javascript/ui/switch#events).
35+
36+
### By Handler Name
37+
38+
The following example demonstrates how to subscribe to events by a handler name.
39+
40+
###### Example
41+
42+
```
43+
@(Html.Kendo().Switch()
44+
.Name("switch")
45+
.Events(e => e
46+
.Change("change")
47+
)
48+
)
49+
<script>
50+
function change(e) {
51+
//Handle the change event.
52+
}
53+
</script>
54+
```
55+
56+
### By Template Delegate
57+
58+
The following example demonstrates how to subscribe to events by a template delegate.
59+
60+
###### Example
61+
62+
```
63+
@(Html.Kendo().Switch()
64+
.Name("switch")
65+
.Events(e => e
66+
.Change(@<text>
67+
function(e) {
68+
//Handle the change event inline.
69+
}
70+
</text>)
71+
)
72+
)
73+
```
74+
75+
## Reference
76+
77+
### Existing Instances
78+
79+
To reference an existing Kendo UI Switch instance, use the [`jQuery.data()`](https://api.jquery.com/jQuery.data/) configuration option. Once a reference is established, use the [Switch API](https://docs.telerik.com/kendo-ui/api/javascript/ui/switch) to control its behavior.
80+
81+
###### Example
82+
83+
```
84+
// Put this after your Kendo UI Switch for ASP.NET Core declaration.
85+
<script>
86+
$(function() {
87+
//Notice that the Name() of the Switch is used to get its client-side instance.
88+
var switch = $("#switch").data("kendoSwitch");
89+
});
90+
</script>
91+
```
92+
93+
## See Also
94+
95+
* [Overview of the Kendo UI Switch Widget](https://docs.telerik.com/kendo-ui/controls/editors/switch/overview)
96+
* [UI for ASP.NET Core Switch official live demos](https://demos.telerik.com/aspnet-core/switch)

‎docs-aspnet-core/knowledge-base/images/multiselect-POST-data.png‎

66.1 KB
Loading

‎docs-aspnet-core/knowledge-base/multiselect-post-data-values.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: Submit MultiSelect Data to Controller POST
3+
description: How to use a MultiSelect widget in a POST query and read its data
4+
type: how-to
5+
page_title: Submit MultiSelect Data to Controller POST
6+
slug: multiselect-post-data-values
7+
position:
8+
tags:
9+
ticketid: 1381199, 1381623
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>MultiSelect for ASP.NET Core, MultiSelect for ASP.NET MVC</td>
18+
</tr>
19+
</table>
20+
21+
22+
## Question
23+
If I would like to submit selected data then how I can pass selected data to the controller action method? Essentially, how to get the values in the multiselect on a submit postback to my controller.
24+
25+
## Description
26+
27+
The Kendo MultiSelect widget is a `<select multiple>` element in the DOM and so it will POST a list of fields with the values of the selected options. The controller must be prepared to take such input.
28+
29+
![POST data example](images/multiselect-POST-data.png)
30+
31+
## Solution
32+
33+
There are different ways to pass data to a controller in MVC and here are a few:
34+
35+
* Use a form and a submit button in it like you would with a simple `<select multiple>` element. This works best if the html helper you use is an editor for a model field (for example,, `MultiSelectFor(model => model.TheField)` which will let you use the MVC model binding to post the entire model from the form. Here are two samples:
36+
* [for ASP.NET Core](https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/multiselect/get-post-data)
37+
* [for ASP.NET MVC5](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/multiselect/get-POST-data)
38+
* Create your own request where you can read the value of the multiselect and pass it as a generic string (you can get it from its [value() method](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/methods/value)). An example of obtaining that is also available in the samples above.
39+
* Use an AJAX form with some additional scripts which basically goes through the inputs on the page and serializes them: [https://www.c-sharpcorner.com/UploadFile/0c1bb2/ajax-beginform-in-Asp-Net-mvc-5/](https://www.c-sharpcorner.com/UploadFile/0c1bb2/ajax-beginform-in-Asp-Net-mvc-5/). This is quite similar to the idea above, although you may need to test how these scripts behave with a `<select multiple>` element).

‎docs-aspnet-core/tag-helpers/editors/switch/overview.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Overview
3+
page_title: Switch | Telerik UI for ASP.NET Core Tag Helpers
4+
description: "Learn the basics when working with the Kendo UI Switch tag helper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
previous_url: /aspnet-core/helpers/switch, /aspnet-core/helpers/tag-helpers/switch
6+
slug: taghelpers_switch_aspnetcore
7+
position: 1
8+
---
9+
10+
# Switch Tag Helper Overview
11+
12+
The Switch tag helper helps you configure the Kendo UI Switch widget in ASP.NET Core applications.
13+
14+
## Basic Usage
15+
16+
The following example demonstrates how to define the Switch by using the Switch tag helper. It is used to display two exclusive choices.
17+
18+
###### Example
19+
20+
<kendo-switch name="switch"
21+
checked="true"></kendo-switch>
22+
23+
## Configuration
24+
25+
The Switch tag helper configuration options are passed as attributes of the tag.
26+
27+
###### Example
28+
29+
```tab-cshtml
30+
31+
@(Html.Kendo().Switch()
32+
.Name("switch")
33+
.Checked(true)
34+
.Enabled(true))
35+
```
36+
```tab-tagHelper
37+
38+
<kendo-switch name="switch"
39+
checked="true"
40+
enabled="true"></kendo-switch>
41+
```
42+
43+
## See Also
44+
45+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
46+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
47+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects with the CLI]({% slug gettingstartedcli_aspnetmvc6_aspnetmvc %})
48+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-mvc/helpers/switch/overview.md‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
---
2+
title: Overview
3+
page_title: Overview | Kendo UI Switch HtmlHelper
4+
description: "Get started with the server-side wrapper for the Kendo UI Switch widget for ASP.NET MVC."
5+
slug: overview_switchhelper_aspnetmvc
6+
position: 1
7+
---
8+
9+
# Switch HtmlHelper Overview
10+
11+
The Switch HtmlHelper extension is a server-side wrapper for the [Kendo UI Switch](https://demos.telerik.com/kendo-ui/switch/index) widget.
12+
13+
## Getting Started
14+
15+
### The Basics
16+
17+
Kendo UI Switch is used to display two exclusive choices.
18+
19+
### Configuration
20+
21+
Below are listed the steps for you to follow when configuring the Kendo UI Switch.
22+
23+
1. Make sure you followed all the steps from the [introductory article on Telerik UI for ASP.NET MVC]({% slug overview_aspnetmvc %}).
24+
25+
1. Create a new action method which renders the view.
26+
27+
###### Example
28+
29+
public ActionResult Index()
30+
{
31+
return View();
32+
}
33+
34+
1. Add a Switch.
35+
36+
###### Example
37+
38+
```tab-ASPX
39+
40+
<%: Html.Kendo().Switch()
41+
.Name("switch") //The name of the Switch is mandatory. It specifies the "id" attribute of the widget.
42+
.Checked(true)
43+
%>
44+
```
45+
```tab-Razor
46+
47+
@(Html.Kendo().Switch()
48+
.Name("switch") //The name of the Switch is mandatory. It specifies the "id" attribute of the widget.
49+
.Checked(true)
50+
)
51+
```
52+
53+
## Event Handling
54+
55+
You can subscribe to all Switch [events](http://docs.telerik.com/kendo-ui/api/javascript/ui/switch#events).
56+
57+
### By Handler Name
58+
59+
The following example demonstrates how to subscribe to events by a handler name.
60+
61+
###### Example
62+
63+
```tab-ASPX
64+
65+
<%: Html.Kendo().Switch()
66+
.Name("switch")
67+
.Events(e => e
68+
.Change("change")
69+
)
70+
%>
71+
<script>
72+
function change() {
73+
//Handle the change event.
74+
}
75+
</script>
76+
```
77+
```tab-Razor
78+
79+
@(Html.Kendo().Switch()
80+
.Name("switch")
81+
.Events(e => e
82+
.Change("change")
83+
)
84+
)
85+
<script>
86+
function change() {
87+
//Handle the change event.
88+
}
89+
</script>
90+
```
91+
92+
### By Template Delegate
93+
94+
The following example demonstrates how to subscribe to events by a template delegate.
95+
96+
###### Example
97+
98+
```tab-Razor
99+
100+
@(Html.Kendo().Switch()
101+
.Name("switch")
102+
.Events(e => e
103+
.Change(@<text>
104+
function() {
105+
//Handle the change event inline.
106+
}
107+
</text>)
108+
)
109+
)
110+
```
111+
112+
## Reference
113+
114+
### Existing Instances
115+
116+
To reference an existing Kendo UI Switch instance, use the [`jQuery.data()`](http://api.jquery.com/jQuery.data/) configuration option. Once a reference is established, use the [Switch API](http://docs.telerik.com/kendo-ui/api/javascript/ui/switch) to control its behavior.
117+
118+
###### Example
119+
120+
//Put this after your Kendo UI Switch for ASP.NET MVC declaration.
121+
<script>
122+
$(function() {
123+
//Notice that the Name() of the Switch is used to get its client-side instance.
124+
var switch = $("#switch").data("kendoSwitch");
125+
});
126+
</script>
127+
128+
## See Also
129+
130+
* [Telerik UI for ASP.NET MVC API Reference: SwitchBuilder](http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/SwitchBuilder)
131+
* [Overview of Telerik UI for ASP.NET MVC]({% slug overview_aspnetmvc %})
132+
* [Fundamentals of Telerik UI for ASP.NET MVC]({% slug fundamentals_aspnetmvc %})
133+
* [Scaffolding in Telerik UI for ASP.NET MVC]({% slug scaffolding_aspnetmvc %})
134+
* [Overview of the Kendo UI Switch Widget](http://docs.telerik.com/kendo-ui/controls/editors/switch/overview)
135+
* [Telerik UI for ASP.NET MVC API Reference Folder](http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc/AggregateFunction)
136+
* [Telerik UI for ASP.NET MVC HtmlHelpers Folder]({% slug overview_autocompletehelper_aspnetmvc %})
137+
* [Tutorials on Telerik UI for ASP.NET MVC]({% slug overview_timeefficiencyapp_aspnetmvc6 %})
138+
* [Telerik UI for ASP.NET MVC Troubleshooting]({% slug troubleshooting_aspnetmvc %})

0 commit comments

Comments
 (0)