Kendo Scheduler with Remote Data Source

Kendo Scheduler with Remote Data Source

Ok so lately I been spending heaps of time try to get Kendo Scheduler working. The documentation is all over the places but one good documentation link I found that seem to be helpful is in http://docs.telerik.com/kendo-ui/api/javascript/ui

So some of things I learnt trying to make Kendo Scheduler work using remote data source:-

  • load the appropriate kendo scripts
  • u can activate the remote read using @Url.Action( “actioname”, “controller”) or using ajax show below.
  • at minmum for read to work u need datasource for read as well as the schema.
  • for schema –> model, u need to identify the id, also the other fields are specific to kendo scheduler .. and they are case sensitive eg title, start, end, recurrenceRule, recurrenceException, isAllDay –> If u have the title as Title the schedule won’t render on view
    • title: { from: “JobName”, validation: { required: true } },
      start: { type: “date”, from: “StartDate” },
      end: { type: “date”, from: “EndDate” },
      recurrenceRule: { from: “RecurrenceRule” },
      recurrenceException: { from: “RecurrenceException” },
      isAllDay: { from: “IsAllDay” },
    • Note the item on the Right .. from “JobName, from StartDate is what the model on the server end is define. For data binding to happen this must be exact same as your server model. So for example above u have a model with JobName, StartDate, EndDate, RecurrenceRule, RecuurenceException, isAllDay
  • Lastly but not the least, Note the bracket for Datasource, the transport {} is on different {} than the schema. Spend hours trying to figure this out, late by comparing this with a work version that datasource bracket is very important. If u have schema in the same bracket {} has the transport the scheduler won’t render.

Ok so  below is working scheduler that read from a remote source:-

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js">

<div id="scheduler"></div>
<script>

 

var schedulerDataSource = new kendo.data.SchedulerDataSource({
batch: true,
transport: {
read: {    url: "@Url.Action("GetScheduledJobs", "Scheduler")",

                 dataType: "json"
}

// below is another way of send the data using ajax
//read: function(options) {
// $.ajax({
// type: "POST",
// url: "/Scheduler/GetScheduledJobs",
// data: $.toJSON(calendarSelectionObj),
// contentType: "application/json; charset=utf-8",
// dataType: "json",
// success: function (result) {
// options.success(result);
// }
// });
//}
},
schema: {
model: {
id: "idJack",
fields: {
idJack: { from: "JobId", type: "number" },
title: { from: "JobName", validation: { required: true } },
start: { type: "date", from: "StartDate" },
end: { type: "date", from: "EndDate" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
isAllDay: { from: "IsAllDay" },
PrimaryStaffId: { from: "PrimaryStaffId" }
}
}
}
});

 

var today = new Date();
today.setHours(7); //start from 7am
today.setMinutes(0);

$("#scheduler").kendoScheduler({
date: today,
dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/MM')#</span>",
startTime: today,
height: 800,
views: [
"day",
"workWeek",
{ type: "week", selected: true },
"month",
"agenda"
],
//timezone: "NZ",
edit: scheduler_edit,
remove: scheduler_remove,
add: scheduler_add,
moveEnd: scheduler_moveEnd,
resizeEnd: scheduler_resizeEnd,
navigate: scheduler_navigate,
dataSource : schedulerDataSource

});

 

Leave a Reply

Your email address will not be published. Required fields are marked *