Skip to content

Commit f17bb7a

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent aee3163 commit f17bb7a

6 files changed

Lines changed: 305 additions & 14 deletions

File tree

‎docs-aspnet/knowledge-base/tooltip-refresh-with-dynamic-content.md‎

Lines changed: 53 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
22
title: Refreshing Generic Textbox Tooltip and Suppressing Empty Tooltip Content
3-
description: Learn how to refresh a generic textbox tooltip and suppress the tooltip when its content is empty using Kendo UI for ASP.NET Core ToolTip.
3+
description: Learn how to refresh a generic textbox tooltip and suppress the tooltip when its content is empty using Kendo UI for {{ site.product }} Tooltip.
44
type: how-to
5-
page_title: How to Refresh and Suppress Tooltip Content in Kendo UI for ASP.NET Core ToolTip
6-
meta_title: How to Refresh and Suppress Tooltip Content in Kendo UI for ASP.NET Core ToolTip
5+
page_title: How to Refresh and Suppress Tooltip Content in {{ site.product }} Tooltip
6+
meta_title: How to Refresh and Suppress Tooltip Content in {{ site.product }} Tooltip
77
slug: tooltip-refresh-with-dynamic-content
8-
tags: tooltip, ui-for-asp.net-core, refresh, suppress, textbox
8+
tags: tooltip, refresh, suppress, textbox
99
res_type: kb
1010
ticketid: 1695432
1111
---
@@ -16,7 +16,7 @@ ticketid: 1695432
1616
<tbody>
1717
<tr>
1818
<td> Product </td>
19-
<td>Kendo UI for ASP.NET Core ToolTip</td>
19+
<td>{{ site.product }} Tooltip</td>
2020
</tr>
2121
<tr>
2222
<td> Version </td>
@@ -32,13 +32,13 @@ I want to create a generic tooltip for textboxes in a view and refresh the toolt
3232
This knowledge base article also answers the following questions:
3333
- How to dynamically update Kendo UI ToolTip content for a textbox?
3434
- How to suppress Kendo UI ToolTip when textbox content is empty?
35-
- How to manage tooltip visibility for textboxes in Kendo UI for ASP.NET Core?
35+
- How to manage tooltip visibility for textboxes in {{ site.product }}?
3636

3737
## Solution
3838

3939
To achieve a dynamic refresh of the tooltip content and suppress it when the textbox content is empty, follow these steps:
4040

41-
1. Use the `Show` and `Hide` events for the [Kendo UI for ASP.NET Core ToolTip](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/tooltip/overview).
41+
1. Use the `Show` and `Hide` events for the [{{ site.product }} Tooltip](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/tooltip/overview).
4242
2. Dynamically update the tooltip content based on the textbox value.
4343
3. Apply CSS to hide the tooltip when the textbox value is empty.
4444

@@ -78,13 +78,58 @@ function ttOnHide(e) {
7878
}
7979
```
8080

81+
## Example
82+
83+
```dojo
84+
<input id="dropdownlist" style="width:300px" />
85+
<script>
86+
var ddl = $("#dropdownlist").kendoDropDownList({
87+
width:300,
88+
size:"small",
89+
dataSource: {
90+
transport: {
91+
read: {
92+
url: 'https://jsonplaceholder.typicode.com/users',
93+
dataType: 'json'
94+
}
95+
}
96+
},
97+
dataTextField: "username",
98+
dataValueField: "id"
99+
}).data('kendoDropDownList');
100+
101+
var tooltip = ddl.wrapper.kendoTooltip({
102+
filter: ".k-input-value-text",
103+
position: "right",
104+
width: 200,
105+
content: function () {
106+
return ddl.text() || "";
107+
},
108+
show: function(e){
109+
var el = e.sender.popup.element.find(".k-tooltip-content");
110+
el.text(ddl.text() || "");
111+
}
112+
}).data("kendoTooltip");
113+
114+
function refreshTooltip(){
115+
if (tooltip && tooltip.popup && tooltip.popup.visible()) {
116+
tooltip.popup.element.find(".k-tooltip-content").text(ddl.text() || "");
117+
}
118+
}
119+
120+
ddl.bind("select", refreshTooltip);
121+
ddl.bind("change", refreshTooltip);
122+
ddl.bind("dataBound", refreshTooltip);
123+
</script>
124+
```
125+
81126
### Additional Notes:
82127

83128
- Ensure that the tooltip's `Position` setting does not cause focus issues for the textbox. For example, setting `TooltipPosition.Bottom` can resolve such conflicts.
84129
- If using a `DropDownList`, apply a similar approach to dynamically refresh its tooltip content.
85130

86131
## See Also
87132

88-
- [Kendo UI for ASP.NET Core ToolTip Documentation](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/tooltip/overview)
133+
- [Kendo UI for {{ site.product }} ToolTip Documentation](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/tooltip/overview)
89134
- [Adding ToolTips to DropDownList](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/show-tooltip-for-items)
90135
- [Kendo UI Tooltip API](https://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip)

‎docs/knowledge-base/chart-shading-between-lines.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
title: Adding Shading Between Two Lines in Kedno UI for jQuery Chart
3+
description: Learn how to add shading between two lines in a Kedno UI for jQuery Chart.
4+
type: how-to
5+
page_title: How to Add Shading Between Two Lines in Kedno UI for jQuery Chart
6+
meta_title: Adding Shading Between Two Lines in Chart
7+
slug: chart-shading-between-lines
8+
tags: chart, shading, rangearea
9+
res_type: kb
10+
ticketid: 1646903
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td> Product </td>
19+
<td> Kendo UI for jQuery Chart </td>
20+
</tr>
21+
<tr>
22+
<td> Version </td>
23+
<td> 2025.4.1217 </td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
28+
## Description
29+
30+
I want to add shading between two lines on a chart in Kedno UI for jQuery. Using the standard Area chart displays the entire area under the lines, but I need to shade only the area between the two lines.
31+
32+
This knowledge base article also answers the following questions:
33+
- How can I add shading between two lines in a chart?
34+
- How to create a shaded area between two data points in Kedno UI for jQuery Chart?
35+
- What is the method to shade the area between two lines on a chart?
36+
37+
## Solution
38+
39+
To achieve shading between two lines, add a new series to the chart specifically for the shaded area. Use the Range Area chart type and provide data for the area between the two lines.
40+
41+
Follow these steps:
42+
43+
1. Prepare the data for the shading between the two lines.
44+
45+
```javascript
46+
var data1 = [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855];
47+
var data2 = [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727];
48+
var shadedAreaData = data1.map(function(val, index) {
49+
return { from: val, to: data2[index] };
50+
});
51+
```
52+
53+
2. Add a Range Area series to the chart and set the data for the shaded area.
54+
55+
```javascript
56+
series: [
57+
{
58+
type: "rangeArea",
59+
name: "Shaded Area",
60+
data: shadedAreaData,
61+
color: "rgba(135, 206, 235, 1)"
62+
},
63+
{
64+
type: "line",
65+
name: "Line Above",
66+
data: data1
67+
},
68+
{
69+
type: "line",
70+
name: "Line Below",
71+
data: data2
72+
}
73+
]
74+
```
75+
76+
3. Render the chart with the specified configuration.
77+
78+
## Example
79+
80+
```dojo
81+
<div id="example">
82+
<div class="demo-section wide">
83+
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
84+
</div>
85+
<script>
86+
function createChart() {
87+
var data1 = [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855];
88+
var data2 = [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727];
89+
var shadedAreaData = data1.map(function(val, index) {
90+
return { from: val, to: data2[index] };
91+
});
92+
93+
$("#chart").kendoChart({
94+
title: {
95+
text: "Gross domestic product growth \n /GDP annual %/"
96+
},
97+
legend: {
98+
position: "bottom"
99+
},
100+
chartArea: {
101+
background: ""
102+
},
103+
seriesDefaults: {
104+
type: "line"
105+
},
106+
series: [{
107+
name: "India",
108+
data: data1
109+
},{
110+
name: "World",
111+
data: data2
112+
},
113+
{
114+
type: "rangeArea",
115+
name: "Shaded Area",
116+
data: shadedAreaData,
117+
color: "rgba(135, 206, 235, 1)"
118+
}],
119+
valueAxis: {
120+
labels: {
121+
format: "{0}%"
122+
},
123+
line: {
124+
visible: false
125+
},
126+
axisCrossingValue: -10
127+
},
128+
categoryAxis: {
129+
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
130+
majorGridLines: {
131+
visible: false
132+
},
133+
labels: {
134+
rotation: "auto"
135+
}
136+
},
137+
tooltip: {
138+
visible: true,
139+
format: "{0}%",
140+
template: "#= series.name #: #= value #"
141+
}
142+
});
143+
}
144+
145+
$(document).ready(createChart);
146+
$(document).bind("kendo:skinChange", createChart);
147+
</script>
148+
</div>
149+
```
150+
151+
## See Also
152+
153+
- [Kendo UI for jQuery Chart Overview](https://www.telerik.com/kendo-jquery-ui/documentation/controls/charts/overview)
154+
- [Range Area Chart Documentation](https://docs.telerik.com/kendo-ui/controls/charts/chart-types/range-area)
155+
---

‎docs/styles-and-layout/less-themes/less-themes-migration.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ The following table contains the name of the Less theme and its Sass counterpart
8686
| `Metro Black` | `Classic - Metro Dark` | Available | https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/classic/classic-metro-dark.css |
8787
| `Moonlight` | `Classic - Moonlight` | Available | https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/classic/classic-moonlight.css |
8888
| `Uniform` | `Classic - Uniform` | Available | https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/classic/classic-uniform.css |
89-
| `Bootstrap 3` | `Bootstrap - Bootstrap 3` | Available | https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-3.css |
89+
| `Bootstrap 3` | `Bootstrap - Bootstrap 3` | Available | https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-3-dark.css |
9090
| `Bootstrap 3 Dark` | `Bootstrap - Bootstrap 3 Dark` | Available | https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-3-dark.css |
9191
| `Flat` | `Bootstrap - Turquoise` | Available | https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-turquoise.css |
9292
| `Flat Dark` | `Bootstrap - Turquoise Dark` | Available | https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-turquoise-dark.css |

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"gulp-sourcemaps": "^2.6.4",
4343
"gulp-task-listing": "^1.1.0",
4444
"gulp-terser": "^2.1.0",
45-
"jquery": "^3.7.1",
45+
"jquery": "^4.0.0",
4646
"merge2": "~0.3.6",
4747
"mocha": "^10.0.0",
4848
"playwright": "^1.56.1",

‎src/cultures/kendo.culture.en-JP.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
kendo.cultures["en-JP"] = {
2+
// <language code>-<country/region code>
3+
name: "en-JP",
4+
// The "numberFormat" defines general number formatting rules.
5+
numberFormat: {
6+
//numberFormat has only negative pattern unlike the percent and currency
7+
//negative pattern: one of (n)|-n|- n|n-|n -
8+
pattern: ["-n"],
9+
//number of decimal places
10+
decimals: 2,
11+
//string that separates the number groups (1,000,000)
12+
",": ",",
13+
// A string that separates a number from the fractional point.
14+
".": ".",
15+
//the length of each number group
16+
groupSize: [3],
17+
//formatting rules for percent number
18+
percent: {
19+
//[negative pattern, positive pattern]
20+
// negativePattern: one of -n %|-n%|-%n|%-n|%n-|n-%|n%-|-% n|n %-|% n-|% -n|n- %
21+
//positivePattern: one of n %|n%|%n|% n
22+
pattern: ["-n %", "n %"],
23+
// The number of decimal places.
24+
decimals: 2,
25+
// The string that separates the number groups (1,000,000 %).
26+
",": ",",
27+
// The string that separates a number from the fractional point.
28+
".": ".",
29+
// The length of each number group.
30+
groupSize: [3],
31+
//percent symbol
32+
symbol: "%"
33+
},
34+
currency: {
35+
// [negative pattern, positive pattern]
36+
// negativePattern: one of "($n)|-$n|$-n|$n-|(n$)|-n$|n-$|n$-|-n $|-$ n|n $-|$ n-|$ -n|n- $|($ n)|(n $)"
37+
//positivePattern: one of "$n|n$|$ n|n $"
38+
pattern: ["($n)", "$n"],
39+
// The number of decimal places.
40+
decimals: 2,
41+
// The string that separates the number groups (1,000,000 $).
42+
",": ",",
43+
// The string that separates a number from the fractional point.
44+
".": ".",
45+
// The length of each number group.
46+
groupSize: [3],
47+
// The currency symbol.
48+
symbol: "¥"
49+
}
50+
},
51+
calendars: {
52+
standard: {
53+
days: {
54+
// The full day names.
55+
names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
56+
// The abbreviated day names.
57+
namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
58+
// The shortest day names.
59+
namesShort: [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]
60+
},
61+
months: {
62+
// The full month names.
63+
names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
64+
// abbreviated month names
65+
namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
66+
},
67+
// The AM and PM designators.
68+
// [standard,lowercase,uppercase]
69+
AM: [ "AM", "am", "AM" ],
70+
PM: [ "PM", "pm", "PM" ],
71+
// The set of predefined date and time patterns used by the culture.
72+
patterns: {
73+
d:"yyyy/MM/dd",
74+
D:"yyyy MMMM dd",
75+
F:"yyyy MMMM dd H:mm:ss",
76+
g:"yyyy/MM/dd H:mm",
77+
G:"yyyy/MM/dd H:mm:ss",
78+
m: "MMMM dd",
79+
M: "MMMM dd",
80+
s: "yyyy'-'MM'-'ddTHH':'mm':'ss",
81+
t: "h:mm tt",
82+
T: "h:mm:ss tt",
83+
u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'",
84+
y:"yyyy MMMM",
85+
Y:"yyyy MMMM"
86+
},
87+
// The first day of the week (0 = Sunday, 1 = Monday, and so on).
88+
firstDay: 0
89+
}
90+
}
91+
};

0 commit comments

Comments
 (0)