Skip to content

Commit 616f7b3

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 1282d86 commit 616f7b3

30 files changed

+1028
-2
lines changed

‎docs-aspnet/html-helpers/data-management/treelist/filtering.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: Filtering
3+
page_title: Filtering
4+
description: "Learn how to enable the filtering functionality of the Telerik UI TreeList for {{ site.framework }}."
5+
slug: htmlhelpers_treelist_aspnetcore_filtering
6+
position: 4
7+
---
8+
9+
# Filtering
10+
11+
The TreeList component comes with built-in filtering that enables you to display only the rows that match specific search criteria.
12+
13+
## Getting Started
14+
15+
To enable filtering in TreeList, use the `Filterable` property.
16+
17+
@(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.OrderViewModel>()
18+
.Name("treelist")
19+
.Filterable() // Enable the Menu filter mode.
20+
...
21+
22+
## Filter Modes
23+
24+
TreeList supports the _Filter row_ filter mode. To set the row filter mode, use the `Filterable->Mode` property:
25+
26+
`.Filterable(ftb => ftb.Mode("row"))`
27+
28+
In this filter mode, the Kendo UI TreeList will analyze the underlying columns' data, and then it will render the following filters in the column headers:
29+
30+
* Kendo UI TextBoxes for string values
31+
* Kendo UI NumericTextBoxes numeric values
32+
* Kendo UI DatePickers for dates
33+
34+
To see the filter row in action, visit the [demo page](https://demos.telerik.com/{{ site.platform }}/treelist/filter-row).
35+
36+
## See Also
37+
38+
* [Filter Rows by the TreeList HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/treelist/filter-row)
39+
* [Server-Side API](/api/treelist)

‎docs-aspnet/html-helpers/data-management/treelist/row-templates.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: Row Templates
3+
page_title: Row Templates
4+
description: "Get started with the {{ site.product_short }} TreeList by Kendo UI and learn how to place custom content into a treelist row with the help of row templates."
5+
slug: row_templates_aspnetcore_treelist
6+
position: 3
7+
---
8+
9+
# Row Templates
10+
11+
The Kendo UI TreeList supports a row template that enables you to place custom content into a TreeList row.
12+
13+
For runnable example, refer to:
14+
* [Demo on using the row template of the TreeList HtmlHelper for {{ site.framework }}](https://demos.telerik.com/{{ site.platform }}/treelist/rowtemplate)
15+
16+
The following example demonstrates how to implement a row template by using its Id:
17+
18+
.Columns(columns =>
19+
{
20+
columns.Add().Field(e => e.FirstName).Title("Employee").Width(280).TemplateId("photo-template").Width(180);
21+
columns.Add().Field(e => e.Country).Title("Country").Width(160).TemplateId("country-template");
22+
columns.Add().Field(e => e.HireDate).Title("Length of Service").Width(160).TemplateId("lengthOfService-template");
23+
})
24+
25+
The following scripts will generate the content for the templates:
26+
27+
```
28+
<script id="photo-template" type="text/x-kendo-template">
29+
<div class='employee-photo'
30+
style='background-image: url(@Url.Content("~/content/web/treelist/people")/#: EmployeeId #.jpg);'></div>
31+
<div class='employee-name'>#: FirstName # #: LastName # <span class = 'employee-position'>#: Position #</span></div>
32+
</script>
33+
34+
<script id="country-template" type="text/x-kendo-template">
35+
<img class= "county-flag" src="../Content/web/country-flags/#: CountryFlag #.png" />
36+
</script>
37+
38+
<script id="lengthOfService-template" type="text/x-kendo-template">
39+
<span id='badge_#=EmployeeId#' class='badgeTemplate'>#: Math.floor((kendo.date.today() - HireDate)/(365*24*60*60*1000)) #</span>
40+
</script>
41+
```
42+
43+
## See Also
44+
45+
* [Using Row Templates in the TreeList HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/treelist/rowtemplate)
46+
* [Server-Side API](/api/treelist)

‎docs-aspnet/html-helpers/navigation/drawer/hierarchy.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Hierarchy
3+
page_title: Hierarchy
4+
description: "Find out how to create an item hierarchy using the Telerik UI Drawer HtmlHelper for {{ site.framework }}."
5+
slug: hierarchy_drawer_aspnetcore
6+
position: 6
7+
---
8+
9+
# Hierarchy
10+
11+
The Kendo UI Drawer provides the built-in functionality to create a hierarchical structure. Visit the [Hierarchy demo](https://demos.telerik.com/{{ site.platform }}/drawer/hierarchy) for a live example.
12+
13+
## Configuration
14+
15+
To utilize the hierarchy functionality of the Telerik UI Drawer:
16+
17+
1. Add list elements with data-role attribute `drawer-item` and class `hidden` to the drawer's `Template` configuration.
18+
19+
```Razor
20+
@(Html.Kendo().Drawer()
21+
.Name("drawer")
22+
.Template(@"
23+
<ul>
24+
<li data-role='drawer-item' class='k-state-selected'><span class='k-icon k-i-information'></span><span class='k-item-text' data-id='GettingStarted'>Getting Started</span><span class='k-spacer'></span><span class='k-icon k-i-arrow-chevron-right'></span></li>
25+
<li data-role='drawer-separator'></li>
26+
<li data-role='drawer-item' class='hidden'><span class='k-icon k-i-none'></span><span class='k-icon k-i-question'></span><span class='k-item-text' data-id='Kendo'>About Kendo UI</span></li>
27+
<li data-role='drawer-item' class='hidden'><span class='k-icon k-i-none'></span><span class='k-icon k-i-palette'></span><span class='k-item-text' data-id='ThemeSupport'>Supported Themes</span></li>
28+
<li data-role='drawer-separator'></li>
29+
<li data-role='drawer-item'><span class='k-icon k-i-zoom'></span><span class='k-item-text' data-id='Overview'>Overview</span><span class='k-spacer'></span><span class='k-icon k-i-arrow-chevron-right'></li>
30+
<li data-role='drawer-item' class='hidden'><span class='k-icon k-i-none'></span><span class='k-icon k-i-js'></span><span class='k-item-text' data-id='About'>About Kendo</span></li>
31+
<li data-role='drawer-item' class='hidden'><span class='k-icon k-i-none'></span><span class='k-icon k-i-style-builder'></span><span class='k-item-text' data-id='All'>All Kendo Components</span></li>
32+
<li data-role='drawer-separator'></li>
33+
<li data-role='drawer-item'><span class='k-icon k-i-star'></span><span class='k-item-text' data-id='Popular'>Most popular components</span></li>
34+
</ul>
35+
")
36+
)
37+
```
38+
39+
1. Add the `ItemClick` event handler to the drawer's configuration.
40+
41+
```Razor
42+
@(Html.Kendo().Drawer()
43+
.Name("drawer")
44+
.Events(x => x.ItemClick("onItemClick"))
45+
)
46+
```
47+
48+
1. Define the `onItemClick` handling function.
49+
50+
```html
51+
<script>
52+
function onItemClick(e) {
53+
if (!e.item.hasClass("k-drawer-separator")) {
54+
var drawerContainer = e.sender.drawerContainer;
55+
var expandIcon = e.item.find("span.k-i-arrow-chevron-right");
56+
var collapseIcon = e.item.find("span.k-i-arrow-chevron-down");
57+
drawerContainer.find("#drawer-content > div").addClass("hidden");
58+
drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-item-text").attr("data-id")).removeClass("hidden");
59+
60+
/* If the expandIcon is visible, the sub-items are hidden. Clicking on the icon should remove the hidden class and reveal the items.*/
61+
if (expandIcon.length) {
62+
e.item.nextAll(".k-drawer-item:not(.k-drawer-separator):lt(2)").removeClass("hidden");
63+
expandIcon.removeClass("k-i-arrow-chevron-right").addClass("k-i-arrow-chevron-down");
64+
}
65+
66+
/* If the collapseIcon is visible, the sub-items are visible. Clicking on the icon should add the hidden class and hide the items. */
67+
if (collapseIcon.length) {
68+
e.item.nextAll(".k-drawer-item:not(.k-drawer-separator):lt(2)").addClass("hidden");
69+
collapseIcon.addClass("k-i-arrow-chevron-right").removeClass("k-i-arrow-chevron-down");
70+
}
71+
}
72+
}
73+
</script>
74+
```
75+
76+
## See Also
77+
78+
* [Hierarchy by the Drawer HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/drawer/hierarchy)
79+
* [Server-Side API](/api/drawer)

‎docs-aspnet/html-helpers/navigation/drawer/overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ The following example demonstrates how to define the Drawer by using the Drawer
4040
* [Display modes]({% slug displaymodes_drawer_aspnetcore %})
4141
* [Interaction modes]({% slug interactionmodes_drawer_aspnetcore %})
4242
* [Templates]({% slug templates_drawer_aspnetcore %})
43+
* [Hierarchy]({% slug hierarchy_drawer_aspnetcore %})
4344

4445
## Referencing Existing Instances
4546

0 commit comments

Comments
 (0)