Remove events from Kendo UI Scheduler shown an error

[Lilan]

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

[Vladimir Iliev]

Hi Lilan,


I tried to reproduce the described behavior but to no avail - everything is working as expected on our side. Could you please modify the following example in rder to reproduce the issue and send it back to us?

• http://dojo.telerik.com/IroPu

Also please note that is required to define dataSource "schema.model" option when enabling CRUD operations:

• dataSource.schema.model

Regards,
Vladimir Iliev
Telerik

 

 

[Lilan]

Hello Vladimir,  

I tried to reproduce the error in Dojo and I implemented sample app almost same as my application. But it works fine in Dojo sample. Only error I could reproduce in Dojo is when the event is drag & drop and re sizing it moves but console shows following error. 

Uncaught TypeError: g.duration is not a function

But in my real application with above error following error shows same as when it removes events 

Uncaught TypeError: Cannot read property '$destroy' of undefined

Please find the hosted application and login details as below. 

User Name: suresh.chamara

Password:embla@123

 

Regards,

Lilan