Hi,
I have kendo UI schedule where events have been set from a data source. when I remove events from the scheduler following error has shown in console.
Uncaught TypeError: Cannot read property
'$destroy'
of undefined
please find below scheduler configuration
$scope.schedulerTimeLineOptions = {
date:
new
Date(),
majorTick: 1440,
minorTickCount: 1,
editable: {
template: $(
"#editor"
).html(),
confirmation:
"Are you sure you want to delete this event?"
},
views: [
"timelineWeek"
,
{
type:
"timelineWeek"
,
selected:
true
,
dateHeaderTemplate:
"<span class='k-link k-nav-day'>#=kendo.toString(date, ' dd/M ddd')#</span>"
},
],
edit: schedulerDialyCalendarTimeLine_edit,
add: schedulerDialyCalendarTimeLine_add,
save: schedulerDialyCalendarTimeLine_save,
remove: schedulerDialyCalendarTimeLine_remove,
timezone:
"Etc/UTC"
,
dataBound:
function
(e) {
var
view =
this
.view();
if
(view.name.indexOf(
"timeline"
) > -1) {
view.datesHeader.find(
"tr:last"
).prev().hide();
view.timesHeader.find(
"tr:last"
).prev().hide();
};
var
scheduler =
this
;
view.table.find(
"td[role=gridcell]"
).each(
function
() {
var
element = $(
this
);
var
slot = scheduler.slotByElement(element);
if
(slot.startDate.getDay() == 0) {
element.removeClass(
"k-nonwork-hour"
);
element.addClass(
"scheduler-sunday"
);
}
else
if
(slot.startDate.getDay() == 6) {
element.removeClass(
"k-nonwork-hour"
);
element.addClass(
"scheduler-saturday"
);
}
});
},
eventTemplate:
"<div class='k-event-template'>#if (data.image) {# <img src='#= image #'>#}# #= title #</div>"
,
group: {
resources: [
"Priests"
],
orientation:
"vertical"
},
resources: [
{
field:
"priest"
,
name:
"Priests"
,
dataSource: $filter(
'orderBy'
)($scope.ActivePriestList,
'OrderIndex'
),
multiple:
true
,
title:
"Priests"
},
{
field:
"color"
,
dataColorField:
"color"
,
dataValueField:
"color"
,
dataSource: $scope.ActiveLabelList.concat($scope.MedarbeiderenLabelList)
}
],
navigate:
function
(e) {
$scope.schedulerTimeLine_navigate(e, {
Id: newValue,
PriestList: $scope.ActivePriestList
});
}
};
Events have been added as below
angular.forEach(resp.WorkPlanElements,
function
(WorkPlanElement) {
angular.forEach(cacheData.get(
'AllLabels'
),
function
(Label) {
if
(Label.Id===WorkPlanElement.LabelId){
var
WorkPlanElementItem={
Id:WorkPlanElement.Id,
image :
""
,
priest: WorkPlanElement.PriestId,
start:
new
Date(DateUtilsService.JSONdateToString_yyyyMMdd(WorkPlanElement.Start)),
end:
new
Date(DateUtilsService.JSONdateToString_yyyyMMdd(WorkPlanElement.End)),
title:Label.Name,
isAllDay:
true
,
color:
"#"
+ Label.ColorCode.substr( 3, Label.ColorCode.length),
colorItem:{
Id:Label.Id,
name:Label.Name,
hex:
"#"
+ Label.ColorCode.substr( 3, Label.ColorCode.length)
},
state:
"Planned"
,
duration:DateUtilsService.dateDiff(WorkPlanElement.Start, WorkPlanElement.End),
comment:WorkPlanElement.Comment
};
WorkPlanElementList.push(WorkPlanElementItem);
};
});
});
var
scheduler = $(
"#schedulerTimeLine"
).data(
"kendoScheduler"
);
var
dataSource =
new
kendo.data.SchedulerDataSource({
data: WorkPlanElementList
});
if
(!angular.isUndefined(scheduler)){
scheduler.setDataSource(dataSource);
$scope.CurrentElements = WorkPlanElementList;
};
please help...!!!
Thanks
Lilan