Search code examples
javascriptkendo-uikendo-mobilekendo-scheduler

Kendo Scheduler Won't Take dataSource

I have a JSON array that looks something like this:

var mockArr = [ 
{activity: "That One Activity", due_date: "07/22/2016", address: "22 Jump Ln", id: "42"},
{activity: "That Other Activity", due_date: "07/25/2015", address: "123 Fake St", id: "43"}
];

and I'm trying to bind it to a kendo Scheduler widget, which is configured like this:

$("#scheduler").kendoScheduler({
            date: new Date(),
            height: 100,
            views: [
                {type: "day"},
                {type: "month", selected: true},
                {type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}"}
            ],
            mobile: "phone",
            timezone: "Etc/UTC",
            allDaySlot:true,
            editable: false,
            dataSource: {
                data: mockArr,
                schema: {
                    model: {
                        id: "taskId",
                        fields: {
                            taskId: { from: "id", type: "number" },
                            title: { from: "activity" },
                            start: { type: "date", from: "due_date" },
                            end: {type: "date", from: "due_date"},
                            description: { from: "address" }
                        }
                    }
                }
            }
    });

When I run the web applet the console spits out "TypeError: e is null", and I get a page that looks like this

But I get a working scheduler when I replace mockArr and the referencing model with a static SchedulerEvent such as:

var event = new kendo.data.SchedulerEvent({
    id: 1,
    title: "test event",
    start: new Date("2016/7/22"),
    end: new Date("2016/7/22")
});

Why doesn't the scheduler like my dataSource?

Solution

  • There are few reasons you are facing this issue.

    • The reason why page look like in the image you provided is because you specified height: 100 .Remove this line kendo framework handle it automatically and you can specify it later based on your need.
    • Your Json Array need to be formatted correctly. see the snippet in the code provided
    • The data Parameter in datasource expect a javascript object you need to parse it using this data:JSON.parse(mockArr),
    • I noticed that kendo does not allow to bind start/end parameter in the fields to same name like you used due_date so it need to be changed to
      start:{ type: "date", from: "due_date" }, end: { type: "date", from: "due_date1" },

    Other than this Your code work fine I have tested it.

    The console error "web applet the console spits out "TypeError: e is null" sounds to be specific to java , i assume you are using java and that might be related to java framework.

    Here is your live version of working code .

    Navigate to Kendo UI online Editor and delete the pre-populated code and paste the code snippet provided below.

    <!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/scheduler/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example">   
    <div id="scheduler"></div>
</div>

<script>

  var mockArr ='[{"activity":"That One Activity","due_date":"07/22/2016","due_date1":"07/22/2016","address":"22 Jump Ln","id":"42"},{"activity": "That Other Activity", "due_date": "07/25/2016","due_date1":"07/25/2016","address": "123 Fake St", "id": "43"}]';




$("#scheduler").kendoScheduler({
            date: new Date(),           
            views: [
                {type: "day"},
                {type: "month", selected: true},
                {type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}"}
            ],          

            allDaySlot:true,
            editable: true,
            dataSource: {
                data:JSON.parse(mockArr),
                schema: {
                    model: {
                        id: "taskId",
                        fields: {
                            taskId: { from: "id", type: "number" },
                            title: { from: "activity" },
                             start: { type: "date", from: "due_date" },
                             end: { type: "date", from: "due_date1" },
                            description: { from: "address" }
                        }
                    }
                }
            }
    });



</script>


</body>
</html>