Kendo UI Grid and AngularJS

Lets walk through some ways to set up a basic Kendo UI Grid with AngularJS. For a run down of more advanced Kend UI Grid properties, check out this post.

Ive been using Kendo UI on one of my more recent ASP.NET with AngularJS projects and I have been very happy with it.  They offer a wide variety of customizable controls, styles, and support, but the Control that I found most useful in their toolbox, and the one that makes this product worth it for me, is the Kendo Grid control.

There are alot of examples and documentation out there for this control, but I found it difficult to find a good example of how I envisioned utilizing it within our application.
– I wanted the grid to be reusable by different objects,for example a grid of teams and a grid of players.
– I needed it to have customizable rows and columns so that I can add buttons, checkboxes, images, and whatever else to the grid.
– I needed the grid to be de-coupled from any html elements. Mainly to be more DRY and to avoid the error message I describe below.

Many of the examples online do not meet those needs. Instead they direct you to create one similar to this

$("#gridName").kendoGrid({
              dataSource: exampleData,
              height: 550,
              groupable: true,
              sortable: true
          });

The problem: $(“#gridName”)
To us, this line is a design problem because it limits how this chunk of code can be re-used.
It also gives the browser a problem because the browser will throw an error if there is not a element with the name “gridName”.
So why not just name you grid or any other element? Well, what if i want to put 2 grids on one page? They both cannot have the same name, and with that, I loose the re-usability. Because of this I make it a point to never reference Element IDs and Element Names in my javascript, this ensures that there will be no “element does not exist” errors in my browser.

There are a few ways to solve this, but I will go over two of them here. In the end I ended up using example 2 in our application.

Example 1:

-Set your options and row template in the HTML
-Set your datasource in your angular controller

<kendo-grid k-data-source='kendoGridData'               
k-columns='[    
{ field: "Team_Name", title: "Team Name" },    
{ field: "Team_City", title: "City" },    
{ field: "Team_State", title: "State" }   ]'               
k-selectable="true"               
k-sortable="true"               
k-pageable="true"               
k-filterable="true">

<!--Row Template-->
<div k-row-template data-uid="#: Team_ID #">
<table>
<tr data-uid="#: uid #">
<td><a href="../teams/details/#: Team_Name #">#: Team_Name #</a></td>
<td>#: Team_City #</td>
<td>#: Team_State #</td>
</tr>
</table>
</div>

</kendo-grid>

And then you set kendoGridData in your AngularJS code like this

$scope.kendoGridData = [example data here.......]

Example 2:

-Minimize what you put in the html.
-Set your options, rows, and datasource in your angular controller.

The minimal HTML

<div kendo-grid k-options="kendoGridOptions" ></div>

Setting everything else using AngularJS

$scope.kendoGridOptions= {
    dataSource: [Example Data Source....],
    sortable: true,
    groupable: true,
    selectable: true,
    pageable: true,
    filterable: true,
    columnMenu: true,
    columns: [
                         {
                             field: "Team_Name",
                             title: "Name",
                             filterable: true,
                             template: "&amp;amp;lt;a href='#'&amp;amp;gt; #: Team_Name # &amp;amp;lt;/a&amp;amp;gt;",
                         },
                         { field: "Team_City", title: "City" },
                         { field: "Team_State", title: "State" }
    ]
};
Advertisements

One thought on “Kendo UI Grid and AngularJS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s