This is a migrated thread and some comments may be shown as answers.
Populate Scheduler from JavaScript
3 Answers 28 Views
This is a migrated thread and some comments may be shown as answers.
Gianni
Top achievements
Rank 1
Gianni asked on 13 Mar 2014, 12:16 AM
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" }]
                    }
                ],
            });

3 Answers, 1 is accepted

Sort by
0
Gianni
Top achievements
Rank 1
answered on 13 Mar 2014, 12:45 AM
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
0
Vladimir Iliev
Telerik team
answered on 14 Mar 2014, 07:08 AM
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:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Gianni
Top achievements
Rank 1
answered on 14 Mar 2014, 07:40 AM
Thank you a lot!
Asked by
Gianni
Top achievements
Rank 1
Answers by
Gianni
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Share this question
or