Populate Scheduler from JavaScript

[Gianni]

Hi verybody.

I'd like to show a scheduler with fixed data from a JavaScript function.
I tried with this code, but I can only see the scheduler with the circular progress bar that runs forever.

// Defining the dataSource
var schedulerDataSource = new kendo.data.SchedulerDataSource({
            transport: {
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        id: { from: "Id" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "StartDate" },
                        end: { type: "date", from: "EndDate" },
                        description: { from: "Description" },
                        calendarId: { from: "CalendarId", validation: { required: true } },
                        isAllDay: { type: "boolean", from: "IsAllDay" }
                    }
                }
            },
            filter: {
                logic: "or",
                filters: []
            }
        });

// Pass data to the DataSource
schedulerDataSource.data = [{"CalendarId":"FirstCalendar","Id":"Id1","Title":"Test","Description":null,"IsAllDay":true,"StartDate":new Date(1318802400000),"EndDate":new Date(1319320800000)},{"CalendarId":"SecondCalendar","Id":"Id2","Title":"Second event","Description":null,"IsAllDay":true,"StartDate":new Date(1319407200000),"EndDate":new Date(1319493600000)}];

// Pass filters to the datasources
schedulerDataSource.filter.filters = [ { field: "CalendarId", operator: "eq", value: "FirstCalendar" },{ field: "CalendarId", operator: "eq", value: "SecondCalendar" }];

// Create the scheduler
$("#scheduler").kendoScheduler({
                date: new Date("2014/03/13"),
                startTime: new Date("2014/03/13 00:00 AM"),
                height: $(document).height() - 30,
                views: [
                    "day",
                    { type: "workWeek", selected: true },
                    "week",
                    "month",
                    "agenda"
                ],
                save: scheduler_save,
                remove: scheduler_remove,
                edit: scheduler_edit,
                timezone: "Etc/UTC",
                dataSource: schedulerDataSource,
                resources: [
                    {
                        field: "CalendarId",
                        title: "Calendar",
                        dataSource: [ { text: "My first calendar", value: "FirstCalendar", color: "#9fc6e7" },{ text: "My second calendar", value: "SecondCalendar", color: "#7bd148" }]
                    }
                ],
            });

[Gianni]

I made lots of tries with Chrome debuggers and founds the two problems:

1 - Data has to set in schedulerDataSource.transport.data instead of schedulerDataSource.data
2 - Since I pass data by javascript, I haven't to define the parameterMap

[Vladimir Iliev]

Hi Gianni,

After checking the provided code it seems that the scheduler is not working due to the following invalid configurations:

• There is no "data" property of the dataSource - most probably you are referring to the "data" method?
• When you pass data directly to the dataSource it should be in the same format as defined in the schema (data is parsed only when it's comes from the transport requests) - that why the data passed is not correctly formatted.
• If you need the dataSource to parse the data that you are passing then you should define transport.read as function (example included below)
• There is no "filters" property of the dataSource - are you referring to the filter method?

After fixing the above issues the scheduler start working as expected - please check it as runable example below:

• http://trykendoui.telerik.com/OCEq

Regards,
Vladimir Iliev
Telerik

 

 

[Gianni]

Thank you a lot!