Retrieve Information on the Server before Saving Events

Environment

Product

Progress® Kendo UI® Scheduler for jQuery

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

• API Reference of the Scheduler