Kendo-Grid with Angular

Question

Я немного новичок в Angular и пытаюсь научиться использовать сетку Kendo без jQuery с использованием Angular. Я получаю код jQuery, который используется для конфигурации виджета, написан в javascript, но я не получаю директивы HTML.

<kendo-grid options="mainGridOptions"> 

Что означает атрибут "options"? Я принимаю его атрибут, который имеет вид виджета кендо-сетки (как определено директивой)? Но когда я иду documentation, я не вижу его в раскрывающемся списке настроек полей?

Answer 1

Вы должны использовать k-options как это ...

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

... а затем на вашем области контроллера вы можете выставить свои параметры объекта, как это.

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

Это ссылка на объект опций.

В основе JQuery Кендо 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> 

... вы назначаете ему ссылку, позволяющую получить доступ к кенду виджета o в области контроллера.

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

Answer 2

Атрибут k-options может использоваться для хранения всей конфигурации виджета в контроллере. Этот атрибут может также использоваться в других компонентах кэндо, как планировщик, выбор даты и т.д.

Вот пример для кэндо DatePicker реализован с K-опциями атрибута:

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