Edit this page

Persist All Changes with One Request

The following example demonstrates how to persist all changes with a single request in the Scheduler.

Example
<div id="example">

      <div id="scheduler"></div>
    </div>
    <script>
      var remoteDataSource;
      var scheduler;

      var created = [];
      var updated = [];
      var destroyed = [];

      $(function() {
        remoteDataSource = new kendo.data.SchedulerDataSource({
          batch: true,
          transport: {
            read: {
              url: "https://demos.telerik.com/kendo-ui/service/meetings",
              dataType: "jsonp"
            }
          }
        });

        remoteDataSource.one("change", function() {
          scheduler = initScheduler(this);
        })

        remoteDataSource.read();

      })

      function syncAllChanges() {
        var dataForSync = {};
        if (created.length) {
            dataForSync.created = created;
        }

        if (updated.length) {
            dataForSync.updated = updated;
        }

        if (destroyed.length) {
            dataForSync.destroyed = destroyed;
        }

        $.ajax({
          url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
          data: dataForSync,
          success: function (e) {
            destroyed = [];
            updated = [];
            created = [];
          }
        })

      }

      function initScheduler(remoteDataSource) {
        return $("#scheduler").kendoScheduler({
          date: new Date("2013/6/13"),
          startTime: new Date("2013/6/13 07:00 AM"),
          height: 600,
          views: [
            "day", {
              type: "week",
              selected: true
            },
            "month",
            "agenda"
          ],
          save: function() {
            setTimeout(function () {
              syncAllChanges();
            })
          },
          timezone: "Etc/UTC",
          dataSource: {
            batch: true,
            transport: {
              read: function(e) {
                var data = remoteDataSource.data().toJSON();
                e.success(data);
              },
              update: function(e) {
                var model = e.data.models[0];
                updated.push(model);

                e.success("");
              },
              create: function(e) {
                var model = e.data.models[0];
                created.push(model);

                //create fake id for new events - needs additional handling
                //the ID generation below is just for demo purposes, consider using kendo.guid() instead
                //for example:
                //1) after custom save to the server is completed to refresh the scheduler data.
                // or
                //2) after custom save is completed to manualy find the new records and update their ids.
                model.meetingID = Math.ceil(Math.random() * 1000);

                e.success([model]);
              },
              destroy: function(e) {
                var model = e.data.models[0];
                destroyed.push(model);

                e.success("");
              }
            },
            schema: {
              model: {
                id: "meetingID",
                fields: {
                  meetingID: {
                    from: "MeetingID",
                    type: "number"
                  },
                  title: {
                    from: "Title",
                    defaultValue: "No title",
                    validation: {
                      required: true
                    }
                  },
                  start: {
                    type: "date",
                    from: "Start"
                  },
                  end: {
                    type: "date",
                    from: "End"
                  },
                  startTimezone: {
                    from: "StartTimezone"
                  },
                  endTimezone: {
                    from: "EndTimezone"
                  },
                  description: {
                    from: "Description"
                  },
                  recurrenceId: {
                    from: "RecurrenceID"
                  },
                  recurrenceRule: {
                    from: "RecurrenceRule"
                  },
                  recurrenceException: {
                    from: "RecurrenceException"
                  },
                  roomId: {
                    from: "RoomID",
                    nullable: true
                  },
                  atendees: {
                    from: "Attendees",
                    nullable: true
                  },
                  isAllDay: {
                    type: "boolean",
                    from: "IsAllDay"
                  }
                }
              }
            }
          },
          resources: [{
            field: "roomId",
            dataSource: [{
              text: "Meeting Room 101",
              value: 1,
              color: "#6eb3fa"
            }, {
              text: "Meeting Room 201",
              value: 2,
              color: "#f58a8a"
            }],
            title: "Room"
          }, {
            field: "atendees",
            dataSource: [{
              text: "Alex",
              value: 1,
              color: "#f8a398"
            }, {
              text: "Bob",
              value: 2,
              color: "#51a0ed"
            }, {
              text: "Charlie",
              value: 3,
              color: "#56ca85"
            }],
            multiple: true,
            title: "Atendees"
          }]
        }).data("kendoScheduler");
      }

    </script>

See Also

Other articles and how-to examples on the Kendo UI Scheduler:

How-to examples on the Kendo UI Scheduler in AngularJS:

For more runnable examples on the Kendo UI Scheduler, browse its How To documentation folder.

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

Give article feedback

Tell us how we can improve this article

close
Dummy