AngularJS Databind odata to kendoui图

时间:2014-08-05 13:59:21

标签: angularjs kendo-ui

我正在尝试将ASP.NET web api odata v3数据绑定到kendoui图控件。它适用于本地数据源,但在尝试使用odata时出现错误

错误:

  

未捕获的TypeError:无法读取未定义的属性“__count”

HTML

<div kendo-diagram="diagram" k-options="options" />

AngularJS

 $scope.options = {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: {
                            url: "odata/Entities",
                            dataType: "json",
                            type: "GET"
                        }
                    }
                },              
                shapeDefaults: {
                    visual: visualTemplate 
                },
                layout: {
                    type: "tree"
                },
                schema: {    
                    data: "value"                                        
                }
            };



function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;

            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                },
                fill:  "green" 
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.Name, 
                x: 85,
                y: 20,
                color: "#fff"
            }));

            return g;
        }

JSON

{
  "odata.metadata":"http://localhost/TestSPA/odata/$metadata#Entities","odata.count":"5","value":[
    {
      "EntityRef":7,"Name":"Test"
    }
  ]
}

2 个答案:

答案 0 :(得分:2)

看起来异常来自这样一个事实:来自服务器的总变量不再位于名为 __ count 的字段中。

我怀疑在较新版本的协议中以不同的方式调用它。因此,您可能需要明确指定它(通过 schema.total ),与显示here的方式非常相似。

       schema: {
          total: function (e) {
              return Number(e["odata.count"]);
          },

答案 1 :(得分:2)

对于有相同问题的任何人:应在数据源上声明架构。

$scope.options = {
                dataSource: {
                    type: "odata",
                    transport: {
                        read: {
                            url: "odata/Entities",
                            dataType: "json",
                            type: "GET"
                        }
                    }, schema: {
                         data: function (data) {
                               return data.value;
                         },
                         total: function (data) {
                                return data['odata.count'];
                         }
                    }
                },              
                shapeDefaults: {
                    visual: visualTemplate 
                },
                layout: {
                    type: "tree"
                }

            };