Skip to content

Commit 81d6cc2

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 05f68f1 commit 81d6cc2

14 files changed

+375
-142
lines changed

‎docs/controls/conversational-ui/chat/configure-chat-agent.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Connecting to Chat Bot Services
33
page_title: Connecting to Chat Bot Services | Kendo UI Chat
44
description: "Configure and connect the Kendo UI Chat widget to an existing Bot framework / service of choice."
55
slug: connect_to_chatbot_service
6-
position: 3
6+
position: 4
77
---
88

99
# Connecting to Chat Bot Services

‎docs/controls/conversational-ui/chat/connect-to-google-dialogflow.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Connecting to Google DialogFlow
33
page_title: Connecting to Google DialogFlow | Kendo UI Chat
44
description: "Configure and connect the Kendo UI Chat widget to the Google DialogFlow."
55
slug: connect_to_google_dialogflow
6-
position: 5
6+
position: 6
77
---
88

99
# Connecting to Google DialogFlow

‎docs/controls/conversational-ui/chat/connect-to-ms-bot-framework.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Connecting to Microsoft Bot Framework
33
page_title: Connecting to Microsoft Bot Framework | Kendo UI Chat
44
description: "Configure and connect the Kendo UI Chat widget to the Microsoft Bot Framework."
55
slug: connect_to_ms_bot_framework
6-
position: 4
6+
position: 5
77
---
88

99
# Connecting to Microsoft Bot Framework

‎docs/controls/conversational-ui/chat/overview.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ The Chat provides rich conversational experience that goes beyond the natural la
2525
1. (Optional) Set the width and height of the desired chat inline or by using CSS.
2626

2727
```html
28-
<div id="chart" style="width: 400px; height: 600px"></div>
28+
<div id="chat" style="width: 400px; height: 600px"></div>
2929
```
3030

3131
### Initializing the Chat
@@ -35,7 +35,7 @@ The Chat provides rich conversational experience that goes beyond the natural la
3535
1. Configure its implementation for the [`post`](/api/javascript/ui/chat/events/post) event.
3636

3737
```html
38-
<div id="chart" style="width: 400px; height: 600px"></div>
38+
<div id="chat" style="width: 400px; height: 600px"></div>
3939
<script>
4040
var chat = $("#chat").kendoChat({
4141
post: function (args) {

‎docs/controls/conversational-ui/chat/signalr-p-to-p.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Peer-to-Peer Chat with SignalR
33
page_title: Peer-to-Peer Chat with SignalR | Kendo UI Chat
44
description: "Learn how to create a peer-to-peer Chat UI with ASP.NET Core SignalR."
55
slug: signalr-p-to-p
6-
position: 6
6+
position: 7
77
---
88

99
# Peer-to-Peer Chat with SignalR

‎docs/controls/conversational-ui/chat/toolbar.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Chat Toolbar
3+
page_title: Chat Toolbar | Kendo UI Chat
4+
description: "Learn how to configure the Toolbar for the Chat UI."
5+
slug: toolbar_for_chat
6+
position: 3
7+
---
8+
9+
# Chat Toolbar
10+
11+
The Chat Toolbar allows adding different toolbar actions for achieving more user friendly conversational UI.
12+
13+
The Toolbar is placed below the Chat input box and it can be shown/hidden by clicking the toolbar icon placed just to the left from the send button. The Chat Toolbar allows you to include buttons, which the end users can interact with. By handling the [`toolClick`](/api/javascript/ui/chat/events/toolclick) event you can implement functionality based on the command executed in the toolbar.
14+
15+
## Configure Toolbar Items
16+
17+
In order to configure the Toolbar items, you will need to use the [`toolbar.buttons`](/api/javascript/ui/chat/configuration/toolbar.buttons) configuration option of the Chat widget:
18+
19+
```html
20+
<div id="chat"></div>
21+
<script>
22+
$("#chat").kendoChat({
23+
toolClick: function(e) {
24+
console.log("Button name: " + e.name);
25+
},
26+
toolbar: {
27+
buttons: [
28+
{ name: "ButtonA", iconClass: "k-icon k-i-image" },
29+
{ name: "ButtonB", iconClass: "k-icon k-i-wrench" }
30+
]
31+
}
32+
});
33+
</script>
34+
```
35+
36+
## Configure Toolbar Behavior
37+
38+
The Chat configuration object allows you to configure:
39+
40+
* The [animation](/api/javascript/ui/chat/configuration/toolbar.animation) behavior of its Toolbar.
41+
42+
* Wether the Toolbar will have a [scroll](/api/javascript/ui/chat/configuration/toolbar.scrollable). That is useful in cases when the buttons could not entirely fit within the width of the widget.
43+
44+
* Wether it could be [hidden and shown](/api/javascript/ui/chat/configuration/toolbar.toggleable) upon a button click.
45+
46+
```html
47+
<div id="chat"></div>
48+
<script>
49+
$("#chat").kendoChat({
50+
toolbar: {
51+
toggleable: true,
52+
scrollable: true,
53+
animation: {
54+
collapse: {
55+
effects: "expandVertical fadeIn",
56+
duration: 500
57+
},
58+
expand: {
59+
effects: "expandVertical fadeIn",
60+
duration: 500
61+
}
62+
},
63+
buttons: [
64+
{ name: "ButtonA", iconClass: "k-icon k-i-image" },
65+
{ name: "ButtonB", iconClass: "k-icon k-i-wrench" }
66+
]
67+
}
68+
});
69+
</script>
70+
```
71+
72+
## See Also
73+
74+
* [Chat Overview]({% slug overview_kendoui_chat_widget %})
75+
* [Connecting to Chat Bot Services]({% slug connect_to_chatbot_service %})
76+
* [Chat Items]({% slug chat_items %})
77+
* [Chat JavaScript API Reference](/api/javascript/ui/chat)
78+
79+
For runnable examples on Kendo UI Chat, refer to the [Kendo UI Demos site](http://demos.telerik.com/kendo-ui/chat/index).

‎docs/knowledge-base/grid-display-hidden-values-in-details.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
---
2+
title: Display Hidden Columns Values in Detail Template
3+
description: An example on how to show the values of the hidden column in the detail template of the Kendo UI Grid.
4+
type: how-to
5+
page_title: Responsive Value Display | Kendo UI Grid
6+
slug: grid-display-hidden-values-in-details
7+
tags: grid, responsive, details
8+
ticketid: 1180379
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
<table>
14+
<tr>
15+
<td>Product Version</td>
16+
<td>2018.2.620</td>
17+
</tr>
18+
<tr>
19+
<td>Product</td>
20+
<td>Grid for Progress® Kendo UI®</td>
21+
</tr>
22+
</table>
23+
24+
## Description
25+
26+
How can I display the hidden columns values in the detail template of the rows in the Kendo UI Grid?
27+
28+
## Solution
29+
30+
To display the hidden columns values:
31+
32+
1. Implement a [`detailTemplate`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/detailtemplate).
33+
1. Use [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to show and hide the desired data in the detail template.
34+
35+
```html
36+
<style>
37+
.k-hierarchy-col,
38+
.k-hierarchy-cell{
39+
display: none;
40+
}
41+
42+
.k-grid-header .k-hierarchy-cell+th{
43+
border-left-width: 0;
44+
}
45+
46+
.grid-name,
47+
.grid-age{
48+
display: none;
49+
}
50+
51+
@media only screen and (max-width: 749px){
52+
.k-hierarchy-col{
53+
display: table-column;
54+
}
55+
56+
.k-hierarchy-cell{
57+
display: table-cell;
58+
}
59+
60+
.k-grid-header .k-hierarchy-cell+th{
61+
border-left-width: 1px;
62+
}
63+
64+
.grid-age{
65+
display: block;
66+
}
67+
}
68+
69+
@media only screen and (max-width: 499px){
70+
.grid-name{
71+
display: block;
72+
}
73+
}
74+
</style>
75+
76+
<div id="grid"></div>
77+
78+
<script id="detail-template" type="text/x-kendo-template">
79+
<div class='grid-name'>
80+
Name: #: name #
81+
</div>
82+
<div class='grid-age'>
83+
Age: #: age #
84+
</div>
85+
</script>
86+
87+
<script>
88+
$("#grid").kendoGrid({
89+
columns: [
90+
{ field: "id" },
91+
{ field: "name", width: 250, minScreenWidth: 500 },
92+
{ field: "age", width: 250, minScreenWidth: 750 }
93+
],
94+
dataSource: [
95+
{ id: 1, name: "Jane Doe", age: 31, city: "Boston" },
96+
{ id: 2, name: "John Doe", age: 55, city: "New York" }
97+
],
98+
detailTemplate: kendo.template($("#detail-template").html()),
99+
columnShow: function(e){
100+
if(window.innerWidth>=750){
101+
e.sender.collapseRow(".k-master-row");
102+
}
103+
}
104+
});
105+
</script>
106+
```

‎docs/knowledge-base/treelist-drag-and-scroll-mobile.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Scroll and Drag & Drop on Mobile Devices
3+
description: An example on how to provide scrolling and the drag and drop functionality at the same time in the Kendo UI TreeList on mobile devices.
4+
type: how-to
5+
page_title: Drag and Drop on Mobile Devices | Kendo UI TreeList
6+
slug: treelist-drag-and-scroll-mobile
7+
tags: treelist, android, ios, mobile, drag, drop, scroll
8+
ticketid: 1179396
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
<table>
14+
<tr>
15+
<td>Product Version</td>
16+
<td>2018.2.620</td>
17+
</tr>
18+
<tr>
19+
<td>Product</td>
20+
<td>TreeList for Progress® Kendo UI®</td>
21+
</tr>
22+
</table>
23+
24+
## Description
25+
26+
How can I use the Drag & Drop functionality of the Kendo UI TreeList on mobile devices?
27+
28+
## Solution
29+
30+
To overcome the interference of the device scrolling and the Drag & Drop:
31+
32+
1. Add an additional column for dragging.
33+
1. Stop the propagation of the `touchstart` event for all the other cells.
34+
35+
> Test the below code on a mobile device.
36+
37+
```html
38+
<div id="example">
39+
40+
<div id="treelist"></div>
41+
<script>
42+
$(document).ready(function() {
43+
var service = "https://demos.telerik.com/kendo-ui/service";
44+
45+
$("#treelist").kendoTreeList({
46+
dataSource: {
47+
transport: {
48+
read: {
49+
url: service + "/EmployeeDirectory/All",
50+
dataType: "jsonp"
51+
}
52+
},
53+
schema: {
54+
model: {
55+
id: "EmployeeID",
56+
parentId: "ReportsTo",
57+
fields: {
58+
ReportsTo: { field: "ReportsTo", nullable: true },
59+
EmployeeID: { field: "EmployeeId", type: "number" },
60+
Extension: { field: "Extension", type: "number" }
61+
},
62+
expanded: true
63+
}
64+
}
65+
},
66+
height: 540,
67+
editable: {
68+
move: true
69+
},
70+
columns: [
71+
{
72+
field: "FirstName",
73+
title: "First Name"
74+
},
75+
{
76+
template: "<span class='k-icon k-i-handler-drag'></span>",
77+
width: 35
78+
}
79+
]
80+
});
81+
$("#treelist").on("touchstart", "td:not(:last-child)", function(e){
82+
e.stopPropagation();
83+
});
84+
});
85+
</script>
86+
</div>
87+
```

0 commit comments

Comments
 (0)