Skip to content

Commit 9fb6175

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent ab14cde commit 9fb6175

File tree

15 files changed

+251
-30
lines changed

15 files changed

+251
-30
lines changed

‎docs-aspnet-core/helpers/html-helpers/dropdowntree.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
---
2+
title: DropDownTree
3+
page_title: DropDownTree | Telerik UI for ASP.NET Core HtmlHelpers
4+
description: "Learn the basics when working with the DropDownTree HtmlHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: htmlhelpers_dropdowntree_aspnetcore
6+
position: 22
7+
---
8+
9+
# DropDownTree HtmlHelper Overview
10+
As of the Kendo UI R2 2018, the DropDownTree is available in the Telerik UI for ASP.NET Core suite.
11+
12+
The DropDownTree HtmlHelper extension is a server-side wrapper for the [Kendo UI DropDownTree](http://demos.telerik.com/kendo-ui/dropdowntree/index) widget.
13+
14+
It allows you to configure the Kendo UI DropDownTree widget from server-side code. The [DropDownTree](http://docs.telerik.com/kendo-ui/controls/editors/dropdowntree/overview) widget represents an editor of hierarchical data, rendered in a tree-like structure, which provides multiple selection option and custom nodes.
15+
16+
## Basic Usage
17+
18+
The following example demonstrates how to define the DropDownTree by using the DropDownTree HtmlHelper.
19+
20+
###### Example
21+
22+
```tab-Razor
23+
@(Html.Kendo().DropDownTree()
24+
.Name("dropdowntree")
25+
.DataTextField("Name")
26+
.DataSource(dataSource => dataSource
27+
.Read(read => read
28+
.Action("Read_DropDownTreeData", "DropDownTree")
29+
)
30+
)
31+
)
32+
```
33+
```tab-Controller
34+
public class DropDownTreeController : Controller
35+
{
36+
public IActionResult Index()
37+
{
38+
return View();
39+
}
40+
41+
public static IList<HierarchicalViewModel> GetHierarchicalData()
42+
{
43+
var result = new List<HierarchicalViewModel>()
44+
{
45+
new HierarchicalViewModel() { ID = 1, ParentID = null, HasChildren = true, Name = "Parent item" },
46+
new HierarchicalViewModel() { ID = 2, ParentID = 1, HasChildren = true, Name = "Parent item" },
47+
new HierarchicalViewModel() { ID = 3, ParentID = 1, HasChildren = false, Name = "Item" },
48+
new HierarchicalViewModel() { ID = 4, ParentID = 2, HasChildren = false, Name = "Item" },
49+
new HierarchicalViewModel() { ID = 5, ParentID = 2, HasChildren = false, Name = "Item" }
50+
};
51+
52+
return result;
53+
}
54+
55+
public IActionResult Read_DropDownTreeData(int? id)
56+
{
57+
var result = GetHierarchicalData()
58+
.Where(x => id.HasValue ? x.ParentID == id : x.ParentID == null)
59+
.Select(item => new {
60+
id = item.ID,
61+
Name = item.Name,
62+
expanded = item.Expanded,
63+
imageUrl = item.ImageUrl,
64+
hasChildren = item.HasChildren
65+
});
66+
67+
return Json(result);
68+
}
69+
}
70+
```
71+
72+
## Configuration
73+
74+
The following example demonstrates the basic configuration of the DropDownTree HtmlHelper and how to get the DropDownTree instance.
75+
76+
###### Example
77+
78+
```
79+
@(Html.Kendo().DropDownTree()
80+
.Name("dropdowntree")
81+
.Checkboxes(true)
82+
.DataTextField("Name")
83+
.DataSource(dataSource => dataSource
84+
.Read(read => read
85+
.Action("Employees", "DropDownTree")
86+
)
87+
)
88+
89+
)
90+
91+
<script type="text/javascript">
92+
$(function () {
93+
//Notice that the Name() of the DropDownTree is used to get its client-side instance.
94+
var dropdowntree = $("#dropdowntree").data("kendoDropDownTree");
95+
console.log(dropdowntree);
96+
});
97+
</script>
98+
```
99+
100+
## See Also
101+
102+
* [JavaScript API Reference of the DropDownTree](http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdowntree)
103+
* [DropDownTree HtmlHelper for ASP.NET MVC](http://docs.telerik.com/aspnet-mvc/helpers/dropdowntree/overview)
104+
* [DropDownTree Official Demos](http://demos.telerik.com/aspnet-core/dropdowntree/index)
105+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
106+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
107+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects on Linux]({% slug gettingstartedlinux_aspnetmvc6_aspnetmvc %})
108+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/helpers/tag-helpers/dropdowntree.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
title: DropDownTree
3+
page_title: DropDownTree | Telerik UI for ASP.NET Core Tag Helpers
4+
description: "Learn the basics when working with the DropDownTree tag helper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
previous_url: /aspnet-core/helpers/dropdowntree
6+
slug: taghelpers_dropdowntree_aspnetcore
7+
---
8+
9+
# DropDownTree Tag Helper Overview
10+
11+
The DropDownTree tag helper helps you configure the Kendo UI DropDownTree widget in ASP.NET Core applications.
12+
13+
## Basic Usage
14+
15+
The following example demonstrates how to define the DropDownTree by using the DropDownTree tag helper.
16+
17+
###### Example
18+
19+
<kendo-dropdowntree name="dropdowntree1">
20+
</kendo-dropdowntree>
21+
22+
## Configuration
23+
24+
The DropDownTree tag helper configuration options are passed as attributes of the tag. You can configure the items by binding the widget to `<hierarchical-datasource>`.
25+
26+
###### Example
27+
28+
```tab-tagHelper
29+
<kendo-dropdowntree name="dropdowntree1" datatextfield="FullName">
30+
<hierarchical-datasource>
31+
<transport>
32+
<read url="https://demos.telerik.com/kendo-ui/service/Employees" datatype="jsonp" />
33+
</transport>
34+
<schema type="json">
35+
<hierarchical-model id="EmployeeId" has-children="HasEmployees">
36+
</hierarchical-model>
37+
</schema>
38+
</hierarchical-datasource>
39+
</kendo-dropdowntree>
40+
```
41+
```tab-cshtml
42+
@(Html.Kendo().DropDownTree()
43+
.Name("dropdowntree")
44+
.Items(dropdowntree =>
45+
{
46+
dropdowntree.Add().Text("My Web Site")
47+
.SpriteCssClasses("folder")
48+
.Expanded(true)
49+
.Items(root =>
50+
{
51+
root.Add().Text("images")
52+
.Expanded(true)
53+
.SpriteCssClasses("folder")
54+
.Items(images =>
55+
{
56+
images.Add().Text("logo.png")
57+
.SpriteCssClasses("image");
58+
});
59+
60+
root.Add().Text("resources")
61+
.Expanded(true)
62+
.SpriteCssClasses("folder")
63+
.Items(resources =>
64+
{
65+
resources.Add().Text("pdf")
66+
.Expanded(true)
67+
.SpriteCssClasses("folder")
68+
.Items(pdf =>
69+
{
70+
pdf.Add().Text("prices.pdf")
71+
.SpriteCssClasses("pdf");
72+
});
73+
74+
resources.Add().Text("zip")
75+
.SpriteCssClasses("folder");
76+
});
77+
78+
root.Add().Text("about.html")
79+
.SpriteCssClasses("html");
80+
81+
root.Add().Text("index.html")
82+
.SpriteCssClasses("html");
83+
});
84+
})
85+
)
86+
```
87+
88+
## See Also
89+
90+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
91+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
92+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects on Linux]({% slug gettingstartedlinux_aspnetmvc6_aspnetmvc %})
93+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs/intro/installation/prerequisites.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ The following table provides a list of the jQuery versions that are compatible w
2727

2828
| Major Releases | jQuery Version | Comments |
2929
| :--- | :--- | :--- |
30+
| [Kendo UI 2018.2.515 (R2 2018)](https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r2-2018) |1.12.4| Also compatible with 1.10.x, 2.2.x and 3.3.1|
3031
| [Kendo UI 2018.1.117 (R1 2018)](https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r1-2018) |1.12.4| Also compatible with 1.10.x, 2.2.x and 3.1.1|
3132
| [Kendo UI 2017.3.913 (R3 2017)](https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r3-2017) |1.12.3| Also compatible with 1.10.x, 2.2.x and 3.1.1|
3233
| [Kendo UI 2017.2.504 (R2 2017)](https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r2-2017) |1.12.3| Also compatible with 1.10.x, 2.2.x and 3.1.1|

‎styles/web/Default/chat/layout.less

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@
117117

118118
// Message
119119
.k-message {
120+
max-width: 100%;
120121
margin: @chat-bubble-spacing 0 0;
121122
position: relative;
122123
transition: margin .2s ease-in-out;
@@ -154,6 +155,7 @@
154155
border-width: 1px;
155156
border-style: solid;
156157
line-height: @chat-bubble-line-height;
158+
word-wrap: break-word;
157159
}
158160

159161

@@ -193,10 +195,10 @@
193195
}
194196
}
195197
.k-avatars {
196-
.k-message-group:not(.k-alt) {
198+
.k-message-group:not(.k-alt):not(.k-no-avatar) {
197199
padding-left: calc( ~"@{chat-avatar-size} + @{chat-avatar-spacing}" );
198200
}
199-
.k-message-group.k-alt {
201+
.k-message-group.k-alt:not(.k-no-avatar) {
200202
padding-right: calc( ~"@{chat-avatar-size} + @{chat-avatar-spacing}" );
201203
}
202204
}
@@ -225,6 +227,7 @@
225227
// Quick reply
226228
.k-quick-replies {
227229
display: block;
230+
max-width: 100%; //IE fix
228231
}
229232
.k-quick-reply {
230233
.border-radius( 100px );
@@ -290,6 +293,8 @@
290293
}
291294

292295
.k-chat .k-card-deck {
296+
max-width: calc( 125% + calc( ~"@{chat-avatar-size} + @{chat-avatar-spacing}"));
297+
box-sizing: border-box;
293298
margin-left: -@chat-message-list-padding-y;
294299
margin-right: -@chat-message-list-padding-y;
295300
padding-left: @chat-message-list-padding-y;
@@ -302,7 +307,7 @@
302307
}
303308
}
304309
.k-chat .k-card-deck .k-card {
305-
flex-basis: 200px;
310+
width: 200px;
306311
}
307312

308313

@@ -399,16 +404,20 @@
399404
left: 0;
400405
}
401406
.k-avatars {
402-
.k-message-group:not(.k-alt) {
407+
.k-message-group:not(.k-alt):not(.k-no-avatar) {
403408
padding-left: 0;
404409
padding-right: calc( ~"@{chat-avatar-size} + @{chat-avatar-spacing}" );
405410
}
406-
.k-message-group.k-alt {
411+
.k-message-group.k-alt:not(.k-no-avatar) {
407412
padding-right: 0;
408413
padding-left: calc( ~"@{chat-avatar-size} + @{chat-avatar-spacing}" );
409414
}
410415
}
411416

417+
.k-message-box .k-button svg {
418+
transform: rotate(180deg)
419+
}
420+
412421

413422
// Quick replies
414423
.k-quick-reply {

‎styles/web/Default/chat/theme.less

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,14 @@
4747

4848
// Quick replies
4949
.k-quick-reply {
50-
border-color: @accent;
51-
color: @accent;
50+
border-color: @chat-quick-reply-color;
51+
color: @chat-quick-reply-color;
5252
background-color: transparent;
5353
}
5454
.k-quick-reply:hover {
55-
border-color: @accent;
56-
color: contrast(@accent);
57-
background-color: @accent;
55+
border-color: @chat-quick-reply-color;
56+
color: contrast(@chat-quick-reply-color);
57+
background-color:@chat-quick-reply-color;
5858
}
5959

6060

‎styles/web/common/menu.less

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -64,21 +64,14 @@ ul.k-menu-vertical > .k-item
6464
.k-popups-wrapper .k-item > .k-link > .k-icon,
6565
.k-popups-wrapper .k-image,
6666
.k-popups-wrapper .k-sprite,
67-
.k-menu .k-link > .k-icon,
67+
.k-menu .k-item > .k-link > .k-icon,
6868
.k-menu .k-image,
6969
.k-menu .k-sprite
7070
{
7171
margin: -2px 4px 0 -4px;
7272
vertical-align: middle;
7373
}
7474

75-
.k-menu-scroll-wrapper .k-item > .k-link > .k-menu-expand-arrow,
76-
.k-popups-wrapper .k-item > .k-link > .k-menu-expand-arrow,
77-
.k-menu .k-link > .k-menu-expand-arrow
78-
{
79-
margin: -2px 0 0;
80-
}
81-
8275
.k-menu-scroll-wrapper .k-item > .k-link,
8376
.k-popups-wrapper .k-item > .k-link,
8477
.k-menu .k-item > .k-link
@@ -150,6 +143,13 @@ ul.k-menu-vertical > .k-item
150143
border: 0;
151144
}
152145

146+
.k-menu-scroll-wrapper .k-item > .k-link > .k-menu-expand-arrow,
147+
.k-popups-wrapper .k-item > .k-link > .k-menu-expand-arrow,
148+
.k-menu-horizontal > .k-item > .k-link > .k-menu-expand-arrow
149+
{
150+
margin: -2px 0 0;
151+
}
152+
153153
.k-menu-scroll-wrapper .k-item > .k-link > .k-i-arrow-60-down,
154154
.k-popups-wrapper .k-item > .k-link > .k-i-arrow-60-down,
155155
.k-menu .k-item > .k-link > .k-i-arrow-60-down
@@ -159,8 +159,8 @@ ul.k-menu-vertical > .k-item
159159

160160
.k-menu-scroll-wrapper .k-item > .k-link > .k-i-arrow-60-right,
161161
.k-popups-wrapper .k-item > .k-link > .k-i-arrow-60-right,
162-
.k-menu-group .k-link > .k-menu-expand-arrow,
163-
.k-menu-vertical .k-link > .k-menu-expand-arrow,
162+
.k-menu-group .k-item > .k-link > .k-menu-expand-arrow,
163+
.k-menu-vertical .k-item > .k-link > .k-menu-expand-arrow,
164164
{
165165
position: absolute;
166166
top: 50%;

‎styles/web/kendo.rtl.less

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -526,8 +526,8 @@
526526
margin-left: -8px;
527527
}
528528

529-
.k-rtl .k-menu-group .k-menu-expand-arrow,
530-
.k-rtl .k-menu-vertical .k-link > .k-menu-expand-arrow,
529+
.k-rtl .k-menu-group .k-item > .k-link > .k-menu-expand-arrow,
530+
.k-rtl .k-menu-vertical .k-item > .k-link > .k-menu-expand-arrow,
531531
{
532532
right: auto;
533533
left: .2rem;
@@ -1149,10 +1149,3 @@
11491149
margin-left: 0;
11501150
}
11511151
}
1152-
1153-
/* Chat */
1154-
.k-rtl {
1155-
.k-message-box .k-button svg {
1156-
transform: rotate(180deg)
1157-
}
1158-
}

‎styles/web/kendo.uniform.less

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@accent: #676767;
1+
@accent: #dedede;
22
@base: #fff;
33
@background: #fff;
44

@@ -34,3 +34,4 @@
3434
@import "type-default.less";
3535

3636
@checkbox-active-box-shadow: 0 0 2px 0 @checkbox-active-border-color;
37+
@chat-quick-reply-color: darken(@accent, 47);

‎styles/web/type-bootstrap.less

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,8 @@
223223
@chat-alt-bubble-text: contrast(@accent);
224224
@chat-alt-bubble-border: @chat-alt-bubble-bg;
225225

226+
@chat-quick-reply-color: @accent;
227+
226228
/* Kendo skin */
227229

228230
@theme-name: ~"bootstrap";

0 commit comments

Comments
 (0)