CODEWITHSUNDEEP
angularjskendo-uikendo-grid
Ronak Shah
Ronak Shah

Reputation: 388797

How to access kendo grid with the help of angular directive?

I have the following structure of my grid

 $scope.grid = $("#prospectsGrid").kendoGrid({
 columns: [
 { template: "<input type='checkbox' class='checkbox' />", width: "3%" },
 { template: "#= FirstName + ' ' + LastName #", title: "Name" },
 { field: "FirstName", hidden: true },
 {
 command: [
 {
 name: "edit",
 text: "<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>"
 }
}).data("kendoGrid");

As you can see I am accessing this grid with the help of an identifier that is #prospectsGrid. Now without changing any of the functionality inside the grid, I need to replace the identifier (#prospectsGrid) with some angular element. How can I do that? Any help would be appreciated.

Just for reference my HTML Code is 

<div id="prospectsGrid" class="gridcommon"></div>

Upvotes: 0

Views: 1602

Answers (1)

robBerto
robBerto

Reputation: 196

As micjamking says in comments, you need inject in your module KendoUI directives.

angular.module("myApp",["kendo.directives"])

Then you will can use in your html code something like this

<div kendo-grid="myKendoGrid"
     k-options="myKendoGridOptions">
</div>

In controller:

angular.module("managerOMKendo").controller("myController", function ($scope) {
     // Functions controller
     $scope.createMyGrid = function () {
         $scope.myKendoGridOptions = {
               columns: [ {
                   field: "FirstName",
                   template: "<input type='checkbox' class='checkbox' />", width: "3%"
                   },
                   command: [{
                       name: "edit",
                       text: "<span class='glyphicon glyphicon-pencil' aria-hidden='true'></span>"
                   }]
                   // Here you can put your complete configuration. Check official example
              }
         }
     }
     // Main thread
     $scope.createMyGrid(); // call the function that creates the grid
});

Here is the official example
It´s possible that you need change something. For example where I have written text, maybe you have to write template. It´s hard without plunker.

Good luck!

Upvotes: 1

Related Questions