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

Remove events from Kendo UI Scheduler shown an error

12 Answers 156 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Lilan
Top achievements
Rank 2
Lilan asked on 11 Jun 2015, 07:47 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

 

 

 

12 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 15 Jun 2015, 07:41 AM
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
 
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 15 Jun 2015, 07:47 AM

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

0
Vladimir Iliev
Telerik team
answered on 15 Jun 2015, 10:53 AM
Hi Lilan,


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

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 16 Jun 2015, 04:41 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

 

 

0
Vladimir Iliev
Telerik team
answered on 18 Jun 2015, 07:30 AM
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:

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 18 Jun 2015, 07:49 AM

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

0
Vladimir Iliev
Telerik team
answered on 19 Jun 2015, 10:11 AM
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
 
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 22 Jun 2015, 06:19 AM

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

0
Vladimir Iliev
Telerik team
answered on 22 Jun 2015, 06:57 AM
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
 
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 22 Jun 2015, 07:18 AM

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

0
Accepted
Vladimir Iliev
Telerik team
answered on 24 Jun 2015, 07:27 AM
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
 
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 24 Jun 2015, 07:46 AM

Hello Vladimir , 

Thanks a lot for solving my all issues. 

 

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