Introduction

Today I tried out Angularjs and posted about it. After that it was time to add a grid to make my data look better. And I picked ng-grid.

Installation

These are the packages I am using.

  • angularjs 1.0.4
  • jQuery 1.9.0
  • Moment.js 1.7.2
  • ng-grid 1.6.0

But the ng-grid package does not contain the scripts. So I had to get those manually. I took the ones on github. The ng-grid.1.6.3.js and ng-grid.css.

Server

See my previous post on angularjs for this.

Client

My app.js changes a little.

Javascript
1
2
3
4
5
6
7
angular.module('plantsapp', ['ngGrid']).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
          when('/plants', { templateUrl: 'partials/plants.html', controller: PlantsController }).
          when('/plants/:Id', { templateUrl: 'partials/plant.html', controller: PlantController }).
          otherwise({ redirectTo: '/plants' });
  }]);
angular.module('plantsapp', ['ngGrid']).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
          when('/plants', { templateUrl: 'partials/plants.html', controller: PlantsController }).
          when('/plants/:Id', { templateUrl: 'partials/plant.html', controller: PlantController }).
          otherwise({ redirectTo: '/plants' });
  }]);

I just added the ngGrid string.

My controller.js will change a little too. And then specifically my PlantsController.

Javascript
1
2
3
4
5
6
7
8
9
function PlantsController($scope, $http) {
    $scope.plants = [];
    $scope.myOptions = { 
        data: 'plants'
    };
    $http.get('http://localhost:59025/plants').success(function (thisdata) {
        $scope.plants = thisdata;
    });
}
function PlantsController($scope, $http) {
    $scope.plants = [];
    $scope.myOptions = { 
        data: 'plants'
    };
    $http.get('http://localhost:59025/plants').success(function (thisdata) {
        $scope.plants = thisdata;
    });
}

See how I instantiate my plants outside the get. And then I add the myOptions line.

In the Index.html I will add these two lines.

HTML
1
2
3
<link href="css/ng-grid.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.9.0.min.js"></script>
    <script src="/Scripts/ng-grid.js"></script>
<link href="css/ng-grid.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.9.0.min.js"></script>
    <script src="/Scripts/ng-grid.js"></script>

And the plants.html file changes to this.

HTML
1
<div ng-grid="myOptions"></div>
<div ng-grid="myOptions"></div>

The myOptions is the same as what property I added in my PlantsController.

And tada.

But you might see that the date is not well formatted. Let’s fix that.

Formatting the date

First we need to add moment.js import to our index.html.

Then we need to add a filter to our app.js.

Like this.

Javascript
1
2
3
4
5
6
7
8
9
10
11
angular.module('plantsapp', ['ngGrid']).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
          when('/plants', { templateUrl: 'partials/plants.html', controller: PlantsController }).
          when('/plants/:Id', { templateUrl: 'partials/plant.html', controller: PlantController }).
          otherwise({ redirectTo: '/plants' });
  }]).filter('moment', function () {
      return function (dateString, format) {
          return moment(dateString).format(format);
      };
  });;
angular.module('plantsapp', ['ngGrid']).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
          when('/plants', { templateUrl: 'partials/plants.html', controller: PlantsController }).
          when('/plants/:Id', { templateUrl: 'partials/plant.html', controller: PlantController }).
          otherwise({ redirectTo: '/plants' });
  }]).filter('moment', function () {
      return function (dateString, format) {
          return moment(dateString).format(format);
      };
  });;

And now we need to change our controller so that we can add this filter to our column definition for DateAdded.

Like this.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function PlantsController($scope, $http) {
    $scope.plants = [];
    $scope.myOptions = { 
        data: 'plants', 
        columnDefs: [
                        {field:'Id', displayName:'Id'},
                        {field:'Name', displayName:'Name'},
                        { field: 'Genus', displayName: 'Genus' },
                        { field: 'DateAdded', displayName: 'Date added', cellFilter:"moment:'DD/MM/YYYY h:m'" }
        ]
    };
    $http.get('http://localhost:59025/plants').success(function (thisdata) {
        $scope.plants = thisdata;
    });
}
function PlantsController($scope, $http) {
    $scope.plants = [];
    $scope.myOptions = { 
        data: 'plants', 
        columnDefs: [
                        {field:'Id', displayName:'Id'},
                        {field:'Name', displayName:'Name'},
                        { field: 'Genus', displayName: 'Genus' },
                        { field: 'DateAdded', displayName: 'Date added', cellFilter:"moment:'DD/MM/YYYY h:m'" }
        ]
    };
    $http.get('http://localhost:59025/plants').success(function (thisdata) {
        $scope.plants = thisdata;
    });
}

Of course we could set our fofrmat straight in the filter and and then just use the moment filter.

For this we just need to change the filter to this.

Javascript
1
return moment(dateString).format('DD/MM/YYYY h:m');
return moment(dateString).format('DD/MM/YYYY h:m');

and the columndefinition then becomes this.

Javascript
1
{ field: 'DateAdded', displayName: 'Date added', cellFilter:"moment" }
{ field: 'DateAdded', displayName: 'Date added', cellFilter:"moment" }

And tada!!!!

Conclusion

Once you get it ng-grid is pretty easy to set up. I just didn’t get it for the first hour or so. Because I had my $scope.myOptions in my Get function, because that looked so much like what they did in the getting started things. But I was wrong.