Skip to content

Commit 7a5d98f

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 507c07c commit 7a5d98f

File tree

5 files changed

+421
-1
lines changed

5 files changed

+421
-1
lines changed

‎docs/api/javascript/dataviz/ui/lineargauge.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ Specifies a line consisting of a repeating pattern of long-dash-dot-dot.
228228

229229
The width of the border.
230230

231-
#### Example - set gaugeArea border width
231+
#### Example - set gaugeArea border width
232232

233233
<div id="gauge-container">
234234
<div id="gauge"></div>

‎docs/api/javascript/ui/aiprompt.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,7 @@ The headers to send with the AI service request.
225225
}
226226
});
227227
</script>
228+
228229
### service.data `Object|Function`
229230
The data to send with the AI service request.
230231

@@ -240,6 +241,7 @@ The data to send with the AI service request.
240241
}
241242
});
242243
</script>
244+
243245
#### Example
244246
<div id="aiprompt"></div>
245247
<script>
@@ -258,6 +260,7 @@ The data to send with the AI service request.
258260
}
259261
});
260262
</script>
263+
261264
### service.outputGetter `Function`
262265
The function to get the output from the AI service response.
263266

‎docs/knowledge-base/configuring-series-marker-intervals-kendo-ui-chart.md

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
title: Configuring Series Marker Intervals in Kendo UI Chart
3+
description: Learn how to show markers at specific intervals on a series in Kendo UI Chart.
4+
type: how-to
5+
page_title: Show Markers at Specific Intervals in Kendo UI Chart Series
6+
slug: configuring-series-marker-intervals-kendo-ui-chart
7+
tags: kendo-ui-chart,series-markers,marker-intervals,visible-function
8+
res_type: kb
9+
ticketid: 1689932
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>Progress® Kendo UI® Chart</td>
18+
</tr>
19+
<tr>
20+
<td>Version</td>
21+
<td>2025.2.520</td>
22+
</tr>
23+
</tbody>
24+
</table>
25+
26+
## Description
27+
28+
I want to display markers on my Kendo UI Chart series at specific intervals, such as every n-th point. While the default configuration allows enabling or disabling markers, I need a way to toggle their visibility based on the point index.
29+
30+
This knowledge base article also answers the following questions:
31+
- How to show markers every second point in Kendo UI Chart?
32+
- How to configure series markers dynamically in Kendo UI Chart?
33+
- Is it possible to apply conditional logic for Kendo UI Chart markers?
34+
35+
## Solution
36+
37+
To show markers at specific intervals, use the [`markers.visible`](/api/javascript/dataviz/ui/chart/configuration/series.markers.visible) property. This property accepts a function that controls the visibility of markers based on the index of the data point.
38+
39+
Below is an example of how to display markers for every second data point:
40+
41+
```javascript
42+
$("#chart").kendoChart({
43+
series: [
44+
{
45+
type: "line",
46+
markers: {
47+
visible: function(e) {
48+
// Show markers for every second data point (e.index % 2 === 0)
49+
return e.index % 2 === 0;
50+
},
51+
background: "green", // Specify marker background color
52+
size: 30, // Define marker size
53+
},
54+
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // Series data points
55+
},
56+
],
57+
});
58+
```
59+
60+
### Key Points:
61+
1. The `markers.visible` function receives an `e` parameter containing the data point's index (e.index).
62+
2. Use conditional logic within the function to determine marker visibility.
63+
3. Customize marker appearance using properties like `background` and `size`.
64+
65+
For a live demonstration, refer to the example below.
66+
67+
```dojo
68+
<div id="chart"></div>
69+
<script>
70+
$("#chart").kendoChart({
71+
series: [
72+
{
73+
type: "line",
74+
markers: {
75+
visible: function(e) {
76+
return e.index % 2 ? false : true;
77+
},
78+
background: "green",
79+
size: 30,
80+
// interval: 2 // <-- show every second data point? Do we have some configuration available to do this?
81+
},
82+
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
83+
}
84+
]
85+
});
86+
</script>
87+
```
88+
89+
## See Also
90+
91+
- [Kendo UI Chart Series Markers API Documentation](/api/javascript/dataviz/ui/chart/configuration/series.markers.visible)
92+
- [Kendo UI Chart Overview](/controls/charts/overview)

‎docs/knowledge-base/dropdown-validation-column-kendo-ui-spreadsheet.md

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
---
2+
title: Adding Dropdown Validation for a Whole Column in Kendo UI Spreadsheet
3+
description: Learn how to configure dropdown validation for a whole column in Kendo UI Spreadsheet and maintain it when adding new rows.
4+
type: how-to
5+
page_title: How to Set Dropdown Validation for Entire Columns in Kendo UI Spreadsheet
6+
slug: dropdown-validation-column-kendo-ui-spreadsheet
7+
tags: spreadsheet, kendo-ui, validation, column, dropdown
8+
res_type: kb
9+
ticketid: 1689145
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>Kendo UI Spreadsheet</td>
18+
</tr>
19+
<tr>
20+
<td>Version</td>
21+
<td>2025.2.520</td>
22+
</tr>
23+
</tbody>
24+
</table>
25+
26+
## Description
27+
28+
I want to make an entire column in the [Kendo UI Spreadsheet](https://docs.telerik.com/kendo-ui/spreadsheet/overview) function as a dropdown menu, preserving dropdown validation for newly added rows.
29+
30+
This knowledge base article also answers the following questions:
31+
- How to set dropdown validation for a column in Kendo UI Spreadsheet?
32+
- How to maintain dropdown validation when adding new rows in Kendo UI Spreadsheet?
33+
34+
## Solution
35+
36+
### Adding Dropdown Validation for a Whole Column
37+
38+
To add dropdown validation for an entire column, configure the validation for the column range using the [`sheets.rows.cells.validation.from`](/api/javascript/ui/spreadsheet/configuration/sheets.rows.cells.validation#sheetsrowscellsvalidationfrom) property. For newly added rows, ensure the same validation is applied to the respective cell in the column by using the [`insertRow`](/api/javascript/ui/spreadsheet/events/insertrow) event. Below is an example of how to configure a custom editor for a column upon adding a new row:
39+
40+
```javascript
41+
insertRow: function (e) {
42+
setTimeout(function(){
43+
e.sender.activeSheet().range(e.index, 1, 1, 1).background("#fef0cd"); // Example: Add custom background
44+
e.sender.activeSheet().range(e.index, 1, 1, 1).editor("color"); // Example: Set custom editor
45+
});
46+
}
47+
```
48+
49+
Use the `Range.editor()` method for applying custom editors. For more details, refer to [Range.editor() documentation](https://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/range/methods/editor).
50+
51+
### Example
52+
53+
```dojo
54+
<div id="spreadsheet" style="width: 100%"></div>
55+
<script>
56+
kendo.spreadsheet.registerEditor("color", function () {
57+
var context, dlg, model;
58+
// Further delay the initialization of the UI until the `edit` method is
59+
// actually called, so here just return the object with the required API.
60+
return {
61+
edit: function (options) {
62+
context = options;
63+
open();
64+
},
65+
icon: "droplet",
66+
};
67+
// This function actually creates the UI if not already there, and
68+
// caches the dialog and the model.
69+
function create() {
70+
if (!dlg) {
71+
model = kendo.observable({
72+
value: "#000000",
73+
ok: function () {
74+
// This is the result when OK is clicked.
75+
// Invoke the callback with the value.
76+
context.callback(model.value);
77+
dlg.close();
78+
},
79+
cancel: function () {
80+
dlg.close();
81+
},
82+
});
83+
var el = $(
84+
"<div data-visible='true' data-role='window' data-modal='true' data-resizable='false' data-title='Select color'>" +
85+
" <div data-role='flatcolorpicker' data-bind='value: value'></div>" +
86+
" <div style='margin-top: 1em; text-align: right'>" +
87+
" <button style='width: 5em' class='k-button' data-bind='click: ok'>OK</button>" +
88+
" <button style='width: 5em' class='k-button' data-bind='click: cancel'>Cancel</button>" +
89+
" </div>" +
90+
"</div>",
91+
);
92+
kendo.bind(el, model);
93+
94+
// Cache the dialog.
95+
dlg = el.getKendoWindow();
96+
}
97+
}
98+
function open() {
99+
create();
100+
dlg.open();
101+
dlg.center();
102+
// If the selected cell already contains some value, reflect
103+
// it in the custom editor.
104+
var value = context.range.value();
105+
if (value != null) {
106+
model.set("value", value);
107+
}
108+
}
109+
});
110+
111+
$(function () {
112+
$("#spreadsheet").kendoSpreadsheet({
113+
sheetsbar: false,
114+
insertRow: function (e) {
115+
setTimeout(function () {
116+
e.sender
117+
.activeSheet()
118+
.range(e.index, 1, 1, 1)
119+
.background("#fef0cd");
120+
e.sender.activeSheet().range(e.index, 1, 1, 1).editor("color");
121+
});
122+
},
123+
excel: {
124+
// Required to enable Excel Export in some browsers.
125+
proxyURL: "//demos.telerik.com/kendo-ui/service/export",
126+
},
127+
sheets: [
128+
{
129+
rows: [
130+
{
131+
cells: [
132+
{ value: "Select color:", bold: true },
133+
{ background: "#fef0cd", editor: "color" },
134+
],
135+
},
136+
],
137+
},
138+
],
139+
});
140+
});
141+
</script>
142+
```
143+
144+
145+
146+
## See Also
147+
148+
- [Spreadsheet Overview](https://www.telerik.com/kendo-jquery-ui/documentation/controls/spreadsheet/overview)
149+
- [Validation Configuration](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/configuration/sheets.rows.cells.validation)
150+
- [Range Editor Method](https://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/range/methods/editor)
151+
- [Spreadsheet Custom Cell Editors (Demo)](https://demos.telerik.com/kendo-ui/spreadsheet/custom-editors)

0 commit comments

Comments
 (0)