Skip to content

Commit 77c9825

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent f07e694 commit 77c9825

File tree

8 files changed

+300
-96
lines changed

8 files changed

+300
-96
lines changed

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

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2698,15 +2698,33 @@ The available editor commands are:
26982698
* Formatting marks
26992699
- **formattingMarks**
27002700

2701-
#### Example
2701+
#### Example - add built-in and custom buttons to the tools collection
27022702

27032703
<textarea id="editor"></textarea>
27042704
<script>
2705-
$("#editor").kendoEditor({
2706-
tools: [
2707-
"bold", "italic", "underline"
2708-
]
2709-
});
2705+
$("#editor").kendoEditor({
2706+
tools: [
2707+
{
2708+
name: "bold",
2709+
},
2710+
{
2711+
name: "italic"
2712+
},
2713+
{
2714+
name: "underline"
2715+
},
2716+
{
2717+
name: "custom",
2718+
template: '<button id="custom">Custom</button>'
2719+
}
2720+
]
2721+
});
2722+
2723+
$("#custom").kendoButton({
2724+
click: function() {
2725+
console.log("custom hanler")
2726+
}
2727+
})
27102728
</script>
27112729

27122730
### tools.name `String`
@@ -4836,13 +4854,14 @@ When set to false, the decoration applied by the Formatting tool dropdown will b
48364854

48374855
The HTML element which represents the editor content area. In the [classic Editor mode](/controls/editor/overview#classic-mode), this is the `<body>` element inside the `iframe`. In the [inline Editor mode](/controls/editor/overview#inline-mode), this is the [element, from which the Editor is initialized](/intro/widget-basics/wrapper-element).
48384856

4839-
#### Example
4857+
#### Example - set background color and font color to the editor content area
48404858

48414859
<textarea id="editor"></textarea>
48424860
<script>
48434861
$("#editor").kendoEditor();
48444862
var editor = $("#editor").data("kendoEditor");
48454863
editor.body.style.backgroundColor = "#f00";
4864+
editor.body.style.color = "#FFFFFF";
48464865
</script>
48474866

48484867
### toolbar `Object`

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

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9120,6 +9120,8 @@ If set to `true` the user could reorder the rows by dragging them. By default re
91209120

91219121
> Note that the reordering operation is only a client-side operation and it does not reflect the order of any data that is bound to the server.
91229122
9123+
More about the Grid Row Drag and Drop functionality you can read in [`this article`](/controls/grid/row-drag-drop#row-drag-and-drop).
9124+
91239125
#### Example - enable column reordering
91249126

91259127
<div id="grid"></div>
@@ -9799,28 +9801,31 @@ The [template](/api/javascript/kendo/methods/template) which renders the Status
97999801

98009802
#### Example
98019803

9804+
<div id="grid"></div>
9805+
<script>
98029806
$("#grid").kendoGrid({
9803-
columns: [
9804-
{ field: "name" },
9805-
{ field: "age" }
9807+
columns: [
9808+
{ field: "name" },
9809+
{ field: "age" }
9810+
],
9811+
dataSource: {
9812+
data: [
9813+
{ id: 1, name: "Jane Doe", age: 30 },
9814+
{ id: 2, name: "John Doe", age: 33 }
98069815
],
9807-
dataSource: {
9808-
data: [
9809-
{ id: 1, name: "Jane Doe", age: 30 },
9810-
{ id: 2, name: "John Doe", age: 33 }
9811-
],
9812-
schema: {
9813-
model: {
9814-
id: "id"
9815-
}
9816-
}
9817-
},
9818-
selectable: {
9819-
mode: "cell",
9820-
cellAggregates: true
9821-
},
9822-
statusBarTemplate: ({ aggregates }) => `${aggregates.count}`
9816+
schema: {
9817+
model: {
9818+
id: "id"
9819+
}
9820+
}
9821+
},
9822+
selectable: {
9823+
mode: "cell",
9824+
cellAggregates: true
9825+
},
9826+
statusBarTemplate: ({ aggregates }) => `${aggregates.count}`
98239827
});
9828+
</script>
98249829

98259830
### toolbar `String|Function|Array`
98269831

‎docs/controls/checkbox/appearance.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ The example below shows a basic configuration and how to set the size to "small"
3232

3333

3434
```dojo
35-
<input id="checkbox" />
35+
<input id="checkbox" checked />
3636
<script>
3737
$("#checkbox").kendoCheckBox({
3838
size: "small"
@@ -53,8 +53,7 @@ The available [`rounded`](/api/javascript/ui/checkbox/configuration/rounded) val
5353
The following example demonstrates how the `rounded` option can be set to `full`:
5454

5555
```dojo
56-
<input id="checkbox"/>
57-
56+
<input id="checkbox" checked/>
5857
<script>
5958
$(document).ready(function(){
6059
$("#checkbox").kendoCheckBox({

‎docs/controls/radialgauge/get-started.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@ The RadialGauge allows you to add multiple [`pointers`](/api/javascript/dataviz/
9393

9494
* Add two pointers.
9595
* Configure the [`value`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge/configuration/pointer#pointervalue) and [`color`](https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/radialgauge/configuration/pointer#pointercolor) of the pointers.
96-
* Specify the [`colors`](/api/javascript/dataviz/ui/radialgauge/configuration/colors) of the value pointer. The color of the pointer will change based on the current value of the RadialGauge component.
9796

9897

9998
```dojo

‎docs/intro/installation/using-license-code.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ The following table shows the most common location you can include it according
6060

6161
|Type of Application|Common Locations
6262
|:---|:---
63-
|JS applications|<ul><li><code>./</code></li><li><code>./src</code></li><li><code>./scripts</code></li><li><code>./js</code></li></ul>
63+
|JS (JavaScript) applications|<ul><li><code>./</code></li><li><code>./src</code></li><li><code>./scripts</code></li><li><code>./js</code></li></ul>
6464
|ASP.NET MVC applications|<ul><li><code>./</code></li><li><code>./Scripts</code></li></ul>
6565
|ASP.NET Core applications|<ul><li><code>./wwwroot</code></li><li><code>./wwwroot/scripts</code></li><li><code>./wwwroot/js</code></li></ul>
6666

@@ -104,7 +104,7 @@ The following example shows how to use the CDN reference by utilizing the predef
104104

105105
Import the `kendo-ui-license.js` file right after the import of the Kendo UI modules.
106106

107-
The following example shows how to use the ESM modules.
107+
The following example shows how to use the ESM (ECMAScript) modules.
108108

109109
```js
110110
import "@progress/kendo-ui";
@@ -113,7 +113,7 @@ import "./kendo-ui-license.js";
113113
$("#grid").kendoGrid();
114114
```
115115

116-
The following example shows how to use the CJS modules.
116+
The following example shows how to use the CJS (CommonJS) modules.
117117

118118
```js
119119
require("@progress/kendo-ui");
@@ -124,7 +124,7 @@ $("#grid").kendoGrid();
124124

125125
Often, you will need two or more imports of the Kendo UI libraries and you will need to import the license file only in one location, which most likely will be the main script file of your application. In that case, import the `kendo.core.js` and register your license code as usual.
126126

127-
The following example shows how to use the ESM modules to import the license file in a single location.
127+
The following example shows how to use the ESM (ECMAScript) modules to import the license file in a single location.
128128

129129
```js
130130
import '@progress/kendo-ui/js/kendo.core';
@@ -133,7 +133,7 @@ import './kendo-ui-license.js';
133133
// The rest of the code.
134134
```
135135

136-
The following example shows how to use the CJS modules to import the license files in a single location.
136+
The following example shows how to use the CJS (CommonJS) modules to import the license files in a single location.
137137

138138
```js
139139
require("@progress/kendo-ui/js/kendo.core");

‎docs/knowledge-base/customize-scheduler-event-label-text-colors-kendo-ui.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
---
2+
title: Setting Text Color for Scheduler Events Based on the Resource
3+
description: Learn how to customize the text color of the text in the events within the Scheduler component depending on the resource.
4+
type: how-to
5+
page_title: How to Customize Scheduler Event Text Colors Based on the Resource in Kendo UI
6+
slug: customize-scheduler-event-label-text-colors-kendo-ui
7+
tags: scheduler, event, label, text, color, customization, kendo-ui
8+
res_type: kb
9+
ticketid: 1653968
10+
---
11+
12+
## Environment
13+
14+
| Product | Version |
15+
| --- | --- |
16+
| Scheduler for Progress® Kendo UI® | 2024.2.514 |
17+
18+
## Description
19+
20+
I am trying to customize the text color of event labels within the Scheduler, not just the background color. The default configuration allows setting the background color of events, but I need to apply specific text colors to these events as well.
21+
22+
## Solution
23+
24+
To customize the text color of event labels in the Scheduler, use a custom [`eventTemplate`](/api/javascript/ui/scheduler/configuration/eventtemplate) along with the [`dataBound`](/api/javascript/ui/scheduler/events/databound) event to apply styles dynamically. Since the Scheduler resources do not directly support setting the text color, this custom approach involves adding a template for the events and then using a class to apply the desired text color.
25+
26+
1. Define a custom [`eventTemplate`](/api/javascript/ui/scheduler/configuration/eventtemplate) for Scheduler events. In this template, assign a class to the event's text based on its resources or color:
27+
28+
```html
29+
<script id="event-template" type="text/x-kendo-template">
30+
<div>Title: #: title #</div>
31+
<div>Attendees:
32+
# for (var i = 0; i < resources.length; i++) { #
33+
<span class="#: resources[i].text #">Attendees:
34+
#: resources[i].text #
35+
</span>
36+
# } #
37+
</div>
38+
</script>
39+
```
40+
41+
2. Use the [`dataBound`](/api/javascript/ui/scheduler/events/databound) event of the [Scheduler] to apply custom text colors based on the class added in the template:
42+
43+
```javascript
44+
dataBound: function(e){
45+
$('.Alex').closest('.k-event').css('color', 'violet');
46+
$('.Bob').closest('.k-event').css('color', 'green');
47+
},
48+
```
49+
50+
```dojo
51+
<script id="event-template" type="text/x-kendo-template">
52+
<div>Title: #: title #</div>
53+
<div>Atendees:
54+
# for (var i = 0; i < resources.length; i++) { #
55+
<span class="#: resources[i].text #">Atendees:
56+
#: resources[i].text #
57+
</span>
58+
# } #
59+
</div>
60+
</script>
61+
62+
<div id="scheduler"></div>
63+
<script>
64+
$("#scheduler").kendoScheduler({
65+
date: new Date("2013/6/6"),
66+
eventTemplate: $("#event-template").html(),
67+
dataBound: function(e){
68+
$('.Alex').closest('.k-event').css('color', 'violet')
69+
$('.Bob').closest('.k-event').css('color', 'green')
70+
},
71+
dataSource: [
72+
{
73+
id: 1,
74+
start: new Date("2013/6/6 08:00 AM"),
75+
end: new Date("2013/6/6 09:00 AM"),
76+
title: "Interview",
77+
atendees: [1]
78+
},
79+
{
80+
id: 1,
81+
start: new Date("2013/6/6 11:00 AM"),
82+
end: new Date("2013/6/6 12:00 PM"),
83+
title: "Interview 2",
84+
atendees: [2]
85+
}
86+
],
87+
resources: [
88+
{
89+
field: "atendees",
90+
dataSource: [
91+
{ value: 1, text: "Alex", color: 'lightgreen'},
92+
{ value: 2, text: "Bob" , color: 'lightblue'}
93+
],
94+
multiple: true
95+
}
96+
]
97+
});
98+
</script>
99+
```
100+
101+
## See Also
102+
103+
- [Scheduler Overview](https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/overview)
104+
- [Scheduler Templates](https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/templates)
105+
- [Scheduler dataBound Event](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/events/databound)

0 commit comments

Comments
 (0)