Chronicling the Adventure that is software Development

I want to go over some more advanced Kendo UI Grid settings when using Angular and when receiving a list of records in a JSON format. For some examples of setting up a simpler/basic Kendo Grid with Angular.js check out this blog post.

One of the best things about the Kendo UI Grid is how customization it is. But with great flexibility comes some complication. I’ve found it easiest to split my angular grid variables into 2 separate pieces:

The Kendo Data Source

The Kendo Grid Options

The HTML

Defining the Kendo Data Source

Add the following to your angular controller. You will see that we are dealing with an array of JSON objects. By default, the JSON object is treating each field as a string and so we will need to tell the data source which fields to define as numbers and dates.

What did we just do?

toolbar: [“excel”,”pdf”]: Here I am adding two buttons to the top of the grid. One to export the grid data as a excel spreadsheet and the other as a PDF. Just below the “toolbar:” property I am setting the file name and page properties of each export.

columnMenu: true – I like to have all of the search, sort, and filter actions tucked away inside a drop-down for every column. To do this set the “columnMenu” property.

filterable: {} – I only want to show a few filter options depending on the field type. It is within here that I set those filter operators.

column links – To have text in a column show up in the grid as a link, check out the “Record_Name” template above. This example displays the name, but creates a link based upon its “Record_ID”.

column dates – Check out the templates of “Created_Date” and “Start_Date” to see how to format dates javascript dates to ‘MM/dd/yyyy’. You’ll notice that I have to first check for a null date value and then convert it into a string otherwise the grid would display unwanted date information.