带角度的Kendo-Grid

Question

我对Angular有些陌生，正在尝试学习如何在没有jQuery的情况下使用Angular来使用Kendo Grid。我得到的用于小部件配置的jQuery代码是用javascript编写的，但是我没有得到HTML指令。

<kendo-grid options="mainGridOptions">

"options“属性是什么意思？我假设它是kendo-grid (由指令定义)小部件具有的属性？但是当我打开documentation时，我没有在字段配置下拉列表中看到它吗？

Answer 1

您应该像这样使用k-options ...

<kendo-grid k-options="mainGridOptions"></kendo-grid>

..。然后在您的控制器作用域上，您可以这样公开您的options对象。

...    
$scope.mainGridOptions = {
   dataSource: {
      data: myData
   },
   height: 550
};
...

这就是引用options对象的方式。

在基于jQuery的Kendo UI中，它被传递到构造函数中，如下所示……

$('myGrid').kendoGrid({
   dataSource: {
      data: myData
   },
   height: 550
});

顺便说一句，大多数配置选项(如果不是所有配置选项)都可以直接在带有k-前缀的指令中使用。

例如..。

<kendo-grid
    k-data-source="myData"
    k-height="550"
></kendo-grid>

。。然后你只需要在控制器上暴露你的数据...

...
$scope.myData
...

另一个注意事项是，如果使用指令作为属性，如下所示...

<div kendo-grid="myGrid"
    k-data-source="myData"
    k-height="550"
></div>

..。您为它分配了一个引用，允许您在控制器的作用域中访问小部件的Kendo对象。

...
$scope.myGrid.resize();
...

Answer 2

属性k-options可用于在控制器中存储整个小部件配置。该属性也可以在其他Kendo组件中使用，如调度程序、日期选择器等。

下面是使用k-options属性实现的Kendo datepicker的示例：

<div ng-app="app" ng-controller="MyCtrl">
    <input kendo-date-picker k-options="monthPickerConfig">
</div>

<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
    $scope.monthPickerConfig = {
      start  : "year",
      depth  : "year",
      format : "MMMM yyyy"
    };
});
</script>