Skip to content

Commit b2156ac

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 992623d commit b2156ac

File tree

2 files changed

+384
-0
lines changed

2 files changed

+384
-0
lines changed

‎docs/knowledge-base/configuring-event-functions-in-kendo-ui-mvvm-grid.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
---
2+
title: Configuring Event Functions Custom Editors in Kendo UI MVVM Grid
3+
description: Learn how to configure event functions in Kendo UI MVVM Grid when using custom editors like DropDownList.
4+
type: how-to
5+
page_title: Adding Event Functions to MVVM Grid Editors
6+
slug: configuring-event-functions-in-kendo-ui-mvvm-grid
7+
tags: grid, kendo-ui, mvvm, editor, dropdownlist, events
8+
res_type: kb
9+
ticketid: 1688929
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Progress® Kendo UI®</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2025.2.520</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
When using the Kendo UI MVVM Grid with custom editors such as DropDownList, event bindings may not function as expected if they do not reference the main view model. This issue occurs because bindings in Kendo UI MVVM are not standard JavaScript code and need explicit linkage to the view model. For example, the `change` event may not be located in the parent view model array, leading to difficulties in handling events.
30+
31+
This knowledge base article also answers the following questions:
32+
- How to bind events in Kendo UI MVVM Grid editors?
33+
- Why does the `change` event not work in MVVM Grid custom editors?
34+
- How to configure DropDownList as a custom editor in MVVM Grid?
35+
36+
## Solution
37+
38+
To ensure event functions are correctly linked to the main view model, configure the needed editor directly in the view model. Below is a step-by-step solution:
39+
40+
### Custom DropDownList Editor Example
41+
42+
Define the editor function in the view model and include the required bindings explicitly.
43+
44+
```javascript
45+
var viewModel = kendo.observable({
46+
comboData: [
47+
{ text: "Option 1", value: 1 },
48+
{ text: "Option 2", value: 2 },
49+
],
50+
onChange: function(e) {
51+
alert("Change event triggered!");
52+
},
53+
editor: function(container, options) {
54+
$('<input name="' + options.field + '"/>')
55+
.appendTo(container)
56+
.kendoDropDownList({
57+
dataSource: this.get("comboData"),
58+
dataTextField: "text",
59+
dataValueField: "value",
60+
valuePrimitive: true,
61+
value: options.model[options.field],
62+
change: this.get("onChange"), // Reference to the viewModel function
63+
});
64+
}
65+
});
66+
67+
kendo.bind($("#grid"), viewModel);
68+
```
69+
70+
### Configuring MVVM Grid Columns
71+
In the MVVM Grid configuration, reference the custom editor function from the view model.
72+
73+
```html
74+
<div id="grid" data-role="grid"
75+
data-columns="[
76+
{ 'field': 'column1', editor: viewModel.editor }
77+
]"
78+
data-bind="source: gridData">
79+
</div>
80+
```
81+
82+
### Key Notes
83+
1. Bind the editor function directly to the view model.
84+
2. Ensure all required data and functions (`comboData`, `onChange`) are part of the view model.
85+
86+
### Example
87+
88+
```dojo
89+
<div id="example">
90+
<div
91+
data-role="grid"
92+
data-editable="true"
93+
data-columns="[
94+
{ 'field': 'column1', editor:viewModel.editor },
95+
{ 'field': 'column2' },
96+
{ 'field': 'column3' },
97+
{ 'field': 'column4' }
98+
]"
99+
data-bind="source: gridData"
100+
></div>
101+
102+
<script>
103+
var viewModel = kendo.observable({
104+
gridData: [
105+
{
106+
column1: "Column2",
107+
column2: "Column2",
108+
column3: "Column3",
109+
column4: "Column4",
110+
},
111+
],
112+
comboData: [
113+
{
114+
text: "Column 1",
115+
value: "Column1",
116+
},
117+
{
118+
text: "Column 2",
119+
value: "Column2",
120+
},
121+
{
122+
text: "Column 3",
123+
value: "Column3",
124+
},
125+
],
126+
onChange: function () {
127+
alert("changed");
128+
},
129+
editor: function (container, options) {
130+
$('<input name="' + options.field + '"/>')
131+
.appendTo(container)
132+
.kendoDropDownList({
133+
dataSource: viewModel.comboData,
134+
dataTextField: "text",
135+
dataValueField: "value",
136+
valuePrimitive: true,
137+
value: "column1",
138+
change: viewModel.onChange,
139+
});
140+
},
141+
});
142+
kendo.bind($("#example"), viewModel);
143+
</script>
144+
</div>
145+
```
146+
147+
## See Also
148+
149+
- [Kendo UI MVVM Overview](https://www.telerik.com/kendo-jquery-ui/documentation/framework/mvvm/overview#important-notes)
150+
- [Kendo UI Grid Documentation](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/overview)
151+
- [Kendo UI DropDownList Documentation](https://www.telerik.com/kendo-jquery-ui/documentation/controls/dropdownlist/overview)

‎docs/knowledge-base/scheduler-refresh-minortickcount.md‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
---
2+
title: Changing MinorTickCount at Runtime in Kendo jQuery Scheduler
3+
description: Learn how to update the `minorTickCount` property dynamically using the `.view()` method in Scheduler.
4+
type: how-to
5+
page_title: Modify minorTickCount in Kendo Scheduler
6+
slug: scheduler-refresh-minortickcount
7+
tags: scheduler, view, minorTickCount, setOptions, kendo ui
8+
res_type: kb
9+
ticketid: 1689609
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>
18+
Scheduler for Progress® Kendo UI®
19+
</td>
20+
</tr>
21+
<tr>
22+
<td>Version</td>
23+
<td>2025.2.520</td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
28+
## Description
29+
30+
When changing the `minorTickCount` property of the Scheduler using the `setOptions` method and attempting to reload the view with `scheduler.view("day")`, the Scheduler may not redraw correctly to reflect the updated `minorTickCount`. This issue can occur because the changes are not applied directly to the current view configuration.
31+
32+
This knowledge base article also answers the following questions:
33+
- How to refresh Kendo UI Scheduler after modifying minorTickCount?
34+
- Why is the Scheduler view not updating after changing minorTickCount?
35+
- How can I apply minorTickCount changes to the current Scheduler view?
36+
37+
## Solution
38+
39+
To ensure the Scheduler view updates correctly after changing the `minorTickCount`, use the following approach:
40+
41+
### Applying `minorTickCount` to a Specific View
42+
43+
If the `minorTickCount` is set per view, update the view configuration and refresh the view using the `.view()` method:
44+
45+
```javascript
46+
$("#scheduler").data("kendoScheduler").views["day"].minorTickCount = 5;
47+
$("#scheduler").data("kendoScheduler").view("day");
48+
```
49+
50+
### Applying `minorTickCount` to the Current View
51+
52+
To apply the change to the current view dynamically, retrieve the current view name and refresh it:
53+
54+
```javascript
55+
$("#scheduler").data("kendoScheduler").views[scheduler.viewName()].minorTickCount = 5;
56+
$("#scheduler").data("kendoScheduler").view(scheduler.viewName());
57+
```
58+
59+
### Example
60+
61+
```dojo
62+
<script src="../content/shared/js/schedulerTasks.js"></script>
63+
64+
<div id="example">
65+
<div id="scheduler"></div>
66+
<button id="updateMinorTickCountButton">Update minor tick count</button>
67+
</div>
68+
69+
<script id="event-template" type="text/x-kendo-template">
70+
<div class="template-container">
71+
# if (image != "") { #
72+
<img alt="Kendo UI for jQuery Scheduler #:title #" src="#= image #" style="height:25px; width: 25px;">
73+
# } #
74+
<h3 class="template-title-#= resources[0].value #">#: title #</h3>
75+
</div>
76+
</script>
77+
78+
<script>
79+
var sampleDataNextID = schedulerTasks.length + 1;
80+
81+
function getIndexById(id) {
82+
var idx,
83+
l = schedulerTasks.length;
84+
85+
for (var j = 0; j < l; j++) {
86+
if (schedulerTasks[j].id == id) {
87+
return j;
88+
}
89+
}
90+
return null;
91+
}
92+
93+
$(function () {
94+
var dataSource = new kendo.data.SchedulerDataSource({
95+
transport: {
96+
read: function (e) {
97+
e.success(schedulerTasks);
98+
},
99+
create: function (e) {
100+
e.data.id = sampleDataNextID++;
101+
schedulerTasks.push(e.data);
102+
e.success(e.data);
103+
},
104+
update: function (e) {
105+
schedulerTasks[getIndexById(e.data.id)] = e.data;
106+
e.success();
107+
},
108+
destroy: function (e) {
109+
schedulerTasks.splice(getIndexById(e.data.id), 1);
110+
e.success();
111+
},
112+
},
113+
error: function (e) {
114+
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
115+
},
116+
batch: false,
117+
schema: {
118+
model: {
119+
id: "id",
120+
fields: {
121+
id: { type: "number" },
122+
title: {
123+
field: "title",
124+
defaultValue: "No title",
125+
validation: { required: true },
126+
},
127+
start: { type: "date", field: "start" },
128+
end: { type: "date", field: "end" },
129+
description: { field: "description" },
130+
recurrenceRule: { from: "recurrenceRule" },
131+
recurrenceException: { from: "recurrenceException" },
132+
attendee: { field: "attendee", defaultValue: 1 },
133+
isAllDay: { type: "boolean", field: "isAllDay" },
134+
image: { from: "image", defaultValue: "" },
135+
},
136+
},
137+
},
138+
});
139+
140+
$("#scheduler").kendoScheduler({
141+
date: new Date("2020/10/4"),
142+
startTime: new Date("2020/10/4 7:00"),
143+
endTime: new Date("2020/10/4 20:00"),
144+
height: 600,
145+
views: [
146+
{ type: "day", minorTickCount: 2 },
147+
{ type: "week", selected: true },
148+
"workWeek",
149+
"month",
150+
"agenda",
151+
],
152+
timezone: "Etc/UTC",
153+
eventTemplate: $("#event-template").html(),
154+
dataSource: dataSource,
155+
resources: [
156+
{
157+
field: "attendee",
158+
dataSource: [
159+
{ text: "Jason", value: 1, color: "#eaf8ff" },
160+
{ text: "Maddie", value: 2, color: "#fdfdf4" },
161+
],
162+
},
163+
],
164+
});
165+
166+
$("#updateMinorTickCountButton").click(function () {
167+
const Scheduler = $("#scheduler").data("kendoScheduler");
168+
169+
alert(
170+
"current minor tick count " +
171+
Scheduler.options.views[0].minorTickCount,
172+
);
173+
174+
Scheduler.setOptions({
175+
views: [
176+
{ type: "day", minorTickCount: 5 },
177+
{ type: "week", selected: true },
178+
"workWeek",
179+
"month",
180+
"agenda",
181+
],
182+
});
183+
184+
alert(
185+
"current minor tick count " +
186+
Scheduler.options.views[0].minorTickCount,
187+
);
188+
189+
$("#scheduler").data("kendoScheduler").views["day"].minorTickCount =
190+
5;
191+
$("#scheduler").data("kendoScheduler").view(Scheduler.viewName());
192+
});
193+
});
194+
</script>
195+
196+
<style>
197+
.template-container {
198+
margin-top: -8px;
199+
}
200+
201+
.template-container img {
202+
float: left;
203+
margin: 0 4px;
204+
margin-right: 10px;
205+
}
206+
207+
.template-container h3 {
208+
padding: 0 4px 4px;
209+
font-size: 12px;
210+
font-weight: 400;
211+
margin-right: 14px;
212+
}
213+
214+
.template-title-1 {
215+
color: #65ccff;
216+
}
217+
218+
.template-title-2 {
219+
color: #d0d03b;
220+
}
221+
222+
.k-event .k-i-reload,
223+
.k-event .k-i-non-recurrence {
224+
display: none;
225+
}
226+
</style>
227+
```
228+
229+
## See Also
230+
231+
- [Scheduler Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler)
232+
- [Scheduler View Configuration](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views)
233+
- [Scheduler minorTickCount API](https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#configuration-views.minorTickCount)

0 commit comments

Comments
 (0)