This blog post will demonstrate the usage of IgGrid in Aurelia application, but the steps are applicable for all of the Ignite UI widgets.

Aurelia made a great effort to deliver to its users several ways for building Aurelia applications. This will be a walkthrough of the most popular one - Creating a project using Aurelia CLI.

Prerequisites

This is the list with the requirements:

• Install NodeJS version 4.x or above. You can download it here.
• Install the Aurelia CLI - npm install aurelia-cli -g
• Download and install the Ignite UI product itself

Once the prerequisites are available, Creating a new Aurelia Project could take place.

• Type au new
• Select the defaults(hit enter several times)
• To run the project type au run, but before running it, let's create our IgGrid component.

Aurelia provides writing applications in ESNext or in TypeScript, this blog post is using the default one - ESNext. Also note that you could type au run --watch if you don't want to re-run the project on every single change.

Build the IgGrid Component

Let's build the ViewModel. Go to the src folder and create a file ig-grid.js with the following content:

  import {bindable, inject} from 'aurelia-framework';

  import '../igniteui/js/infragistics.lob';

  @inject(Element)

  export class IgGrid {

      @bindable options;

      @bindable id;

      constructor (element) {

          this.element = element;

      }

      attached() {

          var grid = $(this.element).find('table');

          //set id of the grid

          grid.attr("id", this.id);

          //initilize the widget

          grid.igGrid(this.options);

      }

  }

There are two Bindable properties to the ViewModel, which will be populated as attributes. To achieve the binding between an attribute and a property of the class, the property should be decorated with @bindable decorator. The First property options is used for specifying the grid configuration and the second one is the id attribute of the HTML element on which the widget is going to be initialized.

The Aurelia dependency injection gives the opportunity to refer to the template from the view(the table HTML element). This element is injected in the constructor and stored.

Afterwards in order to make sure the component is attached to the DOM for the initialization, the attached lifecycle callback is used.

The view is used to specify the HTML element on which the igGrid is initialized.

Create ig-grid.html file with the following content:

Invoke IgGrid Component

In order to use the component we've already built, go to the application template - app.html; and inside it require and initialize the component:

Now opts and id should be defined in app.js file:

  export class App {

      constructor() {

          this.message = 'Ignite UI igGrid with Aurelia';

          this.id = "grid1";

          this.opts = {

              caption: "Angular2",

              primaryKey: "Id",

              dataSource: [

                  { "Id": 1, "Name": "John Smith", "Age": 45 },

                  { "Id": 2, "Name": "Mary Johnson", "Age": 32 },

                  { "Id": 3, "Name": "Bob Ferguson", "Age": 27 }

              ],

              columns: [

                  { headerText: "Id", key: "Id", dataType: "number", hidden: true },<

                  { headerText: "Name", key: "Name", dataType: "string" },

                  { headerText: "Age", key: "Age", dataType: "number" }

              ],

          };

      }

  }

Ignite UI references

And finally Ignite UI scripts should be included. Download them from here and include them into the project. For this demo we've created 'igniteui' folder, where the Ignite UI product is located and have imported the infragistics.lob.js file in the ViewModel, this file has dependencies to:

• jquery
• jquery-ui
• infragistics.core.js

What we need to resolve is jQuery and jQuery UI packages.

Include as devDependencies into the package.json:

  "jquery": "1.12.4",

  "jquery-ui-dist": "1.12.1"

And in order to bundle all of them put them as dependencies in aurelia.json file which is aurelia_project folder:

  "jquery",

  {

      "name": "jquery-ui",

      "path": "../node_modules/jquery-ui-dist",

      "main": "jquery-ui.min"

  }

The same rules apply to any Ignite UI widget and all of them can be integrated in an Aurelia application.

Now you’re ready to run the application and see the igGrid, type au runin the console.

Download the demo.

Steps to run the demo:

1. Make sure Aurelia CLI is installed
2. Type npm install
3. Type au run

Link to the live demo.