Skip to content

Commit 61baf19

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent b4bfab4 commit 61baf19

File tree

4 files changed

+543
-0
lines changed

4 files changed

+543
-0
lines changed

‎docs/knowledge-base/customize-expand-collapse-icons-kendo-ui-grid.md‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
---
2+
title: Changing the Expand/Collapse SVG Icon in Kendo UI Grid Hierarchy
3+
description: Learn how to change the expand/collapse SVG icon in a hierarchy grid in Kendo UI Grid
4+
type: how-to
5+
page_title: How to Customize Expand/Collapse SVG Icons in Kendo UI Grid Hierarchy
6+
slug: customize-expand-collapse-icons-kendo-ui-grid
7+
tags: kendo ui, grid, hierarchy, expand, collapse, css, databound, detailexpand, detailcollapse
8+
res_type: kb
9+
ticketid: 1687918
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>
19+
Grid for Progress® Kendo UI®
20+
</td>
21+
</tr>
22+
<tr>
23+
<td>Version</td>
24+
<td>
25+
2025.2.520
26+
</td>
27+
</tr>
28+
</tbody>
29+
</table>
30+
31+
## Description
32+
33+
I want to change the expand/collapse [SVG icon](/styles-and-layout/sass-themes/svg-icons) in a hierarchy Grid in Kendo UI. The default Kendo UI caret icon needs to be replaced with custom SVG icons, such as `plus-outline` for expand and `minus-outline` for collapse. This requires implementing custom logic in the[`dataBound`](/api/javascript/ui/grid/events/databound), [`detailExpand`](/api/javascript/ui/grid/events/detailexpand), and [`detailCollapse`](/api/javascript/ui/grid/events/detailcollapse) event handlers of the Kendo UI Grid.
34+
35+
This knowledge base article also answers the following questions:
36+
- How to replace default icons in Kendo UI Grid hierarchy?
37+
- How to use custom expand/collapse icons in Kendo UI Grid?
38+
- How to modify Kendo UI Grid hierarchy icons using event handlers?
39+
40+
## Solution
41+
42+
To achieve this, follow these steps:
43+
44+
1. Implement the [`dataBound`](/api/javascript/ui/grid/events/databound), [`detailExpand`](/api/javascript/ui/grid/events/detailexpand), and [`detailCollapse`](/api/javascript/ui/grid/events/detailcollapse) event handlers:
45+
46+
### `dataBound` Event Handler
47+
48+
Customize the hierarchy cells to hide the default icons and replace them with custom icons.
49+
50+
```javascript
51+
dataBound: function() {
52+
// Iterate over each hierarchy cell in the table body
53+
this.tbody.find('.k-hierarchy-cell').each(function(_, cell) {
54+
cell = $(cell); // Convert DOM element to jQuery object
55+
56+
// Prepend a span element with class 'expand' and an onclick handler to expand the row
57+
cell.prepend("<span class='expand' onclick='expandRow(this)'></span>");
58+
59+
// Hide the default Kendo UI caret icon
60+
cell.find(".k-svg-i-caret-alt-right").hide();
61+
});
62+
63+
// Replace the default icon with a custom 'plus-outline' icon for all elements with class 'expand'
64+
kendo.ui.icon($(".expand"), { icon: 'plus-outline' });
65+
}
66+
```
67+
68+
### `detailExpand` Event Handler
69+
70+
Update the expand button to show a collapse icon when the detail row is expanded.
71+
72+
```javascript
73+
detailExpand: function(e) {
74+
// Update all 'expand' buttons when a detail row is expanded
75+
this.tbody.find('.expand').each(function(_, button) {
76+
button = $(button); // Convert DOM element to jQuery object
77+
78+
// Change the text to "Collapse"
79+
button.text("Collapse");
80+
81+
// Switch class from 'expand' to 'collapse'
82+
button.removeClass("expand").addClass("collapse");
83+
84+
// Update the onclick handler to collapse the row
85+
button.attr("onclick", "collapseRow(this)");
86+
});
87+
88+
// Replace the icon with a 'minus-outline' for all elements with class 'collapse'
89+
kendo.ui.icon($(".collapse"), { icon: 'minus-outline' });
90+
}
91+
```
92+
93+
### `detailCollapse` Event Handler
94+
95+
Revert the collapse button to show an expand icon when the detail row is collapsed.
96+
97+
```javascript
98+
detailCollapse: function(e) {
99+
// Update all 'collapse' buttons when a detail row is collapsed
100+
this.tbody.find('.collapse').each(function(_, button) {
101+
button = $(button); // Convert DOM element to jQuery object
102+
103+
// Change the text to "Expand"
104+
button.text("Expand");
105+
106+
// Switch class from 'collapse' to 'expand'
107+
button.removeClass("collapse").addClass("expand");
108+
109+
// Update the onclick handler to expand the row
110+
button.attr("onclick", "expandRow(this)");
111+
});
112+
113+
// Replace the icon with a 'plus-outline' for all elements with class 'expand'
114+
kendo.ui.icon($(".expand"), { icon: 'plus-outline' });
115+
}
116+
```
117+
118+
2. Integrate these event handlers into your Kendo UI Grid initialization.
119+
120+
For a runnable example, please refer to the next demo.
121+
122+
```dojo
123+
<div id="grid"></div>
124+
<script>
125+
$(document).ready(function() {
126+
var element = $("#grid").kendoGrid({
127+
dataSource: {
128+
type: "odata",
129+
transport: {
130+
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
131+
},
132+
pageSize: 6,
133+
serverPaging: true,
134+
serverSorting: true
135+
},
136+
height: 600,
137+
sortable: true,
138+
pageable: true,
139+
detailInit: detailInit,
140+
dataBound: function() {
141+
this.tbody.find('.k-hierarchy-cell').each(function(_,x){
142+
x= $(x);
143+
x.prepend("<span class='expand' onclick='expandRow(this)'></span>");
144+
x.find(".k-svg-i-caret-alt-right").hide();
145+
});
146+
kendo.ui.icon($(".expand"), { icon: 'plus-outline' });
147+
},
148+
detailExpand: function(e) {
149+
this.tbody.find('.expand').each(function(_,x){
150+
x= $(x);
151+
x.text("Collapse");
152+
x.removeClass("expand").addClass("collapse");
153+
x.attr("onclick","collapsdRow(this)");
154+
});
155+
kendo.ui.icon($(".collapse"), { icon: 'minus-outline' });
156+
},
157+
detailCollapse: function(e) {
158+
this.tbody.find('.collapse').each(function(_,x){
159+
x= $(x);
160+
x.text("Expand");
161+
x.removeClass("collapse").addClass("expand");
162+
x.attr("onclick","expandRow(this)");
163+
});
164+
kendo.ui.icon($(".expand"), { icon: 'plus-outline' });
165+
},
166+
columns: [
167+
{
168+
field: "FirstName",
169+
title: "First Name",
170+
width: "110px"
171+
},
172+
{
173+
field: "LastName",
174+
title: "Last Name",
175+
width: "110px"
176+
},
177+
{
178+
field: "Country",
179+
width: "110px"
180+
},
181+
{
182+
field: "City",
183+
width: "110px"
184+
},
185+
{
186+
field: "Title",
187+
width: "110px",
188+
}
189+
]
190+
});
191+
});
192+
193+
function expandRow(e) {
194+
let row = $(e).parent().parent();
195+
var grid = $("#grid").data("kendoGrid");
196+
grid.expandRow(row);
197+
}
198+
199+
function collapsdRow(e) {
200+
let row = $(e).parent().parent();
201+
var grid = $("#grid").data("kendoGrid");
202+
grid.collapseRow(row);
203+
}
204+
205+
function detailInit(e) {
206+
$("<div/>").appendTo(e.detailCell).kendoGrid({
207+
dataSource: {
208+
type: "odata",
209+
transport: {
210+
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
211+
},
212+
serverPaging: true,
213+
serverSorting: true,
214+
serverFiltering: true,
215+
pageSize: 10,
216+
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
217+
},
218+
scrollable: false,
219+
sortable: true,
220+
pageable: true,
221+
columns: [
222+
{ field: "OrderID", width: "110px" },
223+
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
224+
{ field: "ShipAddress", title:"Ship Address", width: "110px" },
225+
{ field: "ShipName", title: "Ship Name", width: "300px" }
226+
]
227+
});
228+
}
229+
</script>
230+
```
231+
232+
## See Also
233+
234+
- [Kendo UI Grid Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/overview)
235+
- [dataBound Event Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/databound)
236+
- [detailExpand Event Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/detailexpand)
237+
- [detailCollapse Event Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/detailcollapse)
238+
- [Kendo UI SVG Icons](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/svg-icons)
239+
- [Progress® Design System Kit Iconography](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/)

‎docs/knowledge-base/detect-mode-change-kendo-ui-colorpicker.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: Detecting Mode Switch in Kendo UI ColorPicker
3+
description: Learn how to detect when a user switches between HEX and RGB modes in the Kendo UI ColorPicker component.
4+
type: how-to
5+
page_title: How to Detect Mode Change in Kendo UI ColorPicker
6+
slug: detect-mode-change-kendo-ui-colorpicker
7+
tags: kendo-ui,colorpicker,hex,rgb,mode-switch,events
8+
res_type: kb
9+
ticketid: 1688006
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Progress® Kendo UI® ColorPicker</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2025.1.227</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
I want to detect when a user switches between HEX and RGB modes in the [Kendo UI ColorPicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorpicker). The component supports events such as `change`, `select`, `open`, and `close`, but none of these directly capture the mode switch action. How can I implement this functionality?
30+
31+
This knowledge base article also answers the following questions:
32+
- How to track HEX and RGB mode changes in the Kendo UI ColorPicker?
33+
- Is there an event to detect mode switching in Kendo UI ColorPicker?
34+
- How to listen to mode toggle actions in Kendo UI ColorPicker?
35+
36+
## Solution
37+
38+
To achieve detection of mode switching between HEX and RGB, use the `open` event of the Kendo UI ColorPicker to attach a click listener to the toggle button. Use jQuery to check the currently visible mode.
39+
40+
### Steps:
41+
42+
1. Attach a handler to the `open` event of the ColorPicker.
43+
2. Inside the handler, use jQuery to add a `click` event listener to the mode toggle button (`.k-colorgradient-toggle-mode`).
44+
3. Use jQuery to determine which mode (HEX or RGB) is currently visible by checking the visibility of the respective elements.
45+
46+
### Example Implementation:
47+
48+
```javascript
49+
var firstOpen = true;
50+
51+
$("#colorPicker").kendoColorPicker({
52+
open: function () {
53+
if (firstOpen) {
54+
firstOpen = false;
55+
$(".k-colorgradient-toggle-mode").click(function () {
56+
if ($("[data-bind='visible: isHEXMode']").is(":visible")) {
57+
console.log("You are in HEX mode");
58+
} else if ($("[data-bind='visible: isRGBMode']").is(":visible")) {
59+
console.log("You are in RGB mode");
60+
}
61+
});
62+
}
63+
}
64+
});
65+
```
66+
67+
### Explanation:
68+
- The `open` event triggers when the ColorPicker's popup opens.
69+
- The `firstOpen` flag ensures the click event listener is attached only once.
70+
- The `click` listener checks which mode is currently visible using jQuery selectors and logs the result.
71+
72+
### Reference:
73+
You can find a working example in the [Kendo UI Dojo](https://dojo.telerik.com/igUjiyHQ/15).
74+
75+
## See Also
76+
77+
- [Kendo UI ColorPicker Documentation](https://docs.telerik.com/kendo-ui/controls/colorpicker/overview)
78+
- [Kendo UI ColorPicker Events](https://docs.telerik.com/kendo-ui/api/javascript/ui/colorpicker/events/open)

0 commit comments

Comments
 (0)