ag-Grid - The Enterprise Datagrid For Aurelia

Please let me introduce Sean Landsman, a developer on ag-Grid to share what he's been working on. Sean, take it away...

Here at ag-Grid, we are very excited to be able to offer support for Aurelia! Aurelia is a powerful and flexible framework that makes developing applications a breeze.

In this post, I won't be documenting how to use Aurelia in ag-Grid but rather on how we added support for Aurelia within the grid itself. For details on how to use Aurelia in ag-Grid, take a look at the ag-Grid Aurelia documentation.

AgGridAurelia

Following the model used by our Angular 2 offering, we created a new Custom Component that wraps ag-Grid, passing events & properties back and forth between the Custom Component and the grid. Doing this keeps ag-Grid framework agnostic, a core design principle here at ag-Grid.

AgGridAurelia is the main Custom Component for Aurelia - it handles all core grid events and properties, as well as initial instantiation and removal.

    
  @customElement('ag-grid-aurelia')
  @inlineView(`<template><slot></slot></template>`)
  @autoinject()
  export class AgGridAurelia implements ComponentAttached, ComponentDetached {
    ...
  }

The grid definition (which we'll get to in a minute) consists of the parent selector (ag-grid-aurelia) and a number of child ag-grid-column's.

    
  @children('ag-grid-column')
  public columns: AgGridColumn[] = [];

During the creation and initialisation phases, we dynamically create all available grid events, set all provided gridOptions, map supplied column definitions to colDefs and finally instantiate ag-Grid itself:

Create all available grid events.

    
  ComponentUtil.EVENTS.forEach((eventName) => {
      //create an empty event
      (<any>this)[eventName] = () => {
      };
  });

Copy supplied properties to gridOptions.

    
  this.gridOptions = ComponentUtil.copyAttributesToGridOptions(this.gridOptions, this);
  this.gridParams = {
      globalEventListener: this.globalEventListener.bind(this),
      frameworkFactory: this.auFrameworkFactory
  };

Map supplied column definitions to expected colDefs.

    
  if (this.columns && this.columns.length > 0) {
      this.gridOptions.columnDefs = this.columns
          .map((column: AgGridColumn) => {
              return column.toColDef();
          });
  }

Instantiate ag-Grid with the supplied configuration.

    
  new Grid(this._nativeElement, this.gridOptions, this.gridParams);

Note: This is an abridged version of what actually happens, for brevity's sake.

Mapping Columns to Template Types

Each type of column is defined by a selector and then converted to a colDef that the grid understands. This is done in AgGridColumn:

    
  @autoinject()
  export class AgGridColumn {
      @children('ag-grid-column')
      public childColumns:AgGridColumn[] = [];
  
      @child('ag-cell-template')
      public cellTemplate:AgCellTemplate;
  
      @child('ag-editor-template')
      public editorTemplate:AgEditorTemplate;
      ...
  
      public toColDef():ColDef {
          let colDef:ColDef = this.createColDefFromGridColumn();
  
          if (this.hasChildColumns()) {
              (<any>colDef)["children"] = this.getChildColDefs(this.childColumns);
          }
  
          if (this.cellTemplate) {
              colDef.cellRendererFramework = {template: this.cellTemplate.template};
              delete (<any>colDef).cellTemplate;
          }
  
          if (this.editorTemplate) {
              colDef.editable = true;
              colDef.cellEditorFramework = {template: this.editorTemplate.template};
              delete (<any>colDef).editorTemplate;
          }
          ...
  }

For example, if we defined a column as follows...

    
  <ag-grid-column header-name="Mood" field="mood" width.bind="250" editable.bind="true">
      <ag-cell-template>
        <img width="20px" if.bind="params.value === 'Happy'" src="images/smiley.png"/>
        <img width="20px" if.bind="params.value !== 'Happy'" src="images/smiley-sad.png"/>
      </ag-cell-template>
      <ag-editor-template>
        <ag-mood-editor>
      </ag-editor-template>
  </ag-grid-column>

...this would be mapped to a column with a defined cellRenderer and cellEditor.

That's pretty much it! Give it a go - Aurelia is a fun framework and now you can use it with the best Enterprise Data Grid around! Take a look at our live examples site . Feedback is always welcome!

About Sean Landsman

I'm an experienced full stack technical lead with an extensive background in enterprise solutions. Over 19 years in the industry has taught me the value of quality code and good team collaboration. The bulk of my background is on the server side, but I am increasingly switching focus to include front end technologies. Currently, I work on ag-Grid full time.