Edit this page

Retrieve Information on the Server before Saving Events

Environment

Product Progress Kendo UI Scheduler

Description

How can I perform a server check (validation) before a new or edited task or event is saved in the Kendo UI Scheduler?

Solution

  1. Handle the save event and prevent the default action.
  2. Send an AJAX request to the server.
  3. Depending on the response, manually save the task in the Scheduler.
    <div id="scheduler"></div>

    <script>
        $("#scheduler").kendoScheduler({
            date: new Date("2013/6/6"),
            views: [ "day", "month" ],
            dataSource: [{
                id: 1,
                start: new Date("2013/6/6 08:00 AM"),
                end: new Date("2013/6/6 09:00 AM"),
                title: "Interview"
            }],
            save: function(e) {
                e.preventDefault();

                var eventId = e.event.id;
                var dataSource = e.sender.dataSource;

                $.ajax({
                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: 'jsonp',
                    data: JSON.stringify(e.event),
                    success: function(response) {
                        // Perform the required check / validation.
                        // Depending on the response do or do not save the task / event
                        // In this case the check compares a random number to the returned response length
                        var randomNumber = Math.floor((Math.random() * 150) + 0);

                        if (response.length > randomNumber ) {
                            // Manually save the task / event
                            var dataItem = dataSource.get(eventId);

                            if (dataItem) {
                                dataItem = e.event;
                            } else {
                                dataSource.add(e.event);
                            }

                            dataSource.sync();
                        } else {
                            // Alert, that the validation has failed
                            alert('This change is not allowed!');
                        }
                    }
                });
            }
        });
    </script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy