This is a migrated thread and some comments may be shown as answers.

Remove events from Kendo UI Scheduler shown an error

2 Answers 94 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Lilan
Top achievements
Rank 2
Lilan asked on 10 Jun 2015, 07:24 AM

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

2 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 12 Jun 2015, 08:45 AM
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?

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


Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Lilan
Top achievements
Rank 2
answered on 17 Jun 2015, 09:56 AM

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

 

 

Tags
General Discussions
Asked by
Lilan
Top achievements
Rank 2
Answers by
Vladimir Iliev
Telerik team
Lilan
Top achievements
Rank 2
Share this question
or