Geek Answers Handbook

Kendo UI dataSource set using javascript object

Just started experimenting with the Kendo user interface, and I'm stuck with how you can use a standard javascript object to use as a data source.

It is easy enough to initially load data from a javascript object, but I want to be able to return data after the changes have occurred during user interaction.

It is preferable if this object is somehow synchronized with widgets, so all you need to do is read / write 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 you need to check the code setting (pay attention to debugging console.log to save):

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

How can I read / write "state" in the world of the Kendo interface?

+4
2

, DataSource. :

  • : dataSource.data()
  • : dataSource.at(1)
  • : datasource.view()
  • JS- : dataSource.data().toJSON()
+8

, dataSource JavaScript (_data), KendoUI DataSource ( a SchedulerDataSource), .

/ , , , .

_data, ShedulerDataSource, :

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"
        }
    }
});

, : http://jsfiddle.net/OnaBai/t23Ce/14/

+2

More articles:


All Articles