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

How can I prevent/cancel delete key presses from the scheduler control?

5 Answers 445 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Matt Dufrasne
Top achievements
Rank 1
Matt Dufrasne asked on 24 Dec 2013, 01:39 AM
How can I prevent/cancel delete key presses from the scheduler control?
I've gone all over the API, but I can't find a way to intercept the delete key and prevent the default.

5 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 25 Dec 2013, 01:05 PM
Hello Matt,

Do you want to prevent users from deleting events? If so, you can set the editable.destroy configuration option to false. If this is not what you are looking for, please clarify.

Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt Dufrasne
Top achievements
Rank 1
answered on 28 Dec 2013, 08:19 PM
I have this code
001.window.scheduler = $('#scheduler').kendoScheduler({
002.    allDaySlot: true,
003.    selectable: true,
004.    editable: {
005.        confirmation: false,
006.        resize: false,
007.        move: false,
008.        destroy: false,
009.        update: false,
010.        template: $(reservationEditorTemplate).html()
011.    },
012.    views: [
013.        {
014.            type: "week",
015.            selected: true
016.        },
017.        {
018.            type: "agenda",
019.            eventTemplate: $(reservationAgendaTemplate).html()
020.        }
021.    ],
022.    allDayEventTemplate: $(allDayReservationTemplate).html(),
023.    eventTemplate: $(reservationTemplate).html(),
024.    cancel: onReservationCancel,
025.    edit: onReservationEdit,
026.    save: onReservationSave,
027.    add: onReservationAdd,
028.    remove: onReservationRemove,
029.    dataSource: {
030.        batch: true,
031.        serverFiltering: true,
032.        error: function (e) {
033.            console.log(e);
034.        },
035.        transport: {
036.            read: {
037.                url: "/ws/SchedulerService.svc/read",
038.                dataType: "json"
039.            },
040.            update: {
041.                url: "/ws/SchedulerService.svc/update",
042.                type: "POST",
043.                contentType: "application/json"
044.            },
045.            create: {
046.                url: "/ws/SchedulerService.svc/create",
047.                type: "POST",
048.                contentType: "application/json"
049.            },
050.            destroy: {
051.                url: "/ws/SchedulerService.svc/destroy",
052.                dataType: "json"
053.            },
054.            parameterMap: function (options, operation) {
055.                var _view = $('#scheduler').data('kendoScheduler').view();
056. 
057.                if (operation === "read")
058.                    return {
059.                        eIds: JSON.stringify(viewModel.getFiltereIds()),
060.                        startDate: JSON.stringify(_view.startDate()),
061.                        endDate: JSON.stringify(_view.endDate())
062.                    };
063. 
064.                else if (operation === "destroy")
065.                    return {
066.                        reservationGuid: currentReservation.data.ReservationGuid
067.                    };
068. 
069.                console.log(options);
070. 
071.                // This is a hack to get the post data but it's functional
072.                return JSON.stringify({ reservation: JSON.stringify(currentReservation.data) });
073.            }
074.        },
075.        schema: {
076.            data: function (response) {
077.                return $.parseJSON(response);
078.            },
079.            model: {
080.                id: "reservationGuid",
081.                createdBy: "createdByGuid",
082.                fields: {
083.                    reservationGuid: { from: "ReservationGuid", type: "string" },
084.                    eId: { from: "eId", type: "number" },
085.                    start: { type: "date", from: "StartDate" },
086.                    end: { type: "date", from: "EndDate" },
087.                    recurrenceId: { from: "RecurrenceID" },
088.                    recurrenceRule: { from: "RecurrenceRule" },
089.                    recurrenceException: { from: "RecurrenceException" }
090.                }
091.            }
092.        }
093.    },
094.    resources: [
095.        {
096.            field: "eId",
097.            dataValueField: "Id",
098.            dataTextField: "Name",
099.            dataColorField: "ColorKey",
100.            title: "E",
101.            dataSource: getEs()
102.        }
103.    ],
104.    dataBinding: function () {
105.        console.log('dataBinding');
106.    },
107.    dataBound: function () {
108.        console.log('dataBound');
109.    }
110.});
but the delete key is still being observed.
I load a reservation template with a delete button but I don't want anyone to be able to delete from the calendar itself.
I want the appointment template loaded and the appointment to be deleted from there.

I tried 2013.2.918 and 2013.3.1119
0
Dimo
Telerik team
answered on 31 Dec 2013, 12:32 PM
Hi Matt,

In case you want to prevent the Delete button (icon) from appearing inside the events on hover, you can use CSS:

#scheduler .k-event .k-event-delete,
#scheduler tr > td > .k-task .k-event-delete
{
   display: none;
}

The second line applies to the Agenda view.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt Dufrasne
Top achievements
Rank 1
answered on 07 Jan 2014, 01:44 AM
Your recommendation is correct but selecting the meeting and hitting the delete key still removes the event.
0
Accepted
Dimo
Telerik team
answered on 07 Jan 2014, 09:03 AM
Hi Matt,

One option is to disable selection (keyboard navigation).

http://docs.kendoui.com/api/web/scheduler#configuration-selectable

Another approach would be to hack the Scheduler's prototype and prevent the execution of the internal keydown handler if DEL is pressed:


$(function () {
 
    var oldKeyDown = kendo.ui.Scheduler.fn._keydown;
 
    kendo.ui.Scheduler.fn._keydown = function(e) {
        if (e.keyCode != kendo.keys.DELETE) {
            oldKeyDown.call(this, e);
        }
    }
 
    $("#scheduler").kendoScheduler({ /* ... */ });
 
});


Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Scheduler
Asked by
Matt Dufrasne
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Matt Dufrasne
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or