Skip to content

Commit 288d51f

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 00f8912 commit 288d51f

28 files changed

+1038
-263
lines changed

‎docs-aspnet/accessibility/accessibility-compliance-table.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<tr>
3636
<td>BarCode</td>
3737
<td>Yes</td>
38-
<td>AA</td>
38+
<td>AAA</td>
3939
<td><a href="https://demos.telerik.com/{{ site.platform }}/accessibility/barcode">Demo</a></td>
4040
</tr>
4141
<tr>
@@ -257,7 +257,7 @@
257257
<tr>
258258
<td>ListView</td>
259259
<td>Yes</td>
260-
<td>AA</td>
260+
<td>AAA</td>
261261
<td><a href="https://demos.telerik.com/{{ site.platform }}/accessibility/listview">Demo</a></td>
262262
</tr>
263263
<tr>
@@ -353,7 +353,7 @@
353353
<tr>
354354
<td>QRCode</td>
355355
<td>Yes</td>
356-
<td>AA</td>
356+
<td>AAA</td>
357357
<td><a href="https://demos.telerik.com/{{ site.platform }}/accessibility/qrcode">Demo</a></td>
358358
</tr>
359359
<tr>
@@ -443,7 +443,7 @@
443443
<tr>
444444
<td>TextArea</td>
445445
<td>Yes</td>
446-
<td>AA</td>
446+
<td>AAA</td>
447447
<td><a href="https://demos.telerik.com/{{ site.platform }}/accessibility/textarea">Demo</a></td>
448448
</tr>
449449
<tr>
@@ -455,7 +455,7 @@
455455
<tr>
456456
<td>TileLayout</td>
457457
<td>Yes</td>
458-
<td>AA</td>
458+
<td>AAA</td>
459459
<td><a href="https://demos.telerik.com/{{ site.platform }}/accessibility/tilelayout">Demo</a></td>
460460
</tr>
461461
<tr>

‎docs-aspnet/html-helpers/data-management/listview/binding/ajax-binding.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ page_title: Ajax Binding
44
description: "Configure the Telerik UI ListView for AJAX binding and easily enable client-data processing during AJAX binding."
55
previous_url: /helpers/data-management/listview/binding
66
slug: htmlhelpers_listview_aspnetcore_ajaxbinding
7-
position: 2
7+
position: 3
88
---
99

1010
# Ajax Binding

‎docs-aspnet/html-helpers/data-management/listview/events.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the Telerik UI ListView component for {{ site.framework }}."
5+
slug: listview_events
6+
position: 4
7+
---
8+
9+
# Events
10+
11+
The Telerik UI ListView for {{ site.framework }} [exposes a number of JavaScript events](/api/Kendo.Mvc.UI.Fluent/ListViewEventBuilder) that allow you to control the behavior of the UI component.
12+
13+
For a complete example of how to handle all ListView events triggered by user interaction, refer to the [demo on using the events of the ListView ](https://demos.telerik.com/{{ site.platform }}/listview/events).
14+
15+
16+
## Subscribing to Events
17+
18+
The following example demonstrates how to subscribe to the [`dataBound`](https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/events/databound) event.
19+
20+
```HtmlHelper
21+
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>()
22+
.Name("listView")
23+
.TagName("ul")
24+
.ClientTemplateId("template")
25+
.DataSource(dataSource => dataSource
26+
.Ajax()
27+
.Read(read => read.Action("Products_Read", "ListView"))
28+
.PageSize(21)
29+
)
30+
.Pageable(pageable => pageable
31+
.Refresh(true)
32+
.ButtonCount(5)
33+
.PageSizes(new[] { 5, 15, 21 })
34+
)
35+
.Events(e=>e.DataBound("onDataBound"))
36+
)
37+
```
38+
{% if site.core %}
39+
```TagHelper
40+
@addTagHelper *, Kendo.Mvc
41+
42+
<kendo-listview name="listView"
43+
tag-name="div"
44+
template-id="template"
45+
on-data-bound="onDataBound>
46+
<datasource type="DataSourceTagHelperType.Ajax" page-size="21">
47+
<transport>
48+
<read url="@Url.Action("Products_Read", "ListView")" />
49+
</transport>
50+
</datasource>
51+
<pageable enabled="true" />
52+
</kendo-listview>
53+
```
54+
{% endif %}
55+
```JavaScript
56+
<script>
57+
function onDataBound(e){
58+
var listview = $("#listView").data("kendoListView");
59+
listview.setOptions({selectable: "single"}); // Turn on the selectable mode of the ListView.
60+
listview.select(listview.content.children().first()); // Select the first item.
61+
}
62+
</script>
63+
```
64+
65+
## Next Steps
66+
67+
* [Using the ListView Events (Demo)](https://demos.telerik.com/aspnet-core/listview/events)
68+
69+
## See Also
70+
71+
* [Using the API of the ListView for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/listview/api)
72+
* [Assigning predefined resources to the ListView (Demo)](https://demos.telerik.com/{{ site.platform }}/listview/resources)
73+
* [Server-Side API of the ListView](/api/listview)
74+
* [Client-Side API of the ListView](https://docs.telerik.com/kendo-ui/api/javascript/ui/listview)

‎docs-aspnet/html-helpers/data-management/listview/getting-started-listview.md

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
---
2+
title: Getting Started
3+
page_title: Getting Started
4+
description: "Make your first steps with the Telerik UI for {{ site.framework }} ListView component by following a complete step-by-step tutorial."
5+
slug: listview_getting_started
6+
position: 1
7+
---
8+
9+
# Getting Started with the ListView
10+
11+
This tutorial explains how to set up the Telerik UI for {{ site.framework }} ListView.
12+
13+
You will declare a product view model and bind it to an instance of the ListView component. Next, you will configure the DataSource, the read transport operation for the ListView, and the server endpoint to handle the request at the backend. Finally, you'll add a Kendo template to render the ListView items and will learn how to reference the client-side instance of the component.
14+
15+
After completing this guide, you will achieve the following results:
16+
17+
![Sample Telerik UI for {{ site.framework }} ListView](images/listview-getting-started-result.png)
18+
19+
@[template](/_contentTemplates/core/getting-started-prerequisites.md#repl-component-gs-prerequisites)
20+
21+
## 1. Prepare the CSHTML File
22+
23+
@[template](/_contentTemplates/core/getting-started-directives.md#gs-adding-directives)
24+
25+
Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.
26+
27+
## 2. Declare the View Model
28+
29+
Declare the `ProductViewModel`.
30+
31+
```C#
32+
using System.ComponentModel.DataAnnotations;
33+
using System.ComponentModel;
34+
using System;
35+
36+
public class ProductViewModel
37+
{
38+
public int ProductID
39+
{
40+
get;
41+
set;
42+
}
43+
44+
[Required]
45+
[Display(Name = "Product name")]
46+
public string ProductName
47+
{
48+
get;
49+
set;
50+
}
51+
52+
[Display(Name = "Unit price")]
53+
[DataType(DataType.Currency)]
54+
[Range(0, int.MaxValue)]
55+
public decimal UnitPrice
56+
{
57+
get;
58+
set;
59+
}
60+
61+
[Display(Name = "Units in stock")]
62+
[DataType("Integer")]
63+
[Range(0, int.MaxValue)]
64+
public int UnitsInStock
65+
{
66+
get;
67+
set;
68+
}
69+
70+
public bool Discontinued
71+
{
72+
get;
73+
set;
74+
}
75+
76+
[Display(Name = "Last supply")]
77+
[DataType(DataType.Date)]
78+
public DateTime LastSupply
79+
{
80+
get;
81+
set;
82+
}
83+
84+
[DataType("Integer")]
85+
public int UnitsOnOrder
86+
{
87+
get;
88+
set;
89+
}
90+
}
91+
92+
```
93+
94+
## 3. Initialize the ListView
95+
96+
Use the ListView HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page and set some of its options.
97+
98+
* Use the `Name()` configuration method to assign a name to the instance of the helper&mdash;this is mandatory as its value is used for the `id` and the `name` attributes of the outermost ListView element.
99+
* Add the `DataSource()` configuration option and set the end point for the [read transport]({% slug htmlhelper_datasourcecrud %}).
100+
* Configure the `TagName` to set the HTML element type used for the outermost element of the component.
101+
* Set the `PageSize` of the DataSource, and use the `Pageable` property to enable the built-in pager of the ListView.
102+
103+
```HtmlHelper
104+
@using Kendo.Mvc.UI
105+
106+
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>()
107+
.Name("listView")
108+
.TagName("div")
109+
.DataSource(dataSource => dataSource
110+
.Ajax()
111+
.Read(read => read.Action("Products_Read", "ListView"))
112+
.PageSize(21)
113+
)
114+
.Pageable()
115+
)
116+
```
117+
{% if site.core %}
118+
```TagHelper
119+
@addTagHelper *, Kendo.Mvc
120+
121+
<kendo-listview name="listView"
122+
tag-name="div">
123+
<datasource type="DataSourceTagHelperType.Ajax" page-size="21">
124+
<transport>
125+
<read url="@Url.Action("Products_Read", "ListView")" />
126+
</transport>
127+
</datasource>
128+
<pageable enabled="true" />
129+
</kendo-listview>
130+
```
131+
{% endif %}
132+
133+
## 4. Declare the Read Action
134+
135+
In the `ListView` controller, declare the `Read` action method. Use the name of the action that you set in the DataSource configuration from the previous step.
136+
137+
```Controller
138+
public ActionResult Index()
139+
{
140+
return View();
141+
}
142+
143+
private List<ProductViewModel> products = new List<ProductViewModel>()new ProductViewModel {
144+
new ProductViewModel { ProductID = 1, ProductName = "Chai", UnitPrice = 18, UnitsInStock = 39, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
145+
new ProductViewModel { ProductID = 2, ProductName = "Chang", UnitPrice = 19, UnitsInStock = 17, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 40 },
146+
new ProductViewModel { ProductID = 3, ProductName = "Aniseed Syrup", UnitPrice = 10, UnitsInStock = 13, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 70 },
147+
new ProductViewModel { ProductID = 4, ProductName = "Chef Anton's Cajun Seasoning", UnitPrice = 22, UnitsInStock = 53, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
148+
new ProductViewModel { ProductID = 5, ProductName = "Chef Anton's Gumbo Mix", UnitPrice = 21.35, UnitsInStock = 0, Discontinued = true, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
149+
new ProductViewModel { ProductID = 6, ProductName = "Grandma's Boysenberry Spread", UnitPrice = 25, UnitsInStock = 120, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
150+
new ProductViewModel { ProductID = 7, ProductName = "Uncle Bob's Organic Dried Pears", UnitPrice = 30, UnitsInStock = 15, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
151+
new ProductViewModel { ProductID = 8, ProductName = "Northwoods Cranberry Sauce", UnitPrice = 40, UnitsInStock = 6, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
152+
new ProductViewModel { ProductID = 9, ProductName = "Mishi Kobe Niku", UnitPrice = 97, UnitsInStock = 29, Discontinued = true, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
153+
new ProductViewModel { ProductID = 10, ProductName = "Ikura", UnitPrice = 31, UnitsInStock = 31, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
154+
new ProductViewModel { ProductID = 11, ProductName = "Queso Cabrales", UnitPrice = 21, UnitsInStock = 22, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 30 },
155+
new ProductViewModel { ProductID = 12, ProductName = "Queso Manchego La Pastora", UnitPrice = 38, UnitsInStock = 86, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
156+
new ProductViewModel { ProductID = 13, ProductName = "Konbu", UnitPrice = 6, UnitsInStock = 24, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
157+
new ProductViewModel { ProductID = 14, ProductName = "Tofu", UnitPrice = 23.25, UnitsInStock = 35, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
158+
new ProductViewModel { ProductID = 15, ProductName = "Genen Shouyu", UnitPrice = 15.5, UnitsInStock = 39, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
159+
new ProductViewModel { ProductID = 16, ProductName = "Pavlova", UnitPrice = 17.45, UnitsInStock = 29, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
160+
new ProductViewModel { ProductID = 17, ProductName = "Alice Mutton", UnitPrice = 39, UnitsInStock = 0, Discontinued = true, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
161+
new ProductViewModel { ProductID = 18, ProductName = "Carnarvon Tigers", UnitPrice = 62.5, UnitsInStock = 42, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
162+
new ProductViewModel { ProductID = 19, ProductName = "Teatime Chocolate Biscuits", UnitPrice = 9.2, UnitsInStock = 25, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
163+
new ProductViewModel { ProductID = 20, ProductName = "Sir Rodney's Marmalade", UnitPrice = 81, UnitsInStock = 40, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 0 },
164+
new ProductViewModel { ProductID = 21, ProductName = "Sir Rodney's Scones", UnitPrice = 10, UnitsInStock = 3, Discontinued = false, LastSupply = new DateTime(2023, 03, 10, 00, 00, 00), UnitsOnOrder = 40 }
165+
}
166+
167+
public virtual JsonResult Basic_Usage_Read([DataSourceRequest] DataSourceRequest request)
168+
{
169+
return Json(products.ToDataSourceResult(request));
170+
}
171+
172+
```
173+
174+
## 5. Add a Template to Render the ListView Items
175+
176+
The ListView expects a mandatory `ClientTemplateId` configuration to render the data items received from the server.
177+
178+
```HtmlHelper
179+
@using Kendo.Mvc.UI
180+
181+
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>()
182+
.Name("listView")
183+
.TagName("div")
184+
.ClientTemplateId("template")
185+
.DataSource(dataSource => dataSource
186+
.Ajax()
187+
.Read(read => read.Action("Products_Read", "ListView"))
188+
.PageSize(21)
189+
)
190+
.Pageable()
191+
)
192+
```
193+
{% if site.core %}
194+
```TagHelper
195+
@addTagHelper *, Kendo.Mvc
196+
197+
<kendo-listview name="listView"
198+
tag-name="div"
199+
template-id="template">
200+
<datasource type="DataSourceTagHelperType.Ajax" page-size="21">
201+
<transport>
202+
<read url="@Url.Action("Products_Read", "ListView")" />
203+
</transport>
204+
</datasource>
205+
<pageable enabled="true" />
206+
</kendo-listview>
207+
```
208+
{% endif %}
209+
```Template
210+
<script type="text/x-kendo-tmpl" id="template">
211+
<div class="product">
212+
<img src="@Url.Content("~/shared/web/foods/")#:ProductID#.jpg" alt="#:ProductName# image" />
213+
<h3>#:ProductName#</h3>
214+
<p>#:kendo.toString(UnitPrice, "c")#</p>
215+
</div>
216+
</script>
217+
```
218+
219+
## (Optional) Reference Existing ListView Instances
220+
221+
Referencing existing component instances allows you to build on top of their configuration. To reference an existing ListView instance, use the [`jQuery.data()`](http://api.jquery.com/jQuery.data/) method. Once a reference is established, use the [ListView client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/listview#methods) to control its behavior.
222+
223+
1. Use the `id` attribute of the component instance to establish a reference.
224+
225+
```script
226+
<script>
227+
var listviewReference = $("#listView").data("kendoListView"); // listviewReference is a reference to the existing instance of the helper.
228+
</script>
229+
```
230+
231+
1. Use the [ListView client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/listview#methods) to control the behavior of the widget. In this example, you will see how to turn on the [`selectable`](https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/configuration/selectable) configuration with the use of the [`setOptions`](https://docs.telerik.com/kendo-ui/api/javascript/ui/widget/methods/setoptions) method. Then you can use the [`select`](https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/methods/select) method to programmatically select one of the items.
232+
233+
```script
234+
<script>
235+
var listview = $("#listView").data("kendoListView");
236+
listview.setOptions({selectable: "single"}); // Turn on the selectable mode of the ListView.
237+
listview.select(listview.content.children().first()); // Select the first item.
238+
</script>
239+
```
240+
241+
{% if site.core %}
242+
## Explore this Tutorial in REPL
243+
244+
You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:
245+
246+
* [Sample code with the ListView HtmlHelper](https://netcorerepl.telerik.com/cRYdvubb06kr7jZv50)
247+
* [Sample code with the ListView TagHelper](https://netcorerepl.telerik.com/QdExlOPl09DQHvVp44)
248+
249+
{% endif %}
250+
251+
## Next Steps
252+
253+
* [ListView Editing]({% slug htmlhelpers_listview_aspnetcore_editing %})
254+
* [Subscribing to the ListView's Events]({% slug listview_events %})
255+
* [ListView Selection Modes]({% slug htmlhelpers_listview_aspnetcore_selection %})
256+
257+
## See Also
258+
259+
* [Using the API of the ListView for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/listview/api)
260+
* [Client-Side API of the ListView](https://docs.telerik.com/kendo-ui/api/javascript/ui/listview)
261+
* [Server-Side API of the ListView](/api/listview)
262+
* [Knowledge Base Section](/knowledge-base)

0 commit comments

Comments
 (0)