Skip to content

Commit 1e1f85b

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 625bf56 commit 1e1f85b

File tree

3 files changed

+353
-0
lines changed

3 files changed

+353
-0
lines changed

‎docs/knowledge-base/dynamically-change-tooltip-values-kendo-jquery-arcgauge.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
---
2+
title: Dynamically Changing Tooltip Values in Kendo UI for jQuery ArcGauge
3+
description: Learn how to dynamically change the tooltip values based on the ArcGauge value in Kendo UI for jQuery.
4+
type: how-to
5+
page_title: Update Tooltip Values Based on ArcGauge Values in Kendo UI for jQuery
6+
meta_title: Update Tooltip Values Based on ArcGauge Values in Kendo UI for jQuery
7+
slug: dynamically-change-tooltip-values-kendo-jquery-arcgauge
8+
tags: kendo-ui, jquery, arcgauge, tooltip, dynamic-tooltip, refresh-method
9+
res_type: kb
10+
ticketid: 1696114
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td> Product </td>
19+
<td> Kendo UI for jQuery ArcGauge </td>
20+
</tr>
21+
<tr>
22+
<td> Version </td>
23+
<td> 2025.2.702 </td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
28+
## Description
29+
30+
I want to create a tooltip for the [ArcGauge](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/arcgauge) that dynamically changes its values based on the ArcGauge data. For example, when hovering over the blue section, the tooltip should show "65% utilized," and when hovering over the light grey section, it should show "35 %" The tooltip values must update dynamically as the ArcGauge values change.
31+
32+
This knowledge base article also answers the following questions:
33+
- How to add a tooltip to Kendo UI for jQuery ArcGauge?
34+
- How to update tooltip values dynamically in ArcGauge?
35+
- How to filter tooltip content in Kendo UI for jQuery ArcGauge?
36+
37+
## Solution
38+
39+
To achieve this functionality, create a tooltip for the ArcGauge using the `kendoTooltip` widget and dynamically update the tooltip values based on the ArcGauge data.
40+
41+
### Steps to Implement Tooltip with Dynamic Values
42+
43+
1. Create the ArcGauge with the desired values and configuration.
44+
2. Initialize the `kendoTooltip` widget.
45+
3. Use the `filter` property to target specific segments of the ArcGauge.
46+
4. Define the `content` function to return dynamic values based on the target element.
47+
5. Use the `refresh` method of the tooltip to update its values dynamically.
48+
49+
### Example Code Snippet
50+
51+
```dojo
52+
<div id="example">
53+
<div id="gauge-container">
54+
<div id="gauge"></div>
55+
<input id="gauge-value" title="slider" value="65" />
56+
</div>
57+
58+
<script>
59+
function createGauge() {
60+
$("#gauge").kendoArcGauge({
61+
value: $("#gauge-value").val(),
62+
centerTemplate:
63+
'<span style="color: #: color #;">#: value #%</span>',
64+
scale: {
65+
min: 0,
66+
max: 100,
67+
},
68+
colors: [
69+
{
70+
to: 25,
71+
color: "#0058e9",
72+
},
73+
{
74+
from: 25,
75+
to: 50,
76+
color: "#37b400",
77+
},
78+
{
79+
from: 50,
80+
to: 75,
81+
color: "#ffc000",
82+
},
83+
{
84+
from: 75,
85+
color: "#f31700",
86+
},
87+
],
88+
});
89+
}
90+
91+
$(document).ready(function () {
92+
createGauge();
93+
94+
function updateValue() {
95+
$("#gauge").data("kendoArcGauge").value($("#gauge-value").val());
96+
$("#gauge").data("kendoTooltip").refresh();
97+
}
98+
99+
$("#gauge-value").kendoSlider({
100+
min: 0,
101+
max: 100,
102+
showButtons: false,
103+
change: updateValue,
104+
});
105+
106+
$("#gauge").kendoTooltip({
107+
filter: "g path",
108+
content: function (e) {
109+
let index = e.target.index();
110+
if (index == 1) {
111+
return $("#gauge-value").data("kendoSlider").value() + '%';
112+
} else {
113+
return 100 - $("#gauge-value").data("kendoSlider").value() + '%';
114+
}
115+
},
116+
showOn: "mouseenter",
117+
position: "right",
118+
callout: false,
119+
});
120+
121+
$(document).bind("kendo:skinChange", function (e) {
122+
createGauge();
123+
});
124+
});
125+
</script>
126+
</div>
127+
128+
<style>
129+
#gauge-container {
130+
width: 300px;
131+
text-align: center;
132+
margin: 0 auto 30px auto;
133+
}
134+
135+
.k-arcgauge-label {
136+
font-size: 30px;
137+
}
138+
</style>
139+
```
140+
141+
### Explanation
142+
143+
- The `filter: "g path"` property ensures the tooltip is applied only to the gauge segments.
144+
- The `content` function dynamically calculates the tooltip text based on the hovered segment.
145+
- Use the `refresh` method to update the tooltip values if the ArcGauge's data changes dynamically.
146+
147+
## See Also
148+
149+
- [ArcGauge Documentation](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/arcgauge)
150+
- [Tooltip Configuration API](https://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip/configuration/filter)
151+
- [Tooltip Refresh Method](https://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip/methods/refresh)

‎docs/knowledge-base/hide-disable-action-buttons-sheet-bar-jquery-spreadsheet.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
title: Hiding or Disabling Action Buttons in the Sheet Bar
3+
description: Learn how to hide or disable action buttons in the sheet bar of the Kendo UI for jQuery Spreadsheet.
4+
type: how-to
5+
page_title: How to Hide or Disable Action Buttons in Kendo UI for jQuery Spreadsheet's Sheet Bar
6+
meta_title: How to Hide or Disable Action Buttons in Kendo UI for jQuery Spreadsheet's Sheet Bar
7+
slug: hide-disable-action-buttons-sheet-bar-jquery-spreadsheet
8+
tags: kendo ui for jquery, spreadsheet, css, sheet bar, buttons
9+
res_type: kb
10+
ticketid: 1696460
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td> Product </td>
19+
<td> Kendo UI for jQuery Spreadsheet </td>
20+
</tr>
21+
<tr>
22+
<td> Version </td>
23+
<td> 2025.3.825</td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
28+
## Description
29+
30+
I want to restrict users from interacting with the action buttons in the sheet bar of the [Kendo UI for jQuery Spreadsheet](https://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/overview). The goal is to allow users to navigate sheets but prevent actions such as adding sheets or accessing sheet menus.
31+
32+
This knowledge base article also answers the following questions:
33+
- How can I hide buttons in the sheet bar?
34+
- How can I disable action buttons in the Kendo UI Spreadsheet sheet bar?
35+
- How do I prevent interaction with the sheet bar buttons in Kendo UI for jQuery Spreadsheet?
36+
37+
## Solution
38+
39+
### Hiding the Buttons
40+
To hide the action buttons in the sheet bar, apply the following CSS rules:
41+
```css
42+
.k-spreadsheet-sheets-bar .k-spreadsheet-sheet-add {
43+
display: none !important;
44+
}
45+
46+
.k-spreadsheet-sheets-bar .k-spreadsheet-sheets-menu {
47+
display: none !important;
48+
}
49+
50+
.k-spreadsheet-sheets-bar .k-menu-button {
51+
display: none !important;
52+
}
53+
```
54+
55+
### Disabling the Buttons
56+
To disable the buttons without hiding them, use the following CSS rules:
57+
```css
58+
.k-spreadsheet-sheets-bar .k-spreadsheet-sheet-add,
59+
.k-spreadsheet-sheets-bar .k-spreadsheet-sheets-menu,
60+
.k-spreadsheet-sheets-bar .k-menu-button {
61+
pointer-events: none;
62+
opacity: 0.5;
63+
}
64+
```
65+
This prevents user interaction with the buttons while keeping them visible in a disabled state.
66+
67+
Below is a runnable example;
68+
69+
```dojo
70+
<style>
71+
.k-spreadsheet-sheets-bar .k-spreadsheet-sheet-add,
72+
.k-spreadsheet-sheets-bar .k-spreadsheet-sheets-menu,
73+
.k-spreadsheet-sheets-bar .k-menu-button {
74+
pointer-events: none;
75+
opacity: 0.5;
76+
}
77+
</style>
78+
<div id="example">
79+
<div id="spreadsheet" style="width: 100%"></div>
80+
<script>
81+
$(function () {
82+
$("#spreadsheet").kendoSpreadsheet({
83+
sheets: [
84+
{
85+
name: "Food Order",
86+
},
87+
{
88+
name: "Drinks Order"
89+
}
90+
],
91+
});
92+
});
93+
</script>
94+
</div>
95+
```
96+
97+
## See Also
98+
99+
- [Kendo UI for jQuery Spreadsheet Documentation](https://www.telerik.com/kendo-jquery-ui/documentation/controls/spreadsheet/overview)

‎docs/knowledge-base/toggle-boolean-values-spreadsheet-kendo-jquery.md‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Toggling Boolean Values in Kendo UI for jQuery Spreadsheet Cells
3+
description: Learn how to capture the click event on a Kendo UI for jQuery Spreadsheet cell and toggle its boolean value.
4+
type: how-to
5+
page_title: Toggle Boolean Values on Cell Click in Kendo UI for jQuery Spreadsheet
6+
meta_title: Toggle Boolean Values on Cell Click in Kendo UI for jQuery Spreadsheet
7+
slug: toggle-boolean-values-spreadsheet-kendo-jquery
8+
tags: kendo-ui-for-jquery, spreadsheet, select-event, toggle-values, boolean
9+
res_type: kb
10+
ticketid: 1696644
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td> Product </td>
18+
<td> Kendo UI for jQuery Spreadsheet </td>
19+
</tr>
20+
<tr>
21+
<td> Version </td>
22+
<td> 2025.3.812 </td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
I want to toggle the boolean value of a cell in the [Kendo UI for jQuery Spreadsheet](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet) when the cell is clicked or focused. This functionality should eliminate the need for additional user clicks to toggle the value.
30+
31+
This knowledge base article also answers the following questions:
32+
- How to handle boolean value toggling in Spreadsheet cells on selection?
33+
- Is it possible to automate value toggling in Kendo UI Spreadsheet?
34+
35+
## Solution
36+
37+
To toggle boolean values (`true/false`) in a Kendo UI for jQuery Spreadsheet cell on selection, handle the [`select`](https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/spreadsheet/events/select) event of the Spreadsheet component. Use the event handler to check the current value of the selected range and toggle it. Follow the steps below:
38+
39+
1. Bind the `select` event to the Spreadsheet.
40+
2. Use the `e.range.value()` method to retrieve the current value of the selected range.
41+
3. Check if the value is `true` or `false`.
42+
4. Use the `e.range.value(!current)` method to toggle the value.
43+
44+
Here is an example:
45+
46+
```javascript
47+
$("#spreadsheet").kendoSpreadsheet({
48+
select: function(e) {
49+
// Check if the selected cell contains a boolean value
50+
if (e.range.value() === true || e.range.value() === false) {
51+
console.log("Current Value: ", e.range.value());
52+
var current = e.range.value();
53+
// Toggle the boolean value
54+
e.range.value(!current);
55+
}
56+
}
57+
});
58+
```
59+
60+
This implementation toggles the boolean value (`true/false`) whenever a cell containing such a value is selected.
61+
62+
Below is a runnable example:
63+
64+
```dojo
65+
<div id="spreadsheet"></div>
66+
<script>
67+
$("#spreadsheet").kendoSpreadsheet({
68+
select: function(e){
69+
if(e.range.value() == true || e.range.value() == false){
70+
console.log(e.range.value())
71+
var current = e.range.value()
72+
e.range.value(!current)
73+
}
74+
},
75+
sheets: [{
76+
rows: [
77+
{
78+
cells: [
79+
{
80+
value: true, background: '#fcd8d6'
81+
},
82+
{
83+
value: false, background: '#fcd8d6'
84+
}
85+
]
86+
}
87+
],
88+
columns: [
89+
{
90+
width: 200
91+
},
92+
93+
]
94+
}]
95+
});
96+
97+
</script>
98+
```
99+
100+
## See Also
101+
102+
- [Kendo UI for jQuery Spreadsheet Overview](https://www.telerik.com/kendo-jquery-ui/documentation/controls/spreadsheet/overview)
103+
- [Spreadsheet API](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet)

0 commit comments

Comments
 (0)