All posts by Relly Rivlin

Back to blog home page

How to Execute Autocomplete in ng-grid

Posted by on Nov 24, 2014

In a previous post you learned how to use Typeahead with a Real REST API. In this follow-up blog post, we will take another step forward and integrate typeahead with ng-grid and make ng-grid editable.

Continue reading

Back to blog home page

Learn How to Implement Typeahead with ng-grid

Posted by on Oct 28, 2014

A few weeks ago we posted a blog series entitled ng-grid and REST API.  In the first blog you were given step-by-step instruction on how to build ng-grid with a Simple REST.  In the second blog you learned how to use a Real REST when creating ng-grid.  In this blog post, we will continue the series by showing you how to implement Typeahead by using the Real REST API.

Continue reading

Back to blog home page

Part II: ng-grid and a Real REST API

Posted by on Sep 16, 2014

In our previous blog, we walked through the steps of how to build an ng-grid solution using a “fake” REST API.  This tutorial will use a real REST API that can connect to any given database.  We will demonstrate how you can perform CRUD operations easily and seamlessly.  See it in Plunker before you get started: http://plnkr.co/edit/6jdCzZ?p=preview

Continue reading

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:

Summary

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:

Back to blog home page

The Enterprise Excel Hell

Posted by on May 28, 2014

The Excel Incentive

Of the millions of Microsoft users, few are unfamiliar with Excel. As a product, it is intuitive, mature and part of the Office package which might be Microsoft’s most successful package on the market. Gathering data with Excel is not only easy, it allows the user to foresee possible changes and problems in data trends, move to avoid business risks, and take action. Continue reading

Back to blog home page

The Case of Backand: The Admin Tool

Posted by on May 16, 2014

Several years ago, as the CEO of a small web development services company, I was faced with the task of creating a campaign for child users based on a gamification platform designed to gather a great deal of information from a single user. The information accumulated from the children consisted of points, trophies, competition boards and so on. The kids compete with one another and track their progress in the number of trophies they acquired. Eventually the application was used by tens of thousands of users, constantly creating new data. Continue reading

Back to blog home page

Images and media file management in SQL Server and MySQL – Coding Media Management Tools is Never Easy

Posted by on May 10, 2014

A core element to both web and mobile app development is rich media management. How you approach the control of images in particular can be tricky. In most cases you have two avenues: You either save it as a database BLOB or simply link to it as a file.

Continue reading

Back to blog home page

Weekend Project – Connect your Database and Automatically Generate a Fully Customized Back-office Interface

Posted by on May 04, 2014

Note: This blog post is based on the backand.com. I accidentally landed on this site a few days ago and after browsing a bit around, I found this very interesting. I encourage all of you to feel the same as what I experienced. Just like me you can also connect your database and automatically generate a fully customized back-office interface in no time. Continue reading

Back to blog home page

Backand Reborn as Premier Back End SaaS Provider

Posted by on May 04, 2014

Backand, an international provider of Back Office Services, is proud to announce the launch of their revolutionary Zero Entry pricing model and Back End SaaS product. By creating a Better BackOffice, Backand has destroyed the barriers of cost and time – enabling companies and small business of any size access to first class Back End services. Continue reading

Back to blog home page

Generic Database Frontend – Filtering, Free Text Search, Sorting & Paging

Posted by on Oct 25, 2013

Introduction

This article describes a server and client side code including explanations of a generic database frontend web application. In addition, it provides a standard UI for all database tables, which can be customized to generate a specific UI or additional supplements in both client and server applications.

Continue reading