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

Question

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>

Answer 1

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!