Skip to content

Commit be05268

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent dc82827 commit be05268

40 files changed

+3315
-429
lines changed

‎docs-aspnet-core/html-helpers/editors/multiselect/binding/ajax-binding.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: Ajax Binding
3+
page_title: Ajax Binding | Kendo UI MultiSelect HtmlHelper for ASP.NET Core
4+
description: "Learn how to implement Ajax Binding with Kendo UI MultiSelect HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_multiselect_ajaxbinding_aspnetcore
6+
position: 2
7+
---
8+
9+
# Ajax Binding
10+
11+
Below are listed the steps for you to follow when configuring the Kendo UI MultiSelect for Ajax binding to the Northwind **Products** table which uses Linq to SQL.
12+
13+
> **Important**
14+
>
15+
> The `ToDataSourceResult()` extension method modifies the structure of the result and the widget is not able to bind to it. In this case, return a simple array of data.
16+
17+
1. Create an action method which renders the view.
18+
19+
###### Example
20+
21+
public IActionResult Index()
22+
{
23+
return View();
24+
}
25+
26+
1. Create a new action method and pass the **Products** table as JSON result.
27+
28+
###### Example
29+
30+
public JsonResult GetProducts()
31+
{
32+
NorthwindDataContext northwind = new NorthwindDataContext();
33+
34+
return Json(northwind.Products, JsonRequestBehavior.AllowGet);
35+
}
36+
37+
1. Add an Ajax-bound MultiSelect.
38+
39+
###### Example
40+
41+
@(Html.Kendo().MultiSelect()
42+
.Name("productMultiSelect") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
43+
.DataTextField("ProductName") //Specify which property of the Product to be used by the DropDownList as a text.
44+
.DataValueField("ProductID") //Specify which property of the Product to be used by the DropDownList as a value.
45+
.DataSource(source =>
46+
{
47+
source.Read(read =>
48+
{
49+
read.Action("GetProducts", "Home"); //Set the Action and Controller names.
50+
})
51+
.ServerFiltering(true); //If true, the DataSource will not filter the data on the client.
52+
})
53+
)
54+
55+
## See Also
56+
57+
* [JavaScript API Reference of the MultiSelect](http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect)
58+
* [MultiSelect HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/multiselect/overview)
59+
* [MultiSelect Official Demos](http://demos.telerik.com/aspnet-core/multiselect/index)

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: Overview
3+
page_title: Data Binding | Kendo UI MultiSelect HtmlHelper for ASP.NET Core
4+
description: "Learn the basics approaches for binding the Kendo UI MultiSelect HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_multiselect_databinding_aspnetcore
6+
position: 1
7+
---
8+
9+
# Data Binding
10+
11+
The MultiSelect provides a set of options for binding it to data.
12+
13+
The supported data-binding approaches are:
14+
15+
* [Ajax binding]({% slug htmlhelpers_multiselect_ajaxbinding_aspnetcore %})
16+
* [Server binding]({% slug htmlhelpers_multiselect_serverbinding_aspnetcore %})
17+
* [Custom data binding]({% slug htmlhelpers_multiselect_todatasourceresultbinding_aspnetcore %})
18+
* Model binding
19+
1. [Local binding]({% slug htmlhelpers_multiselect_modelbinding_aspnetcore %}#localdata)
20+
2. [Remote binding]({% slug htmlhelpers_multiselect_modelbinding_aspnetcore %}#remotedata)
21+
22+
## See Also
23+
24+
* [JavaScript API Reference of the MultiSelect](http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect)
25+
* [MultiSelect HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/multiselect/overview)
26+
* [MultiSelect Official Demos](http://demos.telerik.com/aspnet-core/multiselect/index)
27+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
28+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
29+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects with the CLI]({% slug gettingstartedcli_aspnetmvc6_aspnetmvc %})
30+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/html-helpers/editors/multiselect/binding/model-binding.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
title: Model Binding
3+
page_title: Model Binding | Kendo UI MultiSelect HtmlHelper for ASP.NET Core
4+
description: "Learn how to implement Model Binding with Kendo UI MultiSelect HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_multiselect_modelbinding_aspnetcore
6+
position: 5
7+
---
8+
9+
# Model Binding
10+
11+
You can implement model binding in the MultiSelect with both [local data](#local-data) and [remote data](#remote-data), and in combination with [virtualization](#virtualization).
12+
13+
## Local Data
14+
15+
Local data is the data that is available on the client when the MultiSelect is initialized.
16+
17+
1. Pass the data to the view through the view model.
18+
19+
###### Example
20+
21+
public IActionResult Index()
22+
{
23+
return View(new ProductViewModel
24+
{
25+
Orders = GetOrders(),
26+
SelectedOrders = new int[] { 1, 3 }
27+
});
28+
}
29+
30+
private static List<Order> GetOrders()
31+
{
32+
var orders = Enumerable.Range(0, 2000).Select(i => new Order
33+
{
34+
OrderID = i,
35+
OrderName = "OrderName" + i
36+
});
37+
38+
return orders.ToList();
39+
}
40+
41+
42+
1. Add the MultiSelect to the view and bind it to a property of the view model.
43+
44+
###### Example
45+
46+
@model MvcApplication1.Models.ProductViewModel
47+
48+
@(Html.Kendo().MultiSelectFor(m => m.SelectedOrders)
49+
.DataValueField("OrderID")
50+
.DataTextField("OrderName")
51+
.BindTo(Model.Orders)
52+
)
53+
54+
55+
## Remote Data
56+
57+
You can configure the MultiSelect to get its data from a remote source by making an AJAX request.
58+
59+
1. Create an action that returns the data as a JSON result.
60+
61+
###### Example
62+
63+
public IActionResult Index()
64+
{
65+
return View(new ProductViewModel
66+
{
67+
SelectedOrders = new int[] { 1, 3 }
68+
});
69+
}
70+
71+
public JsonResult GetOrdersAjax()
72+
{
73+
var orders = Enumerable.Range(0, 2000).Select(i => new Order
74+
{
75+
OrderID = i,
76+
OrderName = "OrderName" + i
77+
});
78+
79+
return Json(orders.ToList(), JsonRequestBehavior.AllowGet);
80+
}
81+
82+
83+
1. Add the MultiSelect to the view and configure its DataSource to use remote data.
84+
85+
###### Example
86+
87+
@model MvcApplication1.Models.ProductViewModel
88+
89+
@(Html.Kendo().MultiSelectFor(m => m.SelectedOrders)
90+
.Filter("contains")
91+
.DataValueField("OrderID")
92+
.DataTextField("OrderName")
93+
.DataSource(source =>
94+
{
95+
source.Read(read =>
96+
{
97+
read.Action("GetOrdersAjax", "Home");
98+
})
99+
.ServerFiltering(false);
100+
})
101+
)
102+
103+
## See Also
104+
105+
* [JavaScript API Reference of the MultiSelect](http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect)
106+
* [MultiSelect HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/multiselect/overview)
107+
* [MultiSelect Official Demos](http://demos.telerik.com/aspnet-core/multiselect/index)

‎docs-aspnet-core/html-helpers/editors/multiselect/binding/server-binding.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: Server Binding
3+
page_title: Server Binding | Kendo UI MultiSelect HtmlHelper for ASP.NET Core
4+
description: "Learn how to implement server binding in the Kendo UI MultiSelect HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_multiselect_serverbinding_aspnetcore
6+
position: 3
7+
---
8+
9+
# Server Binding
10+
11+
Below are listed the steps for you to follow when configuring the Kendo UI MultiSelect for server binding to the Northwind **Products** table which uses Linq to SQL.
12+
13+
1. Create a new action method and pass the **Products** table as the model.
14+
15+
###### Example
16+
17+
public IActionResult Index()
18+
{
19+
NorthwindDataContext northwind = new NorthwindDataContext();
20+
21+
return View(northwind.Products);
22+
}
23+
24+
1. Make your view strongly typed.
25+
26+
###### Example
27+
28+
@model IEnumerable<MvcApplication1.Models.Product>
29+
30+
31+
1. Add a server bound MultiSelect.
32+
33+
###### Example
34+
35+
@(Html.Kendo().MultiSelect()
36+
.Name("productDropDownList") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
37+
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
38+
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
39+
.BindTo(Model) //Pass the list of Products to the MultiSelect.
40+
)
41+
42+
## See Also
43+
44+
* [JavaScript API Reference of the MultiSelect](http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect)
45+
* [MultiSelect HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/multiselect/overview)
46+
* [MultiSelect Official Demos](http://demos.telerik.com/aspnet-core/multiselect/index)

‎docs-aspnet-core/html-helpers/editors/multiselect/binding/todatasourceresult-binding.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: Custom Data Binding
3+
page_title: Custom Data Binding | Kendo UI MultiSelect HtmlHelper for ASP.NET Core
4+
description: "Learn how to implement custom ToDataSourceResult data binding in the Kendo UI MultiSelect HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_multiselect_todatasourceresultbinding_aspnetcore
6+
position: 4
7+
---
8+
9+
# Custom Data Binding
10+
11+
Below are listed the steps for you to follow when configuring the Kendo UI MultiSelect to use a custom DataSource and thus bind to a `ToDataSourceResult` instance.
12+
13+
1. Create an action method which renders the view.
14+
15+
###### Example
16+
17+
public IActionResult Index()
18+
{
19+
return View();
20+
}
21+
22+
1. Create a new action method and pass the **Products** table as JSON result.
23+
24+
###### Example
25+
26+
public JsonResult GetProducts([DataSourceRequest] DataSourceRequest request)
27+
{
28+
NorthwindDataContext northwind = new NorthwindDataContext();
29+
30+
return Json(northwind.Products.ToDataSourceResult(request));
31+
}
32+
33+
1. Add an Ajax-bound MultiSelect.
34+
35+
###### Example
36+
37+
@(Html.Kendo().MultiSelect()
38+
.Name("productDropDownList") //The name of the MultiSelect is mandatory. It specifies the "id" attribute of the widget.
39+
.DataTextField("ProductName") //Specify which property of the Product to be used by the MultiSelect as a text.
40+
.DataValueField("ProductID") //Specify which property of the Product to be used by the MultiSelect as a value.
41+
.DataSource(source =>
42+
{
43+
source.Custom()
44+
.ServerFiltering(true)
45+
.Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances.
46+
.Transport(transport =>
47+
{
48+
transport.Read("GetProducts", "Home");
49+
})
50+
.Schema(schema =>
51+
{
52+
schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
53+
.Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
54+
});
55+
})
56+
)
57+
58+
## See Also
59+
60+
* [JavaScript API Reference of the MultiSelect](http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect)
61+
* [MultiSelect HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/multiselect/overview)
62+
* [MultiSelect Official Demos](http://demos.telerik.com/aspnet-core/multiselect/index)

‎docs-aspnet-core/html-helpers/editors/multiselect/grouping.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: Grouping
3+
page_title: Grouping | Kendo UI MultiSelect HtmlHelper for ASP.NET Core
4+
description: "Learn how to group data in the Kendo UI MultiSelect HtmlHelper for ASP.NET Core."
5+
slug: htmlhelpers_multiselect_grouping_aspnetcore
6+
position: 6
7+
---
8+
9+
# Grouping Overview
10+
11+
The MultiSelect allows you to bind it to a grouped data source.
12+
13+
To group the data, define a group `datasource` expression which uses a custom DataSource configuration, and specify the field by which the MultiSelect will be grouped.
14+
15+
> **Important**
16+
>
17+
> The data source sorts the grouped data either in ascending or descending order. To persist a specific group order, use the [server grouping feature](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverGrouping). To define the `serverGrouping` option, use the `ServerGrouping` method of the DataSource.
18+
19+
The following example demonstrates how to group the data in the MultiSelect by country.
20+
21+
###### Example
22+
23+
@(Html.Kendo().MultiSelect()
24+
.Name("customers")
25+
.Placeholder("Select customers...")
26+
.DataSource(source => source
27+
.Custom()
28+
.Group(g => g.Add("Country", typeof(string)))
29+
.Transport(transport => transport
30+
.Read(read =>
31+
{
32+
read.Action("Customers_Read", "MultiSelect")
33+
.Data("onAdditionalData");
34+
}))
35+
.ServerFiltering(true))
36+
.DataTextField("ContactName")
37+
.DataValueField("CustomerID")
38+
)
39+
<script>
40+
function onAdditionalData() {
41+
return {
42+
text: $("#customers").val()
43+
};
44+
}
45+
</script>
46+
47+
## See Also
48+
49+
* [Templates for MultiSelect]({% slug htmlhelpers_multiselect_templates_aspnetcore %})
50+
* [Bindings for MultiSelect]({% slug htmlhelpers_multiselect_databinding_aspnetcore %})
51+
* [JavaScript API Reference of the MultiSelect](http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect)
52+
* [MultiSelect HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/multiselect/overview)
53+
* [MultiSelect Official Demos](http://demos.telerik.com/aspnet-core/multiselect/index)

0 commit comments

Comments
 (0)