Skip to content

Commit 89500ba

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

File tree

5 files changed

+137
-1
lines changed

5 files changed

+137
-1
lines changed

‎docs-aspnet/html-helpers/charts/overview.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,6 @@ You may also need to apply global settings that affect all axes. In such cases,
310310

311311
* [Data binding]({% slug htmlhelpers_charts_databinding_aspnetcore %})—You can populate the Telerik UI Chart for {{ site.framework }} with data by binding it to inline data, local data, or remote data.
312312
* [Appearance]({% slug htmlhelpers_charts_appearance_aspnetcore %})—Unlike other {{ site.product }} components which use only CSS for styling, you can control the appearance of the Chart elements primarily by using JavaScript style options.
313-
* [Scaffolding]({% slug scaffoldingchart_aspnetmvc %})—The Chart for {{ site.framework }} enables you to use the Kendo UI Scaffolder Visual Studio extension.
314313
* [No Data Template]({% slug htmlhelpers_charts_no_data_template %})—The Chart for {{ site.framework }} allows you to display a message when there is no data to show. Here’s how to set up a custom message for scenarios where the chart data is unavailable.
315314
* [Series Patterns]({% slug htmlhelpers_charts_patterns %})—The Telerik UI Chart component for {{ site.framework }} offers customization options for presenting data visually, including support for using patterns in chart series.
316315

‎docs/controls/charts/no-data-template.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
title: No Data Template
3+
page_title: No Data Template
4+
description: "Learn how to use the No Data Template of the Kendo UI for jQuery Chart."
5+
slug: kendo_charts_no_data_template
6+
position: 7
7+
---
8+
9+
# No Data Template
10+
11+
The Kendo UI for jQuery Chart component allows to display a message when there is no data to show. This feature is particularly useful when loading data asynchronously, as it reassures users that data may appear after a delay. Customizing the No Data Template is simple, enabling to add styling or interactive elements like buttons to improve usability. The No Data Template can be used for all [chart types]({% slug overview_charttypes_charts %}). Here's how to set up a custom message for scenarios where the chart data is unavailable.
12+
13+
## Example with Bar Chart
14+
15+
```dojo
16+
<div id="chart"></div>
17+
<script>
18+
$(document).ready(function () {
19+
var dataSource = new kendo.data.DataSource({
20+
transport: {
21+
read: {
22+
url: "https://demos.telerik.com/kendo-ui/content/dataviz/js/spain-electricity.json",
23+
dataType: "json"
24+
}
25+
},
26+
sort: {
27+
field: "year",
28+
dir: "asc"
29+
}
30+
});
31+
32+
$("#chart").kendoChart({
33+
dataSource: {
34+
data: []
35+
},
36+
title: {
37+
text: 'Spain electricity production (GWh)'
38+
},
39+
series:
40+
[{
41+
field: "nuclear",
42+
categoryField: "year",
43+
name: "Nuclear"
44+
}, {
45+
field: "hydro",
46+
categoryField: "year",
47+
name: "Hydro"
48+
}, {
49+
field: "wind",
50+
categoryField: "year",
51+
name: "Wind"
52+
}],
53+
categoryAxis: {
54+
labels: {
55+
rotation: -90
56+
},
57+
majorGridLines: {
58+
visible: false
59+
}
60+
},
61+
valueAxis: {
62+
labels: {
63+
format: "N0"
64+
},
65+
majorUnit: 10000,
66+
line: {
67+
visible: false
68+
}
69+
},
70+
noData: {
71+
template: () => {
72+
return `<div class="empty-template">
73+
<p>There is no data to display.</p>
74+
<button id="button" type="button">Load Data</button>
75+
</div>`;
76+
}
77+
},
78+
dataBound: function () {
79+
$("#button").kendoButton({
80+
icon: "arrow-rotate-cw",
81+
click: function () {
82+
let chart = $("#chart").data("kendoChart");
83+
chart.setDataSource(dataSource);
84+
}
85+
})
86+
}
87+
});
88+
});
89+
</script>
90+
```
91+
92+
## See Also
93+
94+
* [API Reference of the Kendo UI for jQuery Chart](api/javascript/dataviz/ui/chart)
95+
* [Overview of the Kendo UI for jQuery Bar Chart (Demos)](https://demos.telerik.com/kendo-ui/bar-charts/index)

‎docs/controls/charts/overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ All graphics are rendered on the client by using [Scalable Vector Graphics (SVG)
3131
|[Panes]({% slug panes_charts_widget %}) | The Chart panes enable you to create vertical sub-divisions in a single categorical Chart.
3232
|[Title]({% slug title_features_charts %}) | The Chart enables you to configure its title.
3333
|[Tooltip]({% slug tooltip_charts_widget %}) | The Chart enables you to display details about the data point over which the mouse is currently hovering.
34+
|[No Data Template]({% slug kendo_charts_no_data_template %}) | The Chart allows you to show an overlay with a "No Data Available" message when there's no data in the component.
3435

3536
## Next Steps
3637

‎docs/intro/installation/npm.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,39 @@ To bundle the UMD files:
216216
npx rollup -c
217217
```
218218

219+
### Latest Export Settings
220+
221+
As of `2024.4.1112` the `@progress/kendo-ui` NPM package introduce a more fine-grained exports setting to satisfy various module bundlers and easy its usage in the NPM ecosystem.
222+
223+
```javascript
224+
`@progress/kendo-ui` //Imports the kendo.all.js
225+
`@progress/kendo-ui/*.js` //Imports the files corresponding to the modul system used - ESM or CJS.
226+
`@progress/kendo-ui/esm` //Imports kendo.all.js only for ESM.
227+
`@progress/kendo-ui/esm/*.js` //Imports the files for ESM.
228+
`@progress/kendo-ui/cjs` //Importskendo.all.js only for CJS.
229+
`@progress/kendo-ui/esm/*.js` //Imports the files for CJS.
230+
`@progress/kendo-ui/umd` //Imports kendo.all.min.js only for UMD.
231+
`@progress/kendo-ui/umd/*.js` //Imports th files for UMD.
232+
```
233+
234+
#### Examples
235+
236+
```javascript
237+
import "@progress/kendo-ui"; //Imports the kendo.all.js
238+
```
239+
240+
```javascript
241+
import "@progress/kendo-ui/esm"; //Imports kendo.all.js only for ESM.
242+
```
243+
244+
```javascript
245+
import "@progress/kendo-ui/kendo.grid.js"; //Imports the Grid related files corresponding to the modul system used - ESM or CJS.
246+
```
247+
248+
```javascript
249+
import "@progress/kendo-ui/esm/kendo.grid.js"; //Imports the Grid related files for ESM.
250+
```
251+
219252
## Known Issues
220253
221254
* The Progress NPM registry was retired in favor of [npmjs.com](https://www.npmjs.com/). To start using the default registry, remove the two lines which contain `registry.npm.telerik.com` from your `.npmrc` file.

‎docs/redirects.conf‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,18 @@ rewrite ^/kendo-ui/jsp/(.*)$
1818
https://www.telerik.com/jsp-ui
1919
permanent;
2020

21+
rewrite ^/kendo-ui/api/jsp/(.*)$
22+
https://www.telerik.com/jsp-ui
23+
permanent;
24+
2125
rewrite ^/kendo-ui/php/(.*)$
2226
https://www.telerik.com/php-ui
2327
permanent;
2428

29+
rewrite ^/kendo-ui/api/php/(.*)$
30+
https://www.telerik.com/php-ui
31+
permanent;
32+
2533
rewrite ^/kendo-ui/api/web/(.*)$
2634
/kendo-ui/api/javascript/ui/$1
2735
permanent;

0 commit comments

Comments
 (0)