Tag Archives: UI Grid

Back to blog home page

Part I: ng-grid and a Simple REST API

Posted by on Sep 11, 2014

A Quick Note – with version 3, NG Grid changed its name to UI Grid. As such, we will refer to the library as UI Grid in the following text.

UI Grid is pure AngularJS and it comes with excellent documentation. It has pagination, sorting, filtering, and local data model binding/editing built-in, allowing for quick and easy integration with any AngularJS application. In this post we will demonstrate how to perform each of these tasks in an Angular application by using a RESTful API to interact with a remote data model over HTTP.

Before we get started, you will need the following packages installed:

Client side:

  • angular.js, version 1.4.3
  • angular-touch.js, version 1.4.3
  • angular-animate.js, version 1.4.3
  • ui-grid.js, latest version
  • ui-grid.css, latest version

Server side:

  • A REST API for a data model. This API must have the following actions:
    • a GET action with paging, filtering, and sorting
    • a PUT action for updating an object

In this article, we’ll be using Backand’s back end service. This provides a quick-and-easy REST API for any data model you desire, and meets all the requirements for server-side interactions.

There are 6 steps in this project, each with a jsFiddle example:

  1. Basic grid bonded to a local data model – edit in jsFiddle
  2. Connect to REST API – edit in jsFiddle
  3. Add paging – edit in jsFiddle
  4. Add sorting – edit in jsFiddle
  5. Add filtering – edit in jsFiddle
  6. Add editing – edit in jsFiddle

We will cover each step in more detail below.

Basic grid   edit in jsFiddle

This section details how to bind UI Grid to a local data model. It should be fairly straight-forward, and will allow us to bind the model to the REST API quickly. To set up the basic UI Grid, add the following into the indicated portions of your application:

HTML (for rendering the grid):

JavaScript (for binding the grid to your data model):

Connect to REST API   edit in jsFiddle

Next, we’ll build an Angular data service that performs all of the relevant REST API work. This allows us to have a clean controller that handles the display of the data. Add the following JavaScript code to your application to create the data service:

The above service provides full CRUD capability for your data model, but in this example we will primarily focus on the ‘readAll’ and ‘update’ functions. This functionality is handled through Backand’s REST API service, and ties directly into a Backand application.

Now that we have the data service, let’s change the controller to integrate the service with our local data model. Add the following JavaScript into your application:

Notice that the above code service uses Angular’s asynchronous $http, which returns a promise to sync the response. Building off this patterning, we use the promise callback to bind the response data. And with that, we have a controller that pulls its data from our ProductsService, and ties it to the variable gridOptions in $scope. From here on out, we will be using the gridOptions property for grid binding and display, we will be able to quickly update the UI Grid with the latest server data.

Paging   edit in jsFiddle

UI Grid’s built in pagination works with a local object. Since we are using a remote data model, we need to provide the pagination parameters to the REST API. To do so we will build our own simple pagination object and UI, and we will set the UI Grid’s enablePaginationControls property to false. By doing this, we will override UI Grid’s local pagination in favor of our server-based approach.

Start by adding the following JavaScript to your application:

Next, add the following HTML elements for the pagination UI:

With the above entered, all that is left is to add pageSize and pageNumber to the data service class. The service will then add these values to the REST API via HTTP query string parameters. To accomplish this, we modify the readAll function in the data service as follows (note: the highlighted code represents changes from the original):

Sort   edit in jsFiddle

UI Grid’s sorting functionality, by default, works with the local app data model. As we are using custom pagination to load the data model, the sorting functionality will thus only sort the portion of the data that has been loaded locally, which is obviously not desirable. To fix this, we need to use a server side sort that ties in with our pagination, allowing us to return the correct data with respect to the entire data set. To do this, we’ll set UI Grid’s useExternalSorting property to true, then add an array of fields with a sort direction (either ascending or descending) to provide to the REST API as a query string parameter. Finally, to populate this array we will register for the sortChanged event on the grid, using the event to call our custom data service.

First, add the following JavaScript to your application:

Next, we modify the data service to accommodate the new ‘sort’ parameters. Once again, the highlighted code represents the changes to the existing data service code:

Filter edit in jsFiddle

UI Grid’s built-in filter functionality has the same restrictions as the Sort functionality above – it only operates on the local dataset, which is not particularly useful with our REST-based data service. To fix this, we’ll use the same general process – enable external filtering on UI Grid, then send the filter parameters through as URL query parameters from our data service. To do this, we set UI Grid’s useExternalFiltering property to true and the enableFiltering property to true. This allows us to use UI Grid’s filtering interface, but not the local filtering itself.

A quick note: Filtering can be very sophisticated, and highly app-dependent. Below, we intentionally use some very simple filtering in order to demonstrate the functionality. Our purpose is to build a basic remote filtering infrastructure, which you can later build upon to add additional complexity as necessary.

Similar to the Sort functionality above, we’ll subscribe to the filterChanged event of the UI Grid. We’ll use this handler to populate a set of filter fields, as well as the operators and the specific filter values. As this functionality is API-dependent, you’ll want to make sure you understand the filtering functionality available on your REST API service. You can find the full REST API documentation for Backand’s REST API Service here. To tie in with this functionality, we will set all of the text field operators to ‘contains,’ the id field’s operator to ‘equals,’ and the pricing field’s operator to ‘greaterThanOrEqualsTo’.

Use the following JavaScript to register for the filterChanged event:

Now, we modify the data service again with the highlighted code:

Edit   edit in jsFiddle

With pagination, sorting, and filtering added, it’s finally time to handle editing. Below we will implement basic cell editing, but you can easily add dialog-based and row-based editing on your own. First, enable editing of the individual cells by adding the ui-grid-edit attribute to the UI Grid element. Once this is completed we’ll register for the afterCellEdit event and use the event handler to call the update function of our data service. Finally, we reload the entire grid in the edit event’s callback promise. This is done in case editing the cell on the server results in additional changes to the data (such as those that might be triggered by a customer server-side action in your Backand application, or any calculated values that appear in the grid that might depend upon the cell). The code below also uses Backand’s __metadata.id field to obtain the ID needed for the update function. This is advised for cases when the ID field is changeable, and allows you to quickly reference the original row’s ID instead of having to save it off before modifying the existing value. You can leave this as-is, or choose to use rowEntityId and make the associated code changes in your project.

To make these changes, we perform all of the relevant tasks in UI Grid’s afterCellEdit event handler:


With the above completed, we now have a UI grid that has paging, sorting, filtering, and editing – all tied in to a remote database. While this operates on a fairly basic data set, you can quickly add new elements and functionality to handle more complex use-cases by following the same patterns used above. In any case, the above should serve as an excellent template for constructing a dynamic UI Grid based upon server-side REST APIs.

You can find more information on each of the components below at the provided URLs: