Hi ! I am learning and working with Kendo UI Scheduler. In above scheduler i am using template to show in every event (modal popup) an image, start date, end date, and title. When i want to create a new event and click on scheduler , the previous events make hidden or dropped.
How can i fix this error or bug /
p.s: when i remove the image element by template, i can create new events succesfully.
Thanks in advance!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"
<script>
</script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler">
<div id="people">
<input checked type="checkbox" id="alex" value="1">
<input checked type="checkbox" id="bob" value="2">
<input type="checkbox" id="charlie" value="3">
</div>
</div>
</div>
<script id="event-template" type="text/x-kendo-template">
<div class="movie-template">
<img src="#= image #" style="width:50px; height:50px">
<p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
<h3>#: title #</h3>
</div>
</script>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
allDaySlot: false,
views: ["day","week","month","agenda"],
eventTemplate: $("#event-template").html(),
dataSource: {
data: [
{
meetingID: 1,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
title: "Call Charlie about the project",
start: new Date("2013/6/13 10:30"),
end: new Date("2013/6/13 11:30"),
ownerId:2
},
{
meetingID: 2,
image: "http://www.eccourts.org/wp-content/themes/ECCOURTS/template/Delete-icon.png",
title: "Performance review",
start: new Date("2013/6/13 9:00"),
end: new Date("2013/6/13 12:30"),
ownerId:1
},
{
meetingID: 3,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
title: "HR Lecture",
start: new Date("2013/6/13 13:00"),
end: new Date("2013/6/13 14:30"),
ownerId:2
}
],
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { type: "number" },
title: { defaultValue: "No title", validation: { required: true } },
start: { type: "date" },
end: { type: "date" },
ownerId: { defaultValue: 1 },
isAllDay: { type: "boolean" }
}
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
},
resources: [
{
field: "ownerId",
name: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});
</script>
<style scoped>
.invalid-slot {
background: red !important;
cursor: no-drop;
}
.movie-template img {
float: left;
margin: 0 8px;
}
.movie-template p {
margin: 5px 0 0;
}
.movie-template h3 {
padding: 0 8px 5px;
font-size: 12px;
}
.movie-template a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.k-state-hover .movie-template a,
.movie-template a:hover {
color: #000000;
}
.k-nav-current > .k-link span + span {
max-width: 200px;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: top;
}
#team-schedule {
background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}
</style>
</body>
</html>
How can i fix this error or bug /
p.s: when i remove the image element by template, i can create new events succesfully.
Thanks in advance!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"
<script>
</script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler">
<div id="people">
<input checked type="checkbox" id="alex" value="1">
<input checked type="checkbox" id="bob" value="2">
<input type="checkbox" id="charlie" value="3">
</div>
</div>
</div>
<script id="event-template" type="text/x-kendo-template">
<div class="movie-template">
<img src="#= image #" style="width:50px; height:50px">
<p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
<h3>#: title #</h3>
</div>
</script>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
allDaySlot: false,
views: ["day","week","month","agenda"],
eventTemplate: $("#event-template").html(),
dataSource: {
data: [
{
meetingID: 1,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
title: "Call Charlie about the project",
start: new Date("2013/6/13 10:30"),
end: new Date("2013/6/13 11:30"),
ownerId:2
},
{
meetingID: 2,
image: "http://www.eccourts.org/wp-content/themes/ECCOURTS/template/Delete-icon.png",
title: "Performance review",
start: new Date("2013/6/13 9:00"),
end: new Date("2013/6/13 12:30"),
ownerId:1
},
{
meetingID: 3,
image: "https://taskworkshop.com/static/img/taskWorkshopIcon.jpg",
title: "HR Lecture",
start: new Date("2013/6/13 13:00"),
end: new Date("2013/6/13 14:30"),
ownerId:2
}
],
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { type: "number" },
title: { defaultValue: "No title", validation: { required: true } },
start: { type: "date" },
end: { type: "date" },
ownerId: { defaultValue: 1 },
isAllDay: { type: "boolean" }
}
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
},
resources: [
{
field: "ownerId",
name: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});
</script>
<style scoped>
.invalid-slot {
background: red !important;
cursor: no-drop;
}
.movie-template img {
float: left;
margin: 0 8px;
}
.movie-template p {
margin: 5px 0 0;
}
.movie-template h3 {
padding: 0 8px 5px;
font-size: 12px;
}
.movie-template a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.k-state-hover .movie-template a,
.movie-template a:hover {
color: #000000;
}
.k-nav-current > .k-link span + span {
max-width: 200px;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: top;
}
#team-schedule {
background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}
</style>
</body>
</html>
1 Answer, 1 is accepted
0
Hi gridi,
Looking at the code you have provided, I suspect that the issue you have described is caused by a JavaScript error when executing the template for the new item. As there is no default value set for the image field of the event, such field is not created when constructing the new event instance. Therefore, accessing it within the template will yield an error. Defining the field in question in the model field definition should resolve the issue you are facing.
Regards,
Rosen
Telerik
Looking at the code you have provided, I suspect that the issue you have described is caused by a JavaScript error when executing the template for the new item. As there is no default value set for the image field of the event, such field is not created when constructing the new event instance. Therefore, accessing it within the template will yield an error. Defining the field in question in the model field definition should resolve the issue you are facing.
schema: { model: { id: "meetingID", fields: { /*the rest of the field definition*/ image: { defaultValue: "" } // this could be a common default image instead } }}Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!