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

6 posts, 1 answers
  1. Matt Dufrasne
    Matt Dufrasne avatar
    23 posts
    Member since:
    Aug 2009

    Posted 23 Dec 2013 Link to this post

    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.
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 25 Dec 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Matt Dufrasne
    Matt Dufrasne avatar
    23 posts
    Member since:
    Aug 2009

    Posted 28 Dec 2013 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 31 Dec 2013 Link to this post

    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!
  6. Matt Dufrasne
    Matt Dufrasne avatar
    23 posts
    Member since:
    Aug 2009

    Posted 06 Jan 2014 Link to this post

    Your recommendation is correct but selecting the meeting and hitting the delete key still removes the event.
  7. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 07 Jan 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready