LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI Grid for Angular 2

Created: 22 February 2017

Updated: 20 Oct 2017

IntegralUI Grid is a native Angular 2 component that displays tabular data sets. You can load data on demand during run-time from local or remote data sources. Each grid cell can have custom HTML content or other Angular components. In following sections, you can find details about various features available in the Grid component.

Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

In above demo, you can choose how many columns and rows to display in the Grid. For demonstration purposes only, a limit is set to 100 columns and 100,000 rows. The only limit here is how much data the browser can handle. By clicking on the Load button, the grid is populated with custom data.

Similar: TreeGrid Component for Angular 2

By left-click on a row and move the mouse cursor, a drag drop operation will start and you can reorder rows during run-time. In this example, there are no restrictions set, and you can drag and drop a row and placed it a child of another row. However, if you want you can set conditions and provide custom drag drop operations on your own. You can find more information in below section describing drag drop operations.

To select multiple rows, hold SHIFT or CTRL key and click on specific row. For more information on selection, see section below.

How to Use IntegralUI Grid in Angular 2

In order to use the Grid component in your app, you need to do the following:

  • Place the Grid in your app using the iui-grid tag name
  • Define the template that will be used to for header, footer and rows
  • Add custom HTML elements as grid content
  • Connect the Grid to your data source

//

// main.ts file

//

 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

 

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

 

 

 

//

// app.module.ts file

//

 

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { IntegralUIModule } from 'integralui/integralui.module';

 

@NgModule({

imports: [ BrowserModule, IntegralUIModule ],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

 

 

 

//

// app.component.ts file

//

 

import { Component } from '@angular/core';

import { IntegralUISelectionMode } from 'integralui/components/integralui.core';

import { IntegralUIGrid } from 'integralui/components/integralui.grid';

 

@Component({

selector: 'iui-app',

templateUrl: 'app.template.html',

styleUrls: ['grid-overview.css']

})

export class AppComponent {

// Variables used by Grid component

@ViewChild('grid') grid: IntegralUIGrid;

@ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;

 

// Data set references

private columns: Array<any>;

private rows: Array<any>;

// Determine the size of the grid data

private numColumns: number = 25;

private numRows: number = 10000;

// Selection type set to multi extended

private selMode: IntegralUISelectionMode = IntegralUISelectionMode.MultiExtended;

 

// Initialize app component constructor

constructor(){

this.columns = [];

this.rows = [];

}

 

ngAfterViewInit(){

this.add();

}

 

addColumns(){

for (let j = 1; j <= this.numColumns; j++){

let column = {

id: j,

title: "Header " + j,

footerText: "Footer " + j,

width: 100

}

 

this.columns.push(column);

}

}

 

addRows(){

for (let i = 1; i <= this.numRows; i++){

let row = {

text : 'Row ' + i,

id: i,

cells: [],

rows: []

};

 

for (let j = 0; j < this.columns.length; j++)

row.cells.push({ text: "Item" + i + j });

 

this.rows.push(row);

}

}

 

// Called when button Add is clicked

add(){

this.clear();

 

this.addColumns();

this.addRows();

 

this.grid.updateLayout();

}

 

// Called when button Clear is clicked

clear(){

this.grid.clearColumns();

this.grid.clearRows();

 

this.grid.updateLayout();

}

}

//

// app.template.html file

//

 

<div #application style="width:800px">

<iui-grid [appRef]="applicationRef" [columns]="columns" [rows]="rows" [selectionMode]="selMode" [allowDrag]="true" #grid>

<template let-column [iuiTemplate]="{ type: 'header' }">

{{column.title}}

</template>

<template let-cell [iuiTemplate]="{ type: 'cell' }">

{{cell.text}}

</template>

<template let-column [iuiTemplate]="{ type: 'footer' }">

{{column.footerText}}

</template>

</iui-grid>

<br />

<div align="center">

<span>Max columns:</span> <input class="input-numeric" type="number" [(ngModel)]="numColumns" min="1" max="100" />

<span>Max rows:</span> <input class="input-numeric" type="number" [(ngModel)]="numRows" min="1" max="100000" />

<br />

<button (click)="add()" class="ctrl-button">Add</button>

<button (click)="clear()" class="ctrl-button">Clear</button>

<template let-column [iuiTemplate]="{ type: 'footer' }">

{{column.footerText}}<

</template>

</div>

</div>

/*

grid-overview.css file

*/

 

.iui-grid

{

border: thin solid gray;

width: 800px;

height: 400px;

}

.ctrl-button

{

margin: 20px 10px 0 0;

width: 75px;

}

.input-numeric

{

margin: 5px 20px 5px 0;

width: 75px;

}

If required, you can have a different content in each grid cell. By setting custom conditions (for example using the ngIf directive, a different content can be applied to a different cell.

In order for Grid to work with tour data source, the columns and rows properties must point to your data set. In this way, a change to the data like reordering during drag drop operations is reflected to the data set. During these processes, various events are fired. By handling these events in the code, you can update your data source.

Your data source can have different field names then the ones used by the Grid component. You can find more information about this in below section of data binding.

Supported Properties

There are multiple properties available in the Grid component. Here is short description of each property:

  • allowDrag - determines whether row can be dragged
  • allowDrop - determines whether row can be dropped
  • appRef - holds a reference to application view
  • columns - holds a reference to the list of column objects defined in your application component
  • controlStyle - specifies an object that holds names for custom CSS classes
  • data - specifies an object that holds data related to the Grid
  • dataFields - specifies an object that map the fields names from data source to the ones used by the Grid
  • gridLines - specifies whether horizontal, vertical or both lines are displayed in the grid
  • rows - holds a reference to the list of row objects defined in your application component
  • selectedColumn - an object that points to the currently selected column
  • selectedRow - an object that points to the currently selected row
  • selectionMode - specifies the selection type: none, single or multiple
  • showFooter - determines whether footer is visible or not
  • showHeader - determines whether header is visible or not
  • state - specifies the state of the Grid: disabled, hovered, etc.

To avoid using plain javascript manipulation of the DOM and because of the way Angular 2 is structured, in order to show a tooltip, context menu or any other popup window, a reference to the root application component is required. You can provide a value to appRef property by simply setting a variable to the root component, and then access it by calling the ViewChild with specified variable name.

// Get a reference of application view

@ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;

<div #application>

<iui-grid [appRef]="applicationRef" [columns]="columns" [rows]="rows">

</iui-grid>

</div>

Data Binding in Grid

When interacting with the Grid component, depending on the action, a corresponding event is fired. For example, dragging a row and dropping it over another row will fire dragOver and dragDrop events, adding a row will fire rowAdding and rowAdded events, selection a column or row will fire beforeSelect and afterSelect events, etc.

By specifying the columns and rows properties to point to your data object, along with dataFields property that holds an object that maps the names of fields in the data object, you can populate the Grid using any kind of custom data source.

Supported Events

Whenever some action is performed in the Grid component, a corresponding event is fired. For example, dragging a row and dropping it over another row will fire dragOver and dragDrop events, adding a row will fire rowAdding and rowAdded events, selection a column or row will fire beforeSelect and afterSelect events, etc.

Here is a list of available events:

  • afterSelect - occurs after column or row is selected
  • beforeSelect - occurs before column or row is selected
  • columnAdded - occurs when new column is added to the Grid
  • columnAdding - occurs before column is added
  • columnsCleared - occurs when all columns are removed from the Grid
  • columnRemoved - occurs when columnis removed from the Grid
  • columnRemoving - occurs before columnis removed
  • dragDrop - occurs when row is dropped over target row or empty space
  • dragEnter - occurs when dragged row enters the Grid space
  • dragLeave - occurs when dragged row leaves the Grid space
  • dragOver - occurs when row is dragged over Grid space
  • rowAdded - occurs when new row is added to the Grid
  • rowAdding - occurs before row is added
  • rowsCleared - occurs when all rows are removed from the Grid
  • rowClick - occurs when row is clicked
  • rowDblClick - occurs when row is double-clicked
  • rowRemoved - occurs when row is removed from the Grid
  • rowRemoving - occurs before row is removed
  • scrollPosChanged - occurs when position of vertical or horizontal scrollbar has changed
  • selectionChanged - occurs when currently selected row has changed

By handling these events in your code, you can add custom actions that may alter the default behavior of the Grid component. For example, by handling the scrollPosChanged event, you can implement infinite scrolling, that is whenever scroll position is close to the end, a new data is loaded.

Supported Methods

There are many public methods available that you can call in your code that will help you in working with the Grid component.

In order to get access these methods, at first we need to get a reference to the Grid component. You need to set a variable in the HTML specification of the grid. This allows you to locate the Grid within your application component.

//

// app.component.ts file

//

 

export class AppComponent {

// An Array object that holds all column objects shown in Grid

private columns: Array;

// An Array object that holds all row objects shown in Grid

private rows: Array;

 

// Get a reference to the Grid component using a variable set in HTML

@ViewChild('grid') grid: IntegralUIGrid;

 

// Initialize rows in component constructor

constructor(){

this.rows = [];

}

 

// Called when button Clear is clicked

// Here the columns and rows data set is cleared using methods and then the layout is updated

clear(){

this.grid.clearColumns();

this.grid.clearRows();

 

this.grid.updateLayout();

}

}

 

bootstrap(AppComponent);

//

// app.template.html file

//

 

<button (click)=class="code-attr-val">"clear()">Clear</button>

<iui-grid [columns]="columns" [rows]="rows" #grid>

<template let-column [iuiTemplate]="{ type: 'header' }">

{{column.headerText}}

</template>

<template let-cell [iuiTemplate]="{ type: 'cell' }">

{{cell.text}}<

</template>

<template let-column [iuiTemplate]="{ type: 'footer' }">

{{column.footerText}}<

</template>

</iui-grid>

In above code, data sets for columns and rows are cleared and the grid layout is updated. To access these method, at first we need to get a reference to the Grid component. In HTML we are adding the #grid variable, which is used to locate the Grid within your application component.

After you have a reference to the Grid component, you can get access to all public methods available:

  • addColumn - inserts a new column
  • addRow - inserts a new row at the end of Grid
  • clearColumns - removes all columns from the Grid
  • clearRows - removes all rows from the Grid
  • findRowById - searches through tree hierarchy for an row that matches specified id
  • findRowByText - searches through tree hierarchy for an row that matches specified text
  • insertColumnAfter - inserts a new column in a position after specified column
  • insertColumnBefore - inserts a new column in a position before specified column
  • insertRowAfter - inserts a new column at specified position
  • insertRowBefore - inserts a new row in a position after specified row
  • insertRowAt - inserts a new row at specified position
  • isHorScrollVisible - returns a value stating whether the horizontal scrollbar is visible or not
  • isVerScrollVisible - returns a value stating whether the vertical scrollbar is visible or not
  • refresh - updates the appearance of the Grid
  • removeColumn - removes the specified column from the Grid
  • removeRow - removes the specified row from the Grid
  • scrollPos - gets or sets the current scrolling position
  • selectRows - select a set of rows from code
  • updateLayout - updates the Grid layout in whole
  • updateView - updates only the current view of the Grid
  • Advanced Drag and Drop Operations

    Grid component comes with advanced drag drop that allows you to reorder rows by simply dragging one or multiple rows from one place to another within the same or other components.

    Related: Drag Drop between Grid and TreeGrid in Angular

    During this process, events are fired that can help you to add custom actions that may alter the default built-in drag drop functionality. In each event, you can set up custom conditions that can prevent or allow drag drop in special cases, depending on your application requirements.

    Whenever a row is dragged, a dragging window will appear showing the target row and position at which row can be dropped. There are three possible positions:

    • up arrow - states that row will be dropped above target row
    • down arrow - states that row will be dropped below target row
    • down arrow with a line - states that row will be dropped at the end of the Grid

    For custom drag drop operation, check out the demonstration of the TreeGrid component.

    By default, during drag and drop rows are moved from their original position to a new one. In some cases, instead of moving you may need to create a copy of dragged rows. Copy operation is already built-in, you only need to press and hold the SHIFT key, when row is dropped. The dragging window will change its icon showing a + sign. This states that copy of dragged row will drop at specified position.

    Here is a link to an example of drag drop operation where multiple rows are moved or copied within the Angular Grid component. You can select multiple rows from checkbox column or by clicking on rows while holding CTRL or SHIFT key, then you can drag and drop them at different position.

    How to Select Multiple Rows

    By default, a single selection mode is active, which means that only one row can become selected at one time. You can change this by setting the selectionMode property to a different value and allow multiple rows to become selected.

    When selectionMode is set to IntegralUISelectionMode.MultiExtended, you can select multiple rows by holding the SHIFT or CTRL key and click on specific row.

    You can also select multiple rows using the selectRows method. This method accepts an array of row objects. You can call this method from your app code and select rows manually without user interaction.

    How to Display Thousands of Rows into the Grid

    There is already built-in virtualization in the Grid, which allows you to display hundreds of thousands of rows at one time. The only limit here is how much data the browser can handle. For example, in above demonstration, you can load 100,000 rows in 100 columns.

    The Grid is optimized to work with large data sets. You can load your data set initially into the Grid, and update only small portion on your server when required. All work is done on the client side, which increases overall user interaction.

    Sorting

    Sorting in Grid component for Angular is straightforward. In most cases, when grid cells have text or numeric values, you can use already built-in sort operations. Whenever rows are sorted, an arrow will appear in column header showing the current sort order.

    Custom sorting is also supported, by allowing creation of comparer function where you can add any custom conditions to sort complex objects.

    How to Customize the Grid Appearance

    Each part of IntegralUI Grid component is fully customizable. There are different CSS classes for each component part. Although changing the attributes of built-in classes is possible, you can completely override them using the controlStyle property.

    The controlStyle property accpets an object that holds all or partial list of CSS class names that will override the default CSS class names. For each component part, a different CSS class governs its appearance. This allows you to specify a set of different CSS classes for each component part and alter the appearance of the Grid in whole. In this way, you can make it more suitable for your application requirements.

    Related: Angular Grid with Rows in Alternate Colors

    Conclusion

    IntegralUI Grid component allows you to display thousands of rows in multiple columns. You can populate the Grid using custom data source, locally or remotely. Supports custom drag drop operations, selection of multiple rows and it is fully customizable.

    By using templates, you can add any custom HTML elements or Angular 2 components in column header, footer and each row cell individually. With use of conditions like ngIf directive, you can have different cells with different content.

    The Grid component is part of IntegralUI Web.

    Did you Like this Article?


    Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.