Skip to content

Commit 44fd35c

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 8ab74bf commit 44fd35c

10 files changed

+1104
-21
lines changed

‎docs/knowledge-base/add-image-in-diagram-shape-template.md‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
---
2+
title: Add Image in Diagram Shape Template
3+
description: How to Add Image in Diagram Shape Template
4+
type: how-to
5+
page_title: How to Add Image in Diagram Shape Template | Kendo UI Diagram for jQuery
6+
slug: add-image-in-diagram-shape-template
7+
position:
8+
tags:
9+
ticketid:
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Diagram for Progress® Kendo UI®</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
26+
These samples demonstrate how you can include images in Diagram shapes.
27+
28+
## Solution 1
29+
30+
Using height and width:
31+
32+
```dojo
33+
34+
<style>
35+
.container {
36+
/* Move rendering container off-screen */
37+
position: absolute;
38+
left: -4000px;
39+
40+
/* Set dimensions */
41+
width: 100px;
42+
height: 100px;
43+
}
44+
45+
.shape {
46+
width: 100px;
47+
border: 2px solid red;
48+
text-align: center;
49+
padding-bottom: 10px;
50+
}
51+
52+
.title {
53+
font-size: 20px;
54+
margin: 5px 0 20px 0;
55+
}
56+
</style>
57+
58+
<script id="template" type="text/x-kendo-template">
59+
<div class="shape">
60+
<div class='title'>#= title #</div>
61+
<img height="100px" width="100px" src='https://demos.telerik.com/aspnet-mvc/content/dataviz/diagram/people/antonio.jpg' />
62+
Foo Bar
63+
</div>
64+
</script>
65+
66+
<div id="diagram"></div>
67+
<script>
68+
// Import the Drawing API namespaces
69+
var geom = kendo.geometry;
70+
var draw = kendo.drawing;
71+
72+
// Compile the shape template
73+
var contentTemplate = kendo.template($("#template").html());
74+
75+
function visualTemplate(options) {
76+
// Render template and bind it to the current data item
77+
var dataItem = options.dataItem;
78+
var renderElement = $("<div style='display:inline-block' />").appendTo("body");
79+
renderElement.html(contentTemplate(dataItem));
80+
81+
// Create a new group that will hold the rendered content
82+
var output = new kendo.drawing.Group();
83+
var width = renderElement.width();
84+
var height = renderElement.height();
85+
// Create a rectangle using the renderElement dimensions to expand the group while waiting for its actual content
86+
var geom = new kendo.geometry.Rect([0, 0], [width, height]);
87+
88+
output.append(new kendo.drawing.Rect(geom, { stroke: { width: 0 }}));
89+
90+
draw.drawDOM(renderElement)
91+
.then(function(group) {
92+
/* Remove helper rectangle */
93+
output.clear();
94+
95+
output.append(group);
96+
97+
/* Clean-up */
98+
renderElement.remove();
99+
});
100+
101+
var visual = new kendo.dataviz.diagram.Group();
102+
visual.drawingElement.append(output);
103+
104+
return visual;
105+
}
106+
107+
var data = [{
108+
title: "Foo",
109+
items: [{
110+
title: "Bar"
111+
}]
112+
}];
113+
114+
$("#diagram").kendoDiagram({
115+
dataSource: {
116+
data: data,
117+
schema: {
118+
model: {
119+
children: "items"
120+
}
121+
}
122+
},
123+
layout:{
124+
type: "tree",
125+
subtype: "right"
126+
},
127+
shapeDefaults: {
128+
visual: visualTemplate
129+
}
130+
});
131+
</script>
132+
133+
```
134+
135+
## Solution 2
136+
137+
Using [kendo.dataviz.diagram.Image](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/image)
138+
139+
```dojo
140+
141+
<style>
142+
.container {
143+
/* Move rendering container off-screen */
144+
position: absolute;
145+
left: -4000px;
146+
147+
/* Set dimensions */
148+
width: 100px;
149+
height: 100px;
150+
}
151+
152+
.shape {
153+
width: 100px;
154+
border: 2px solid red;
155+
text-align: center;
156+
padding-bottom: 10px;
157+
}
158+
159+
.title {
160+
font-size: 20px;
161+
margin: 5px 0 20px 0;
162+
}
163+
</style>
164+
165+
<script id="template" type="text/x-kendo-template">
166+
<div class="shape">
167+
<div class='title'>#= title #</div>
168+
<img src='https://demos.telerik.com/aspnet-mvc/content/dataviz/diagram/people/antonio.jpg' />
169+
Foo Bar
170+
</div>
171+
</script>
172+
173+
<div id="diagram"></div>
174+
<script>
175+
// Import the Drawing API namespaces
176+
var geom = kendo.geometry;
177+
var draw = kendo.drawing;
178+
179+
// Compile the shape template
180+
var contentTemplate = kendo.template($("#template").html());
181+
182+
function visualTemplate(options) {
183+
var dataviz = kendo.dataviz;
184+
var g = new dataviz.diagram.Group();
185+
var dataItem = options.dataItem;
186+
187+
g.append(new dataviz.diagram.Image({
188+
source: "../content/dataviz/diagram/people/antonio.jpg",
189+
x: 3,
190+
y: 3,
191+
width: 68,
192+
height: 68
193+
}));
194+
195+
return g;
196+
}
197+
198+
var data = [{
199+
title: "Foo",
200+
items: [{
201+
title: "Bar"
202+
}]
203+
}];
204+
205+
$("#diagram").kendoDiagram({
206+
dataSource: {
207+
data: data,
208+
schema: {
209+
model: {
210+
children: "items"
211+
}
212+
}
213+
},
214+
layout:{
215+
type: "tree",
216+
subtype: "right"
217+
},
218+
shapeDefaults: {
219+
visual: visualTemplate
220+
}
221+
});
222+
</script>
223+
224+
```

‎docs/knowledge-base/clear-daterangepicker.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: Clear DateRangePicker
3+
description: How to Clear DateRangePicker Selection
4+
type: how-to
5+
page_title: How to Clear DateRangePicker Selection | Kendo UI DateRangePicker for jQuery
6+
slug: clear-daterangepicker
7+
position:
8+
tags:
9+
ticketid:
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>DateRangePicker for Progress® Kendo UI®</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
26+
This sample demonstrates how you can clear the values of the date range picker using the [range](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker/methods/range) method.
27+
28+
## Solution
29+
30+
```dojo
31+
32+
<div id="daterangepicker"></div>
33+
<br/>
34+
<button onclick='buttonClick();'>Clear Range Picker</button>
35+
<script>
36+
$("#daterangepicker").kendoDateRangePicker({
37+
range: {
38+
start: new Date(2019, 10, 11),
39+
end: new Date(2019, 10, 22)
40+
}
41+
});
42+
function buttonClick(){
43+
var daterangepicker = $("#daterangepicker").data("kendoDateRangePicker");
44+
daterangepicker.range({
45+
start: null,
46+
end: null
47+
});
48+
}
49+
</script>
50+
51+
```

‎docs/knowledge-base/drawer-show-on-initial-load.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Show Drawer on Initial Load
3+
description: How to Show Drawer on Initial Load
4+
type: how-to
5+
page_title: How to Show Drawer on Initial Load | Kendo UI Drawer for jQuery
6+
slug: drawer-show-on-initial-load
7+
position:
8+
tags:
9+
ticketid:
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Drawer for Progress® Kendo UI®</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
26+
This sample demonstrates how you can show the Drawer initially.
27+
## Solution
28+
29+
```dojo
30+
31+
<div id="example">
32+
<div class="demo-section k-content">
33+
34+
<div id="drawer">
35+
</div>
36+
37+
</div>
38+
<script>
39+
$(document).ready(function () {
40+
var drawer = $("#drawer").kendoDrawer({
41+
template: "<ul> \
42+
<li data-role='drawer-item'><span class='k-item-text'>First Item</span></li> \
43+
<li data-role='drawer-separator'></li> \
44+
<li data-role='drawer-item'><span class='k-item-text'>Second Item</span></li> \
45+
<li data-role='drawer-item' class='k-state-selected'><span class='k-item-text'>Third Item</span></li> \
46+
<li data-role='drawer-separator'></li> \
47+
<li data-role='drawer-item'><span class='k-item-text'>Last Item</span></li> \
48+
</ul><button id='hide' class='k-button'>Hide</button>",
49+
position: 'left',
50+
swipeToOpen: false,
51+
hide: function(e){
52+
e.preventDefault();
53+
}
54+
}).data().kendoDrawer;
55+
56+
drawer.show();
57+
58+
$("#hide").click(function (e) {
59+
$("#drawer").data().kendoDrawer.hide();
60+
});
61+
});
62+
</script>
63+
<style>
64+
.fieldlist {
65+
margin: 0 0 -1em;
66+
padding: 0;
67+
}
68+
69+
.fieldlist li {
70+
list-style: none;
71+
padding-bottom: 1em;
72+
}
73+
74+
#overlay-drawer {
75+
border: 0;
76+
}
77+
78+
.k-drawer-content {
79+
padding: 1em;
80+
}
81+
82+
#example .demo-section {
83+
max-width: 640px;
84+
}
85+
</style>
86+
</div>
87+
88+
```

0 commit comments

Comments
 (0)