CODEWITHSUNDEEP
javascriptkendo-ui
zaf
zaf

Reputation: 23244

Kendo UI dataSource get set using javascript object

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?

Upvotes: 4

Views: 16488

Answers (2)

Lars Höppner
Lars Höppner

Reputation: 18402

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()

Upvotes: 8

OnaBai
OnaBai

Reputation: 40887

Despite you initialize the dataSource from a JavaScript array (_data), KendoUI internally creates a DataSource (in your case a SchedulerDataSource) that only uses your array for loading the initial content.

If you need / want to keep using the array and reflect the changes in it, you would probably need to write some code for updating it.

If you can live with _data defined as a ShedulerDataSource, then you can try defining it as:

var _data = new kendo.data.SchedulerDataSource({
    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
    } ],
    schema: {
        model : {
            id : "eventID"
        }
    }
});

See it running here : http://jsfiddle.net/OnaBai/t23Ce/14/

Upvotes: 2

Related Questions