Kendo UI Grid and AngularJS: Formatting and Filtering JSON Dates and other tricks

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


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

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.

//Set up grid data source and schema
$scope.kendoGridDataSource = new{
    data: jsonArrayHere,
    pageSize: 15,
    schema: {
        model: {
            fields: {
                Created_Date: {
                    type: "date",
                    parse: function (data) { if (data == null) return null; return new Date(data); }
                Start_Date: {
                    type: "date",
                    parse: function (data) { if (data == null) return null; return new Date(data); }
                Project_Count: { type: "number" },
                Record_ID: { type: "number" }

Defining the Kendo Grid Options

//Set up grid options and properties
                   $scope.kendoGridOptions = {
                       toolbar: ["excel", "pdf"],
                       excel: {
                           fileName: "ExampleA.xlsx",
                           allPages: true,
                       pdf: {
                           fileName: "ExampleB.pdf",
                           allPages: true,
                       sortable: true,
                       groupable: true,
                       selectable: true,
                       resizable: true,
                       columnMenu: true,
                       pageable: {
                           pageSizes: [15, 25, 50, 100, 500]
                       filterable: {
                           extra: false,
                           operators: {
                               date: {
                                   gt: 'After',
                                   lt: 'Before',
                                   eq: 'Equal to'
                               string: {
                                   contains: "Contains",
                                   startswith: "Starts with",
                                   eq: "Is equal to",
                                   neq: "Is not equal to"
                       columns: [
                       { field: "Record_Name", title: "Name", template: "<a href=\"../team/details/#: Record_ID #\">#: Record_Name #</a>" },
                       { field: "Created_Date", title: "Date Created", template: "#if(Created_Date != null) {# <div>#= kendo.toString(kendo.parseDate(Created_Date), 'MM/dd/yyyy') #</div>#} #" },
                       { field: "Start_Date", title: "Date Started", template: "#if(Start_Date != null) {# <div>#= kendo.toString(kendo.parseDate(Start_Date), 'MM/dd/yyyy') #</div> #} #" },
                       { field: "LookupField", title: "Lookup Filter Example", filterable: { multi: true } },
                       { field: "Project_Count", title: "Count" },
                       { field: "Record_ID", title: "ID", hidden: true },
                       { field: "Hidden_Field", title: "Hidden Example", hidden: true }

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.

columns [{filterable: { multi: true }}]  – This enables filtering via a checkbox list in the grid filter menu.  Pretty cool stuff.  More information and example of this.

columns [{hidden: true}]  –  Hide the column by default, but list it in the column menu dropdown so that the user can choose to add it to the data grid.