Binding Data to Kendo ui Scheduler - kendo-ui

Question

I've managed to get the Kendo UI scheduler to work as far as adding resources creating new events and saving new events. However I'm unable to get data from an asp.net web api and display it. Can someone provide an example of how to bind it to the following data:
[{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":7,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"sdfsdf","Description":"","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":8,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"Test","Description":"Thee","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":9,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"yrtyr","Description":"dfg","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null},{"Name":"Jim Smith","ID":3,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1},{"ID":3,"Description":"Vacuum 26","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":10,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"","Description":"","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1},{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":11,"StartDateTime":"2014-04-14T11:30:00","EndDateTime":"2014-04-14T12:00:00","Title":"fgdfg","Description":"dfg","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3},{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":1008,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"sdfsd","Description":"sdf","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1},{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3}]},{"Client":{"ID":1,"Name":"Ford Motor Company","IsActive":true,"DisplayColor":null},"ID":1009,"StartDateTime":"2014-04-14T11:00:00","EndDateTime":"2014-04-14T11:30:00","Title":"sdfsd","Description":"sdf","IsAllDay":false,"Resources":[{"Name":"Eric Longsdorf","ID":1,"IsActive":true,"PhoneNumber":null}],"EquipmentItems":[{"ID":2,"Description":"Truck # 2","IsActive":true,"Status":3},{"ID":1,"Description":"Truck # 1","IsActive":true,"Status":1}]}]

Answer 1

Please try with the below code snippet.
<div id="scheduler">
</div>
<script>
var test = '[{ "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 7, "StartDateTime": "2014-04-15T11:00:00", "EndDateTime": "2014-04-15T11:30:00", "Title": "First Meeting", "Description": "", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 8, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "Test", "Description": "Thee", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 9, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "yrtyr", "Description": "dfg", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null }, { "Name": "Jim Smith", "ID": 3, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1 }, { "ID": 3, "Description": "Vacuum 26", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 10, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "", "Description": "", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1 }, { "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 11, "StartDateTime": "2014-04-14T11:30:00", "EndDateTime": "2014-04-14T12:00:00", "Title": "fgdfg", "Description": "dfg", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3 }, { "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 1008, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "sdfsd", "Description": "sdf", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1 }, { "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3}] }, { "Client": { "ID": 1, "Name": "Ford Motor Company", "IsActive": true, "DisplayColor": null }, "ID": 1009, "StartDateTime": "2014-04-14T11:00:00", "EndDateTime": "2014-04-14T11:30:00", "Title": "sdfsd", "Description": "sdf", "IsAllDay": false, "Resources": [{ "Name": "Eric Longsdorf", "ID": 1, "IsActive": true, "PhoneNumber": null}], "EquipmentItems": [{ "ID": 2, "Description": "Truck # 2", "IsActive": true, "Status": 3 }, { "ID": 1, "Description": "Truck # 1", "IsActive": true, "Status": 1}]}]';
$(function () {
$("#scheduler").kendoScheduler({
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda"
],
timezone: "Etc/UTC",
dataSource: {
data: eval(test),
schema: {
model: {
id: "ID",
fields: {
taskId: { from: "ID", type: "number" },
title: { from: "Title" },
start: { type: "date", from: "StartDateTime" },
end: { type: "date", from: "EndDateTime" },
//startTimezone: { from: "StartTimezone" },
//endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
//recurrenceId: { from: "RecurrenceID" },
//recurrenceRule: { from: "RecurrenceRule" },
//recurrenceException: { from: "RecurrenceException" },
//ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
}
});
});
</script>
Demo
Let me know if any concern.