CODEWITHSUNDEEP
kendo-uischedulerkendo-scheduler
user2215668
user2215668

Reputation: 1

Binding Data to Kendo ui Scheduler

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}]}]

Upvotes: 0

Views: 1526

Answers (1)

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

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.

Upvotes: 1

Related Questions