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 already answered to this query in duplicated forum post created by you - #942915. Please keep in mind that it is highly recommended that you keep related questions in one support thread or a forum post, so that we can easily keep track of your support history and provide better answers in a shorter time.

Regards,
Vladimir Iliev
Telerik

 

 

[Lilan]

Hi Vladimir, 

I am sorry, this is the only one thread shows in my forum post list and I don't see any other post. also there is not answer for this post as well. 

If you have answered please send me the link. 

Thanks in advance 

Regards, 

Lilan

[Vladimir Iliev]

Hi Lilan,


Please check the direct link to the duplicated forum post below:

• http://www.telerik.com/forums/remove-events-from-kendo-ui-scheduler-shown-an-error-221533b6ba59

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

 

 

[Vladimir Iliev]

Hello Lilan,

After inspecting the page it appears that the error is thrown when the scheduler tries to access the angular scope (the error actually says that the scope is undefined). From the provided information it's not clear for us what is the exact reason for this behavior - however I would ask you to follow the points below as you are using too old version of Kendo UI and it's angular support:

• Upgrade Kendo UI to the latest official release - 2015 Q1 SP2 (v.2015.1.429)
• Upgrade the AngularJS to the v.1.3.16 (included in the above package)
• Remove the "angular-kendo.js" script as it's deprecated - the KendoUI angular support is now included in "kendo.all.min.js"
• Include the major scripts in the following order - jQuery, Angular, Kendo: 

  <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.429/js/angular.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>

Regards,
Vladimir Iliev
Telerik

 

 

[Lilan]

Hi Vladimir, 

 Thanks a lot and it solved most of my issues. but still It shows me below issue when I drag and drop an event.  

Uncaught TypeError: g.duration is not a function 

This error is already there in the Dojo sample. 

Thanks, 

Lilan

[Vladimir Iliev]

Hi Lilan,

I tried to reproduce the described issue but to no avail - everything is working as expected as seen in this screencast. Could you please record a small screencast to demonstrate the exact steps needed in order to reproduce the issue on our side? Also please provide more information about the exact browser and version that you are using. 

Regards,
Vladimir Iliev
Telerik

 

 

[Lilan]

Hi Vladimir, 

 Please follow below steps to reproduce the error. 

1. Run the sample application in google chrome. 

2. Press  Ctrl + Shift + I to get developer tools and select console. 

3. Click on the Add Event button below the scheduler. 

4. Drag and Drop an event to different date and check the console error. 

Regards, 

Lilan

[Vladimir Iliev]

Hello Lilan,

After investigating the described behavior it appears that the reason for current behavior is the "duration" field in the current scheduler data  - please note that the "SchedulerEvent" class have method with the same name that returns the actual duration of the events (and it's currently overridden by the corresponding field in the data). That why you should rename this field in order to be able to bind the data to the scheduler correctly.

Regards,
Vladimir Iliev
Telerik

 

 

[Lilan]

Hello Vladimir , 

I have changed the event duration as you said and now it gives below issue. Please check the sample application. 

Uncaught TypeError: Cannot read property 'color' of undefined

Regards, 

Lilan

[Vladimir Iliev]

Hello Lilan,

The error is thrown as the tooltip is shown for the drag hint as well. That why you should improve your current tooltip selector to skip the drag hint as demonstrated below:

<div kendo-tooltip k-content="theContent" k-filter="'.k-event:not(.k-event-drag-hint)'" class="k-group">

Regards,
Vladimir Iliev
Telerik

 

 

[Lilan]

Hello Vladimir , 

Thanks a lot for solving my all issues. 

 

Regards, 

Lilan