Kendo UI dataSource get set using javascript object

Question

Just started experimenting with Kendo UI and I'm stuck with how one can use a standard javascript object to use as the datasource.

It's easy enough to initially load the data from the javascript object but I want to be able to get the data back after changes have occurred through user interaction.

Preferably, if this object is somehow synced with the widget, so all one has to do is read/write to this javascript object.

Our data:

var _data = [
{
    eventID: 8,
    title: "Group meeting.",
    start: new Date("2013/06/13 07:00"),
    end: new Date("2013/06/13 08:30"),
    pending:false,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Take my brother to his group meeting.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
},{
    eventID: 9,
    title: "Make dinner.",
    start: new Date("2013/06/13 11:00"),
    end: new Date("2013/06/13 13:30"),
    pending:true,
    recurrenceRule: "",
    recurrenceException: "",
    description: "Make dinner for my mom.",
    isAllDay:false,
    ownTimeSlot:true,
    careAssistantId: 5,
    clientId: 6
} ];

Init widget:

function save(){
   console.log(_data);    
}

$('.schedule').kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
        views: [ { type: "week", selected: true }],
        save: save,
        dataSource:_data
});

Here is the code setup to be tested (note the console.log debug on save):

http://jsfiddle.net/t23Ce/11/

How is one supposed to read/write the 'state' in the Kendo UI world?

Answer 1

A simple array cannot provide change tracking, so it is converted to a DataSource when you create your widget. You can access the current state of your data in various ways:

1. get an array to iterate over all data: dataSource.data()
2. access a specific item: dataSource.at(1)
3. get filtered data: datasource.view()
4. get a pure JS array back: dataSource.data().toJSON()