Skip to content

Commit fc80ee8

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent e7f132e commit fc80ee8

File tree

9 files changed

+735
-244
lines changed

9 files changed

+735
-244
lines changed

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: Ajax Binding
3+
page_title: Ajax Binding | Kendo UI ComboBox HtmlHelper for ASP.NET Core
4+
description: "Learn how to implement Ajax Binding with Kendo UI ComboBox HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_combobox_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 ComboBox 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 ActionResult 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 ComboBox.
38+
39+
###### Example
40+
41+
@(Html.Kendo().ComboBox()
42+
.Name("productDropDownList") //The name of the ComboBox is mandatory. It specifies the "id" attribute of the widget.
43+
.DataTextField("ProductName") //Specify which property of the Product to be used by the ComboBox as a text.
44+
.DataValueField("ProductID") //Specify which property of the Product to be used by the ComboBox 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+
.SelectedIndex(0) //Select the first item.
54+
)
55+
56+
## See Also
57+
58+
* [JavaScript API Reference of the ComboBox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
59+
* [ComboBox HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/combobox/overview)
60+
* [ComboBox Official Demos](http://demos.telerik.com/aspnet-core/combobox/index)

‎docs-aspnet-core/html-helpers/editors/combobox/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 ComboBox HtmlHelper for ASP.NET Core
4+
description: "Learn the basics approaches for binding the Kendo UI ComboBox HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_combobox_databinding_aspnetcore
6+
position: 1
7+
---
8+
9+
# Data Binding
10+
11+
The ComboBox provides a set of options for binding it to data.
12+
13+
The supported data-binding approaches are:
14+
15+
* [Ajax binding]({% slug htmlhelpers_combobox_ajaxbinding_aspnetcore %})
16+
* [Server binding]({% slug htmlhelpers_combobox_serverbinding_aspnetcore %})
17+
* [Custom data binding]({% slug htmlhelpers_combobox_todatasourceresultbinding_aspnetcore %})
18+
* Model binding
19+
1. [Local binding]({% slug htmlhelpers_combobox_modelbinding_aspnetcore %}#localdata)
20+
2. [Remote binding]({% slug htmlhelpers_combobox_modelbinding_aspnetcore %}#remotedata)
21+
22+
## See Also
23+
24+
* [JavaScript API Reference of the ComboBox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
25+
* [ComboBox HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/combobox/overview)
26+
* [ComboBox Official Demos](http://demos.telerik.com/aspnet-core/combobox/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/combobox/binding/model-binding.md‎

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

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: Server Binding
3+
page_title: Server Binding | Kendo UI ComboBox HtmlHelper for ASP.NET Core
4+
description: "Learn how to implement server binding in the Kendo UI ComboBox HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_combobox_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 ComboBox 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 ComboBox.
32+
33+
###### Example
34+
35+
@(Html.Kendo().ComboBox()
36+
.Name("productComboBox") //The name of the ComboBox is mandatory. It specifies the "id" attribute of the widget.
37+
.DataTextField("ProductName") //Specify which property of the Product to be used by the ComboBox as a text.
38+
.DataValueField("ProductID") //Specify which property of the Product to be used by the ComboBox as a value.
39+
.BindTo(Model) //Pass the list of Products to the ComboBox.
40+
.SelectedIndex(10) //Select an item with index 10. Note that the indexes are zero-based.
41+
)
42+
43+
## See Also
44+
45+
* [JavaScript API Reference of the ComboBox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
46+
* [ComboBox HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/combobox/overview)
47+
* [ComboBox Official Demos](http://demos.telerik.com/aspnet-core/combobox/index)

‎docs-aspnet-core/html-helpers/editors/combobox/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 ComboBox HtmlHelper for ASP.NET Core
4+
description: "Learn how to implement custom ToDataSourceResult data binding in the Kendo UI ComboBox HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_combobox_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 ComboBox 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 ComboBox.
34+
35+
###### Example
36+
37+
@(Html.Kendo().ComboBox()
38+
.Name("productComboBox") //The name of the ComboBox is mandatory. It specifies the "id" attribute of the widget.
39+
.DataTextField("ProductName") //Specify which property of the Product to be used by the ComboBox as a text.
40+
.DataValueField("ProductID") //Specify which property of the Product to be used by the ComboBox 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 ComboBox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
61+
* [ComboBox HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/combobox/overview)
62+
* [ComboBox Official Demos](http://demos.telerik.com/aspnet-core/combobox/index)

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: Grouping
3+
page_title: Grouping | Kendo UI ComboBox HtmlHelper for ASP.NET Core
4+
description: "Learn how to group data in the Kendo UI ComboBox HtmlHelper for ASP.NET Core works."
5+
slug: htmlhelpers_combobox_grouping_aspnetcore
6+
position: 6
7+
---
8+
9+
# Grouping Overview
10+
11+
The ComboBox enables 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 ComboBox 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 ComboBox by country.
20+
21+
###### Example
22+
23+
@(Html.Kendo().ComboBox()
24+
.Name("customers")
25+
.DataSource(source => source
26+
.Custom()
27+
.Group(g => g.Add("Country", typeof(string)))
28+
.Transport(transport => transport
29+
.Read(read =>
30+
{
31+
read.Action("Grouping_GetCustomers", "ComboBox");
32+
}))
33+
)
34+
.DataTextField("ContactName")
35+
.DataValueField("CustomerID")
36+
)
37+
38+
## See Also
39+
40+
* [Templates for ComboBox]({% slug htmlhelpers_combobox_templates_aspnetcore %})
41+
* [Bindings for ComboBox]({% slug htmlhelpers_combobox_databinding_aspnetcore %})
42+
* [JavaScript API Reference of the ComboBox](http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox)
43+
* [ComboBox HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/combobox/overview)
44+
* [ComboBox Official Demos](http://demos.telerik.com/aspnet-core/combobox/index)

0 commit comments

Comments
 (0)