Skip to content

Commit 2c8784a

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent bb97541 commit 2c8784a

File tree

3 files changed

+152
-2
lines changed

3 files changed

+152
-2
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -771,7 +771,8 @@ Collapses nodes.
771771
treeview.collapse(treeview.findByText("foo"));
772772

773773
// collapse all items
774-
treeview.collapse(".k-item");
774+
treeview.collapse(".k-treeview-item");
775+
775776
</script>
776777

777778
#### Parameters

‎docs/controls/datetimepicker/start-end-time.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ To define the desired earliest and latest available time in the built-in TimePic
1919
2020
<script>
2121
$("#datetimepicker").kendoDateTimePicker({
22-
startTime: new Date(2023,1,3,8,30,0)
22+
startTime: new Date(2023,1,3,8,30,0),
2323
endTime: new Date(2023,1,3,17,00,0)
2424
});
2525
</script>

‎docs/knowledge-base/customize-icons-in-scrollview.md‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
title: Customizing Icons in ScrollView Instances
3+
description: Learn how to set different icons for the left and right navigation arrows in specific ScrollView instances using Kendo UI.
4+
type: how-to
5+
page_title: How to Customize Navigation Arrow Icons in ScrollView - Kendo UI
6+
slug: customize-icons-in-scrollview
7+
tags: kendo ui, scrollview, customization, icons, navigation arrows
8+
res_type: kb
9+
ticketid: 1662936
10+
---
11+
12+
## Environment
13+
14+
| Product | Version |
15+
| --- | --- |
16+
| Kendo UI for jQuery | 2024.1.130 |
17+
18+
## Description
19+
20+
I want to customize the left and right navigation icons for different ScrollView instances. Each ScrollView should have unique icons for its navigation arrows.
21+
22+
This KB article also answers the following questions:
23+
- How can I change the navigation arrow icons in a ScrollView?
24+
- Is it possible to set custom icons for ScrollView navigation arrows?
25+
- Can different ScrollView instances have unique navigation arrow icons?
26+
27+
## Solution
28+
29+
To customize the navigation arrow icons for specific ScrollView instances, use the [`kendo.ui.icon`](/api/javascript/ui/ui/methods/icon) method with a selector that targets the arrows within the desired ScrollView. This approach allows setting different icons for the navigation arrows in each ScrollView instance without affecting other controls or instances.
30+
31+
First, ensure the [ScrollView](https://docs.telerik.com/kendo-ui/api/javascript/ui/scrollview) is initialized. Then, use the following code snippet to customize the icons:
32+
33+
```javascript
34+
// Customize the previous (left) navigation arrow
35+
kendo.ui.icon($("#scrollView1 .k-scrollview-prev"), { icon: 'arrow-left', size: 'xxxlarge' });
36+
37+
// Customize the next (right) navigation arrow
38+
kendo.ui.icon($("#scrollView1 .k-scrollview-next"), { icon: 'arrow-right', size: 'xxxlarge' });
39+
```
40+
41+
Replace `#scrollView1` with the id of your ScrollView container. This method allows you to specify different icons for each ScrollView instance on your page.
42+
43+
Below is a runnable example:
44+
```dojo
45+
<div id="example">
46+
<div style="margin:auto; width:70%">
47+
<div id="scrollView" style="width: 1022px; height: 315px; max-width: 100%;">
48+
<div class="photo photo1" data-role="page">
49+
</div><div class="photo photo2" data-role="page">
50+
</div><div class="photo photo3" data-role="page">
51+
</div><div class="photo photo4" data-role="page">
52+
</div><div class="photo photo5" data-role="page">
53+
</div><div class="photo photo6" data-role="page">
54+
</div><div class="photo photo7" data-role="page">
55+
</div><div class="photo photo8" data-role="page">
56+
</div><div class="photo photo9" data-role="page">
57+
</div><div class="photo photo10" data-role="page">
58+
</div>
59+
</div>
60+
<div> Secon ScrollView</div>
61+
<div id="scrollView2" style="width: 1022px; height: 315px; max-width: 100%;">
62+
<div class="photo photo1" data-role="page">
63+
64+
</div><div class="photo photo6" data-role="page">
65+
</div><div class="photo photo7" data-role="page">
66+
</div><div class="photo photo8" data-role="page">
67+
</div><div class="photo photo9" data-role="page">
68+
</div><div class="photo photo10" data-role="page">
69+
</div>
70+
</div>
71+
</div>
72+
<script>
73+
$(document).ready(function() {
74+
$("#scrollView").kendoScrollView({
75+
enablePager: true,
76+
contentHeight: "100%"
77+
});
78+
79+
$("#scrollView2").kendoScrollView({
80+
enablePager: true,
81+
contentHeight: "100%"
82+
});
83+
84+
kendo.ui.icon($("#scrollView .k-scrollview-prev"), { icon: 'arrow-left', size: 'xxxlarge' });
85+
kendo.ui.icon($("#scrollView .k-scrollview-next"), { icon: 'arrow-right', size: 'xxxlarge' });
86+
});
87+
</script>
88+
<style>
89+
90+
91+
#scrollview-home .photo {
92+
display: inline-block;
93+
background-size: cover;
94+
background-repeat: no-repeat;
95+
background-position: center center;
96+
}
97+
98+
.photo1 {
99+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/images/photos/1.jpg");
100+
}
101+
102+
.photo2 {
103+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/images/photos/2.jpg");
104+
}
105+
106+
.photo3 {
107+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/images/photos/3.jpg");
108+
}
109+
110+
.photo4 {
111+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/images/photos/4.jpg");
112+
}
113+
114+
.photo5 {
115+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/images/photos/5.jpg");
116+
}
117+
118+
.photo6 {
119+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/images/photos/6.jpg");
120+
}
121+
122+
.photo7 {
123+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/images/photos/7.jpg");
124+
}
125+
126+
.photo8 {
127+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/images/photos/8.jpg");
128+
}
129+
130+
.photo9 {
131+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/images/photos/9.jpg");
132+
}
133+
134+
.photo10 {
135+
background-image: url("https://demos.telerik.com/kendo-ui/content/shared/images/photos/10.jpg");
136+
}
137+
</style>
138+
</div>
139+
```
140+
141+
## Notes
142+
143+
- Ensure each ScrollView instance has a unique id or class for targeting with the jQuery selector.
144+
- The [`size`](https://www.telerik.com/design-system/docs/foundation/iconography/visual-adjustments/) option can be adjusted as needed, with `xxxlarge` being used in this example for demonstration purposes.
145+
146+
## See Also
147+
148+
- [Kendo UI ScrollView API](https://docs.telerik.com/kendo-ui/api/javascript/ui/scrollview)
149+
- [Kendo UI ScrollView Documentation](https://docs.telerik.com/kendo-ui/controls/scrollview/overview)

0 commit comments

Comments
 (0)