Populate kendoScheduler timeline with data from server

Question

I'm using the Kendo UI scheduler with the timeline view and I need to populate the left column with data from my database. I'm struggling to understand how to do it.

The part I'm talking about is where in the demo appears:

resources: [{
    field: "roomId",
    name: "Rooms",
    dataSource: [{
        text: "Meeting Room 101",
        value: 1,
        color: "#6eb3fa"
    }, {
        text: "Meeting Room 201",
        value: 2,
        color: "#f58a8a"
    }],
    title: "Room"
}]

So instead of saying "meeting Room 101", I want it to load data from the server and the number of cells will vary, so the column will be dynamic.

Is this possible? Could someone point me to a good explanation on how to do it?

Answer 1

I don't know if the solution is still of interest to you, but intended for Google;)

You can use the Kendo DataSource:

var rooms = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/get/rooms",
            dataType: "json" 
    }
}

and then just assign the datasource

resources: [
            {
                field: "roomId",
                name: "Room",
                dataSource: rooms,
                title: "Room"
            }

Model (Example):

public class RoomResourcesModel
{
    public string text { get; set; }
    public int value { get; set; }
    public string color { get; set; }
}

Controller (Example):

public ActionResult Rooms()
{
    var model = new List<RoomResourcesModel>();
    model.Add(new RoomResourcesModel { text = "Room 1", value = "1", color = "#CD6600" });
    model.Add(new RoomResourcesModel { text = "Room 2", value = "2", color = "#FF3030" });
    model.Add(new RoomResourcesModel { text = "Room 3", value = "3", color = "#FFD700" });

    return Json(model, JsonRequestBehavior.AllowGet);
}