Skip to content

Commit cf1ece5

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 89500ba commit cf1ece5

File tree

3 files changed

+389
-0
lines changed

3 files changed

+389
-0
lines changed

‎docs/knowledge-base/extend-kendo-svg-icons-jquery.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Extending Kendo SVG Icons with Custom Ones
3+
description: Learn how to extend the Kendo UI for jQuery SVG icons library by creating and adding custom SVG icons.
4+
type: how-to
5+
page_title: How to Add Custom SVG Icons to Kendo UI for jQuery
6+
slug: extend-kendo-svg-icons-jquery
7+
tags: kendo, ui, jquery, svg, icons, custom, extend
8+
res_type: kb
9+
ticketid: 1670081
10+
---
11+
12+
## Description
13+
Creating custom SVG icons and extending the existing Kendo UI for jQuery SVG icons library is a straightforward process. This KB article demonstrates how to add a custom SVG icon to the list of available icons in Kendo UI for jQuery library.
14+
15+
This KB article also answers the following questions:
16+
- How can I add a custom icon to the Kendo UI for jQuery Icon library?
17+
- What is the process for creating a custom SVG icon in Kendo UI for jQuery?
18+
- Can I extend the Kendo UI SVG icons with custom designs?
19+
20+
## Environment
21+
<table>
22+
<tbody>
23+
<tr>
24+
<td>Product</td>
25+
<td>Kendo UI for jQuery</td>
26+
</tr>
27+
<tr>
28+
<td>Version</td>
29+
<td>2024.4.1112</td>
30+
</tr>
31+
</tbody>
32+
</table>
33+
34+
## Solution
35+
To create and use a custom SVG icon within the Kendo UI for jQuery, follow these steps:
36+
37+
1. Define the custom icon by specifying its `name`, `content`, and `viewBox`. The `content` should contain the SVG path data.
38+
39+
```javascript
40+
let myCustomIcon = {
41+
name: 'my-custom',
42+
content: '<path d="..."></path>', // Specify the SVG path data
43+
viewBox: '0 0 512 512' // Define the viewBox dimensions
44+
};
45+
```
46+
47+
2. Extend the `kendo.ui.svgIcons` object with the newly created custom icon.
48+
49+
```javascript
50+
kendo.ui.svgIcons = $.extend({ myCustomIcon }, kendo.ui.svgIcons);
51+
```
52+
53+
3. Reference the custom icon by its name (`my-custom` in this case).
54+
55+
Here is an example of how to use the custom icon in a Kendo Button:
56+
57+
```dojo
58+
<button id="button" type="button">
59+
<span class="k-icon"></span> Inbox
60+
</button>
61+
62+
<div id="toolbar"></div>
63+
64+
<script>
65+
let myCustomIcon = {
66+
name: 'my-custom',
67+
content: '<path d="M448 32H64c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32M256 448c-106 0-192-86-192-192S150 64 256 64s192 86 192 192-86 192-192 192m28-164.8c-82.9 28.9-118.1 83.4-126.7 98.7 27.2 21.3 61.5 34.1 98.7 34.1 22.5 0 43.9-4.6 63.3-13-3.3-18.4-13.1-65.2-34.2-120.1-.4 0-.8.2-1.1.3m-95.5-172.3c-44.9 20.9-78.5 62.1-89 111.8 17.1-.1 78.6-1.7 147.6-20-24.3-43.2-50.3-80.1-58.6-91.8m79 146.8c2.1-.7 4.3-1.3 6.5-2-4.1-9.3-8.6-18.6-13.3-27.8-74.1 22.2-146.1 23.4-164.6 23.4 0 1.6-.1 3.1-.1 4.7 0 40.8 15.3 78 40.4 106.3 10.5-16.7 54.6-79.9 131.1-104.6m94.9-121.1C334.2 111.3 296.9 96 256 96c-12.4 0-24.5 1.4-36 4.1 8.7 11.9 34.9 48.8 58.8 92.7 50.7-19 76-46.7 83.6-56.2m-46.6 138.7C335 328 344 371.9 346.9 387.8c35.2-24.3 60.2-62.5 67.2-106.6-13.2-3.7-53.4-13.1-98.3-5.9m-24.4-58.1c3.8 7.8 7.5 15.8 10.9 23.8 1.2 2.8 2.4 5.7 3.5 8.5 48-6 95.7 1.8 110.2 4.5-.5-37.2-13.7-71.4-35.4-98.3-8.4 10-36.1 39.8-89.2 61.5"></path>',
68+
viewBox: '0 0 512 512'
69+
};
70+
kendo.ui.svgIcons = $.extend({ myCustomIcon }, kendo.ui.svgIcons)
71+
72+
$("#button").kendoButton({
73+
icon: "my-custom"
74+
});
75+
76+
$("#toolbar").kendoToolBar({
77+
items: [
78+
{ type: "button", text: "foo", icon: "my-custom" },
79+
{ type: "button", text: "bar", icon: "info-circle" }
80+
]
81+
});
82+
</script>
83+
```
84+
85+
## See Also
86+
- [Kendo UI Icons Overview](https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web)
87+
- [Kendo UI Icons API Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/ui/methods/icon)

‎docs/knowledge-base/how-to-display-chart-data-zoomed-to-last-30-days.md‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
---
2+
title: Displaying a Year's Data in a Chart Zoomed to the Last 30 Days
3+
description: Learn how to present a chart with 365 days of data initially zoomed to show only the last 30 days using Kendo UI Chart.
4+
type: how-to
5+
page_title: How to Zoom into the Last 30 Days on a Kendo UI Chart
6+
slug: how-to-display-chart-data-zoomed-to-last-30-days
7+
tags: kendo ui, chart, zoom, categoryaxis, date, data visualization
8+
res_type: kb
9+
ticketid: 1627452
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>
19+
Chart for Progress® Kendo UI®, <br />
20+
</td>
21+
</tr>
22+
<tr>
23+
<td>Version</td>
24+
<td>2024.3.1015</td>
25+
</tr>
26+
</tbody>
27+
</table>
28+
29+
## Description
30+
31+
I need to display a chart with 365 days of data but want it zoomed by default to only show the last 30 days. This KB article also answers the following questions:
32+
- How to set the initial zoom level of a Kendo UI Chart?
33+
- How to display a specific date range in a Kendo UI Chart by default?
34+
- How to configure the category axis of a Kendo UI Chart for specific date ranges?
35+
36+
## Solution
37+
38+
To display a chart with 365 days of data initially zoomed to the last 30 days, configure the [`categoryAxis.min`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.min) and [`categoryAxis.max`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.max) options. These options control the initial zoom level by setting the visible date range on the chart. Here's how to set it up:
39+
40+
1. Define the `categoryAxis` with a [`type`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.type) of `"date"`.
41+
2. Set the `min` and `max` properties to define the visible date range. For example, to zoom in on December 1st to 31st, 2023:
42+
43+
```javascript
44+
categoryAxis: {
45+
type: "date",
46+
min: new Date(2023, 11, 1), // December 1, 2023
47+
max: new Date(2023, 11, 31) // December 31, 2023
48+
},
49+
```
50+
51+
This configuration zooms the chart to display only the specified date range, while still allowing users to zoom in and out within the full 365 days of data.
52+
53+
If you need a more interactive approach, consider using the [Stock Chart](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/stockchart) with the Navigator enabled. This allows users to see that the chart displays a specific period and provides a visual way to adjust the zoom level.
54+
55+
For an example of how to configure the `categoryAxis.min` and `max`, refer to next Dojo demo.
56+
57+
```dojo
58+
<div id="example">
59+
<div class="box wide">
60+
<p>Use SHIFT + Mouse Drag Region Selection combination on mouse-enabled devices to zoom in data for a specific period of time</p>
61+
62+
</div>
63+
<div class="demo-section k-content wide">
64+
<div id="chart"></div>
65+
</div>
66+
<script>
67+
// Sample data
68+
var data = [];
69+
for (var i = 0; i <= 365; i++) {
70+
var val = Math.round(Math.random() * 10);
71+
var firstDate = new Date(2023, 0, 1)
72+
data.push({
73+
category: firstDate.setDate(firstDate.getDate() + i),
74+
value: val
75+
});
76+
}
77+
78+
function createChart() {
79+
$("#chart").kendoChart({
80+
dataSource: {
81+
data: data
82+
},
83+
categoryAxis: {
84+
type: "date",
85+
min: new Date(2023, 11, 1),
86+
max: new Date(2023, 11, 32),
87+
labels: {
88+
rotation: "auto"
89+
}
90+
},
91+
series: [{
92+
type: "column",
93+
field: "value",
94+
categoryField: "category"
95+
}],
96+
pannable: {
97+
lock: "y"
98+
},
99+
zoomable: {
100+
mousewheel: {
101+
lock: "y"
102+
},
103+
selection: {
104+
lock: "y"
105+
}
106+
}
107+
});
108+
}
109+
110+
$(document).ready(createChart);
111+
$("#example").bind("kendo:skinChange", createChart);
112+
</script>
113+
</div>
114+
```
115+
116+
For an interactive example using the [`Stock Chart`](https://docs.telerik.com/kendo-ui/controls/charts/stockchart/overview) and Navigator, see the following Dojo demo.
117+
118+
```dojo
119+
<div id="example">
120+
<div class="demo-section k-content wide">
121+
<div id="stock-chart"></div>
122+
</div>
123+
<script>
124+
function createChart() {
125+
$("#stock-chart").kendoStockChart({
126+
dataSource: {
127+
transport: {
128+
read: {
129+
url: "../content/dataviz/js/boeing-stock.json",
130+
dataType: "json"
131+
}
132+
},
133+
schema: {
134+
model: {
135+
fields: {
136+
Date: { type: "date" }
137+
}
138+
}
139+
}
140+
},
141+
title: {
142+
text: "The Boeing Company\nNYSE:BA"
143+
},
144+
dateField: "Date",
145+
panes: [{
146+
name: "volumePane",
147+
title: "Volume",
148+
height: 150 // pixels
149+
}],
150+
categoryAxis: {
151+
baseUnit: "days",
152+
pane: "volumePane",
153+
labels: {
154+
rotation: {
155+
angle: 45
156+
},
157+
step: 7
158+
}
159+
},
160+
valueAxes: [{
161+
// Default axis
162+
line: {
163+
visible: false
164+
}
165+
}, {
166+
name: "volumeAxis",
167+
pane: "volumePane",
168+
visible: false
169+
}],
170+
series: [{
171+
type: "column",
172+
field: "Volume",
173+
axis: "volumeAxis",
174+
tooltip: {
175+
format: "{0:C0}"
176+
}
177+
}],
178+
navigator: {
179+
series: {
180+
type: "area",
181+
field: "Close"
182+
},
183+
select: {
184+
from: "2011/12/01",
185+
to: "2011/12/31"
186+
},
187+
categoryAxis: {
188+
max: "2011/12/31",
189+
min: "2011/01/01"
190+
}
191+
}
192+
});
193+
}
194+
$(document).ready(createChart);
195+
$(document).bind("kendo:skinChange", createChart);
196+
</script>
197+
</div>
198+
```
199+
200+
## See Also
201+
202+
- [Chart Configuration - API ](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration.)
203+
- [Overview of the Chart Component](https://docs.telerik.com/kendo-ui/controls/charts/chart/overview)
204+
- [Overview of the Stock Chart Component](https://docs.telerik.com/kendo-ui/controls/charts/stockchart/overview)

‎docs/knowledge-base/how-to-handle-click-events-on-multiselect-tags-kendo-ui.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: Handling Click Events on MultiSelect Tags in Kendo UI
3+
description: Learn how to implement custom logic to handle click events on tags within the MultiSelect component for Kendo UI.
4+
type: how-to
5+
page_title: How to Handle Click Events on Tags of MultiSelect in Kendo UI
6+
slug: how-to-handle-click-events-on-multiselect-tags-kendo-ui
7+
tags: kendo-ui, multiselect, click-event, tags, custom-logic
8+
res_type: kb
9+
ticketid: 1670286
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>MultiSelect for Progress® Kendo UI®</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2024.4.1112</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
I have a MultiSelect component that represents what is in the FileUpload control. I'm looking for a way to detect the click event on a tag and retrieve the data item of the clicked tag to implement my custom logic.
30+
31+
This KB article also answers the following questions:
32+
- How can I add click event handling to tags in the MultiSelect component?
33+
- Is it possible to get the data item of a clicked tag in MultiSelect?
34+
35+
## Solution
36+
37+
The [MultiSelect](https://demos.telerik.com/kendo-ui/multiselect/index) component does not have a built-in event for handling clicks on individual tags. However, you can achieve this functionality by implementing custom logic using jQuery. The following steps and code snippet demonstrate how to handle click events on tags and how to prevent the MultiSelect dropdown from opening when a tag is clicked.
38+
39+
1. Attach a click event handler to the MultiSelect wrapper to detect clicks on tags.
40+
2. Use the event target to determine if a tag was clicked and to retrieve the tag's text.
41+
3. Add logic to disable the MultiSelect popup opening on chip click in the [`open`](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/events/open) event handler.
42+
43+
```dojo
44+
<select id="multiselect" multiple="multiple">
45+
</select>
46+
<script>
47+
$("#multiselect").kendoMultiSelect({
48+
dataSource: ["Item1", "Item2", "Item3", "Item4"],
49+
value: ["Item2", "Item3"],
50+
open: onOpen
51+
});
52+
53+
var allowOpen = false;
54+
$(document).ready(function(){
55+
var multiselect=$("#multiselect").data("kendoMultiSelect");
56+
multiselect.wrapper.on("click", ".k-chip", function(e){
57+
var selectedText = e.currentTarget.outerText;
58+
alert("Clicked item is: " + selectedText);
59+
60+
// below logic is for obtaining all
61+
//var selectedItem;
62+
// multiselect.close();
63+
//var items = multiselect.dataItems();
64+
//$.each(items ,function(index,item){
65+
// if(item === selectedText ){
66+
// selectedItem=item;
67+
// return false;
68+
// }
69+
//});
70+
});
71+
72+
multiselect.wrapper.on("click",function(e){
73+
if($(e.target).is("span")){
74+
allowOpen = false;
75+
multiselect.open();
76+
}
77+
else{
78+
allowOpen = true;
79+
multiselect.open();
80+
}
81+
})
82+
})
83+
function onOpen(e){
84+
if(!allowOpen){
85+
e.preventDefault()
86+
}
87+
allowOpen = false
88+
}
89+
</script>
90+
```
91+
92+
Replace the `alert` statement with the appropriate logic for redirecting to the attachment page, based on the clicked tag's text or other attributes.
93+
94+
## See Also
95+
96+
- [MultiSelect Overview](https://docs.telerik.com/kendo-ui/controls/editors/multiselect/overview)
97+
- [API Reference of the MultiSelect](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect)
98+

0 commit comments

Comments
 (0)