Kendo-Grid with Angular

0
votes

I am somewhat new to Angular and trying to learn how to use Kendo Grid without jQuery using Angular. I get the jQuery code that is used for the widget configuration is written in javascript but i am not getting the HTML directives.

<kendo-grid options="mainGridOptions">

What does "options" attribute mean ? I am assuming its an attribute that the kendo-grid (as defined by the directive) widget has ? But when i go the documentation, I don't see it in the configuration of fields drop-down ?

2
kendo-uikendo-grid

2 Answers

0
votes

You should use k-options like this...

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

... and then on your controller scope you can expose your options object as so.

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

This is how you reference the options object.

In jQuery based Kendo UI it is passed into the constructor like this...

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

As a side note, most if not all configuration options are available directly on the directive with the k- prefix.

For Example...

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

.. and then you would just expose your data on the controller...

...
$scope.myData
...

Another note is that if you use the directive as an attribute like this...

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

... you are assigning it a reference allowing you to access the widget's Kendo object in the controller's scope.

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

The attribute k-options can be used to store the whole widget configuration in the controller. This attribute can also be used in other Kendo components like scheduler, date picker etc.

Here an example for Kendo datepicker implemented with the k-options attribute:

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