2016-07-22 49 views
1

我有一个JSON数组,它看起来是这样的:剑道计划不会采取数据源

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

,我试图将其绑定到一个剑道调度部件,其配置是这样的:

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

当我运行Web小型应用程序控制台吐出“类型错误:e是空”,我也得到a page that looks like this

但我得到一个工作调度,当我更换mockArr和使用一个静态的SchedulerEvent引用模型,如:

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

为什么调度器不像我的dataSource?

回答

2

您遇到此问题的原因很少。

  • 为什么页面看起来就像图像中的你提供的是因为你指定的高度的原因:100卸下摆臂此行剑道框架自动处理它,你可以指定它以后根据您的需要。
  • 你的Json数组需要格式化正确。看到代码片断提供
  • 在数据源中的数据参数指望你需要使用这个数据来分析它的JavaScript对象:JSON.parse(mockArr)
  • 我注意到,剑道不允许绑定启动/结束参数在相同的名称像你使用due_date所以它需要改变为
    start:{type:“date”,from:“due_date”}, end:{type:“date”,from :“due_date1”},

除了这个你的代码工作正常我已经测试过它。

控制台错误“Web小型应用程序控制台吐出‘类型错误:e是空’的声音是特定于Java,我假设你正在使用Java,并且可能与Java框架

下面是。您的真人版工作代码的。

导航到Kendo UI online Editor并删除预填充代码并将其粘贴下面的代码片段提供。

<!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>