Skip to content

Commit 2adc751

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 47ec8ef commit 2adc751

File tree

5 files changed

+516
-1
lines changed

5 files changed

+516
-1
lines changed

‎docs/knowledge-base/customizing-label-width-height-kendo-jquery-chart.md‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
title: Adding Fixed Width or Height to Label Section in Kendo UI for jQuery Chart
3+
description: Learn how to customize the width or height of labels in the categoryAxis of Kendo UI for jQuery Chart by trimming the label text.
4+
type: how-to
5+
page_title: Customizing Label Width or Height in Kendo UI Chart CategoryAxis
6+
meta_title: Customizing Label Width or Height in Kendo UI Chart CategoryAxis
7+
slug: customizing-label-width-height-kendo-jquery-chart
8+
tags: chart, kendo-ui-for-jquery, categoryaxis, labels, template
9+
res_type: kb
10+
ticketid: 1640462
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td> Product </td>
18+
<td>
19+
Kendo UI for jQuery Chart
20+
</td>
21+
</tr>
22+
<tr>
23+
<td> Version </td>
24+
<td>
25+
2025.2.702
26+
</td>
27+
</tr>
28+
</tbody>
29+
</table>
30+
31+
## Description
32+
33+
I want to set a fixed width or height for the labels in the categoryAxis of the [Kendo UI for jQuery Chart](/controls/charts/overview). If the label text exceeds the defined space, I want it truncated and displayed with ellipses.
34+
35+
This knowledge base article also answers the following questions:
36+
- How to limit label text width in Kendo UI Chart categoryAxis?
37+
- How to truncate label text in categoryAxis of Kendo UI Chart?
38+
- How to customize label appearance in Kendo UI for jQuery Chart?
39+
40+
## Solution
41+
42+
To achieve this behavior, use the [`categoryAxis.labels.template`](/api/javascript/dataviz/ui/chart/configuration/categoryaxis.labels) configuration and implement a custom function to trim the label text.
43+
44+
1. Define the `categoryAxis.labels.template` property in the Kendo UI Chart configuration.
45+
2. Use a JavaScript function to shorten the label text based on your requirements.
46+
47+
Here is an example:
48+
49+
```javascript
50+
$("#chart").kendoChart({
51+
// Chart configuration
52+
categoryAxis: {
53+
// Category axis configuration
54+
labels: {
55+
template: "#= shortLabels(value)#" // Use the custom function
56+
}
57+
}
58+
});
59+
60+
// Function to trim the label text
61+
function shortLabels(value) {
62+
if (value.length > 5) { // Define the maximum length
63+
return value.substring(0, 5) + "..."; // Truncate and add ellipses
64+
}
65+
return value; // Return the original value if within limit
66+
}
67+
```
68+
69+
### Explanation:
70+
- Use the `categoryAxis.labels.template` to define a custom rendering template.
71+
- The `shortLabels` function checks the label length and truncates it if it exceeds the specified length.
72+
- Append ellipses (`...`) to the truncated text to indicate the text was shortened.
73+
74+
For a runnable example, please refer to the Dojo below.
75+
76+
```dojo
77+
<div id="chart"></div>
78+
<script>
79+
$("#chart").kendoChart({
80+
title: {
81+
text: "Site Visitors Stats"
82+
},
83+
subtitle: {
84+
text: "/thousands/"
85+
},
86+
legend: {
87+
visible: false
88+
},
89+
seriesDefaults: {
90+
type: "bar"
91+
},
92+
series: [{
93+
name: "Total Visits",
94+
data: [56000, 63000, 74000, 91000, 117000, 138000]
95+
}, {
96+
name: "Unique visitors",
97+
data: [52000, 34000, 23000, 48000, 67000, 83000]
98+
}],
99+
valueAxis: {
100+
max: 140000,
101+
line: {
102+
visible: false
103+
},
104+
minorGridLines: {
105+
visible: true
106+
},
107+
labels: {
108+
rotation: "auto"
109+
}
110+
},
111+
categoryAxis: {
112+
categories: ["January", "February", "March", "April", "May", "June"],
113+
majorGridLines: {
114+
visible: false
115+
},
116+
labels: {
117+
template: "#= shortLabels(value)#"
118+
}
119+
},
120+
tooltip: {
121+
visible: true,
122+
template: "#= series.name #: #= value #"
123+
}
124+
});
125+
126+
function shortLabels(value) {
127+
if (value.length >= 3) {
128+
return value.substring(0, 3) + "..."; // Truncate and add ellipses;
129+
}
130+
}
131+
</script>
132+
```
133+
134+
## See Also
135+
- [Kendo UI for jQuery Chart Documentation](/controls/charts/overview)
136+
- [CategoryAxis Labels Configuration](/api/javascript/dataviz/ui/chart/configuration/categoryaxis.labels)

‎docs/knowledge-base/dynamically-refresh-kendo-jquery-popover-body.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
title: Refreshing Popover Body Dynamically in Kendo UI for jQuery
3+
description: Learn how to dynamically refresh the body content of a Kendo UI for jQuery Popover after it has been shown.
4+
type: how-to
5+
page_title: How to Dynamically Update Popover Content in Kendo UI for jQuery
6+
meta_title: How to Dynamically Update Popover Content in Kendo UI for jQuery
7+
slug: dynamically-refresh-kendo-jquery-popover-body
8+
tags: kendo-ui-for-jquery, popover, dynamic-content, refresh-body, setOptions, show-event
9+
res_type: kb
10+
ticketid: 1692487
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td> Product </td>
19+
<td>
20+
Kendo UI for jQuery Popover
21+
</td>
22+
</tr>
23+
<tr>
24+
<td> Version </td>
25+
<td>
26+
2025.2.702
27+
</td>
28+
</tr>
29+
</tbody>
30+
</table>
31+
32+
## Description
33+
34+
I want to refresh the body content of a Kendo UI for jQuery [Popover](https://www.telerik.com/kendo-jquery-ui/documentation/controls/popover/overview) dynamically after it has been displayed. Setting the Popover options programmatically with [`setOptions`](/api/javascript/ui/widget/methods/setoptions) updates the initial configuration but does not reflect changes in the displayed content. The content remains static after the Popover has been shown. How can I ensure the body content updates dynamically?
35+
36+
This knowledge base article also answers the following questions:
37+
- How to update Kendo UI for jQuery Popover content dynamically?
38+
- Why does `setOptions` not refresh Popover content after showing?
39+
- How to handle dynamic content in Kendo UI for jQuery Popover?
40+
41+
## Solution
42+
43+
To dynamically update the content of the Popover after it has been shown, use the [`show`](/api/javascript/ui/popover/events/show) event handler to modify the body content directly. The `show` event is triggered whenever the Popover becomes visible, allowing you to inject updated content.
44+
45+
Follow these steps:
46+
47+
1. Configure the Popover with the `show` event handler.
48+
2. In the `show` event, use `e.sender.wrapper.find(".k-popover-body")` to target the body element inside the Popover.
49+
3. Update the content using `.html()` with the new dynamic data.
50+
51+
Here’s an example:
52+
53+
```dojo
54+
55+
<span id="target" class="k-group">Target</span>
56+
57+
<script id="body-template" type="text/x-kendo-template">
58+
<div>
59+
<p>The current time is: #: time #</p>
60+
</div>
61+
</script>
62+
63+
<script>
64+
$(document).ready(function () {
65+
var bodyTemplate = kendo.template($("#body-template").html());
66+
var counter = 1
67+
$("#target").kendoPopover({
68+
position: "right",
69+
header: "Dynamic Template Example",
70+
show: function(e) {
71+
let content = bodyTemplate({ time: new Date().toLocaleTimeString() })
72+
e.sender.wrapper.find(".k-popover-body").html(content)
73+
},
74+
body: function () {
75+
76+
return bodyTemplate({ time: new Date().toLocaleTimeString() });
77+
}
78+
});
79+
});
80+
</script>
81+
```
82+
83+
### Explanation
84+
- `show` event triggers each time the Popover is displayed.
85+
- `e.sender.wrapper.find(".k-popover-body").html(newContent)` modifies the body content dynamically.
86+
87+
Use this approach to ensure the Popover content updates each time it is opened.
88+
89+
## See Also
90+
91+
- [Kendo UI for jQuery Popover Documentation](https://www.telerik.com/kendo-jquery-ui/documentation/controls/popover/overview)
92+
- [Popover API](https://docs.telerik.com/kendo-ui/api/javascript/ui/popover)

‎docs/knowledge-base/hide-grid-fields-by-name-popup-editor.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
title: Hiding Grid Fields by Field Name in Popup Editor
3+
description: Learn how to hide specific fields in the Kendo UI for jQuery Grid's popup editor by targeting field names.
4+
type: how-to
5+
page_title: How to Hide Specific Grid Fields by Field Name in Popup Editor
6+
meta_title: How to Hide Specific Grid Fields by Field Name in Popup Editor
7+
slug: hide-grid-fields-by-name-popup-editor
8+
tags: grid, kendo-ui-for-jquery, popup-editor, editable, fields
9+
res_type: kb
10+
ticketid: 1674334
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td> Product </td>
19+
<td>
20+
Kendo UI for jQuery Grid
21+
</td>
22+
</tr>
23+
<tr>
24+
<td> Version </td>
25+
<td> 2025.2.520 </td>
26+
</tr>
27+
</tbody>
28+
</table>
29+
30+
## Description
31+
32+
I want to hide specific fields in the Kendo UI for jQuery Grid's popup editor using their field names instead of field indexes. When the popup editor opens, some fields should not be visible if certain conditions are met.
33+
34+
This knowledge base article also answers the following questions:
35+
- How to conditionally hide specific fields in the Kendo UI Grid popup editor?
36+
- Is it possible to hide fields in the Grid popup editor by their names?
37+
- How to customize the appearance of the popup editor in Kendo UI Grid?
38+
39+
## Solution
40+
41+
To hide fields in the popup editor by their field names, target the elements using their `data-container-for` attributes. Use the `edit` event of the Grid to apply the logic. Below is an example:
42+
43+
```javascript
44+
edit: function(e) {
45+
if(e.model.name !== "Jane") {
46+
$(e.container.find(".k-form-field .k-form-field-wrap[data-container-for='_events']").parent()).hide();
47+
$(e.container.find(".k-form-field .k-form-field-wrap[data-container-for='_handlers']").parent()).hide();
48+
$(e.container.find(".k-form-field .k-form-field-wrap[data-container-for='uid']").parent()).hide();
49+
$(e.container.find(".k-form-field .k-form-field-wrap[data-container-for='parent']").parent()).hide();
50+
}
51+
}
52+
```
53+
54+
### Explanation
55+
1. The [`edit`](/api/javascript/ui/grid/events/edit) function is triggered when the popup editor is initialized.
56+
2. The condition `if(e.model.name !== "Jane")` checks the value of the `name` field.
57+
3. Use the `data-container-for` attribute to locate specific fields by their names and hide their parent elements.
58+
59+
### Dojo Example
60+
61+
Below is a runnable Dojo example:
62+
63+
```dojo
64+
<div id="grid"></div>
65+
<script>
66+
$("#grid").kendoGrid({
67+
columns: [
68+
{ field: "name",
69+
editable: function (dataItem) {
70+
return dataItem.name === "Jane"; // Name editor is created only if dataItem name is Jane
71+
}
72+
},
73+
{
74+
field: "salary",
75+
editable: function (dataItem) {
76+
return dataItem.name === "Jane"; // Salary editor is created only if dataItem name is Jane
77+
}
78+
},
79+
{ command: "edit" }
80+
],
81+
editable: "popup",
82+
edit: function(e) {
83+
if(e.model.name !== "Jane") {
84+
$(e.container.find(".k-form-field .k-form-field-wrap[data-container-for='_events']").parent()).hide();
85+
$(e.container.find(".k-form-field .k-form-field-wrap[data-container-for='_handlers']").parent()).hide();
86+
$(e.container.find(".k-form-field .k-form-field-wrap[data-container-for='uid']").parent()).hide();
87+
$(e.container.find(".k-form-field .k-form-field-wrap[data-container-for='parent']").parent()).hide();
88+
}
89+
},
90+
dataSource: [ { name: "Jane", salary: 2000 }, { name: "Bill", salary: 2000 } ]
91+
});
92+
</script>
93+
```
94+
95+
96+
97+
## See Also
98+
99+
- [Grid Non-Editable Fields in Popup Editor](https://docs.telerik.com/kendo-ui/knowledge-base/grid-non-editable-fields-in-popup-editor)
100+
- [Kendo UI for jQuery Grid API](/api/javascript/ui/grid)
101+
- [Grid Editing Overview](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/editing/editing)

0 commit comments

Comments
 (0)