3.0 beta 2

Grid

ActiveWidgets grid (AX.Grid class) could be used to display large amounts of data (up to millions of rows). To make it possible the grid has to render only the cells which are currently visible, adding the new rows or columns while the content scrolls vertically or horizontally and removing the ones which went out of view. While this is totally transparent to the end user, there is a lot going on behind the scene and getting to smooth 60FPS scrolling was not that easy.

However adding a grid component to your application is usually a relatively simple task.

Getting started

Add the placeholder element into your page markup, where you want to render the grid.

<span id="grid1">Loading..</span>

Specify columns and rows and then create the grid control itself.

var columns = [
    {header: 'Name', width: 120},
    {header: 'Address', width: 180},
    {header: 'City', width: 80},
    {header: 'Zip', width: 80, align: 'right'}
];

var rows = [
    ["Guy Powell", "330-6602 Laoreet Street", "Cheyenne", "35552"],
    ["Madeline Cross", "#517-8115 Cras Av.", "Bloomington", "76974"],
    ["Teagan Hicks", "P.O. Box 617, 7256 Sed Rd.", "Peutie", "77245"]
];

var grid = new AX.Grid({
    id: 'grid1',
    columns: columns,
    rows: rows
});

In this simple example we assign rows data directly to the rows collection. This triggers an automatic creation and initialization of all rows and cells (all at once). A better approach (for performance reasons) would be to use data binding, which allows deferring creation of each row/cell until rendering time.

Data binding

Data binding allows mapping data fields to the column values using binding expressions (bind property).

var data = [
    {name: "Miranda Henderson", company: "Nulla Corporation", phone: "(614) 429-8271"},
    {name: "Fay Decker", company: "Sed Pharetra Institute", phone: "(130) 810-8083"},
    {name: "Brock Buckner", company: "Id Corp.", phone: "(741) 126-3594"},
    {name: "Hilel Stafford", company: "Magna Limited", phone: "(605) 829-9200"}
];

var columns = [
    {header: 'Name', width: 150, bind: '$name'},
    {header: 'Company', width: 200, bind: '$company'},
    {header: 'Phone', width: 120, align: 'right', bind: '$phone'}
];

var grid = new AX.Grid({
    id: 'grid1',
    columns: columns,
    data: data
});

If your data record is a simple array - you can use $0..$n expressions to bind to array elements.

var data = [
    ["Jolene Butler", "Convallis Foundation", "(798) 526-3968"],
    ["Halla Williams", "Montes Institute", "(176) 337-8061"]
];

var columns = [
    {header: 'Name', bind: '$0'},
    {header: 'Company', bind: '$1'},
    {header: 'Phone', bind: '$2'}
];

The binding expressions may also be used for simple calculations -

{header: 'Amount', bind: '$price * $qty'}

Configuration

As the AX.Grid class is derived from AX.Component you can use any of the component properties -

var grid = new AX.Grid({
    width: '100%',
    height: 300,
    border: true,
    background: true
})

or if necessary go down to html level

grid.set({
    classes: 'my-grid',
    styles: 'position: absolute; left: 10px; top: 10px'
});

Columns

To configure grid columns use columns collection -

grid.columns([
    {header: 'Name', width: 150, bind: '$name'},
    {header: 'Company', width: 200, bind: '$company'},
    {header: 'Phone', width: 120, align: 'right', bind: '$phone'}
]);

The common properties are -

  • header - column header
  • bind - cell binding expression
  • width - column width
  • align - text alignment (cell & header)

Rows

Use rows collection to specify default values for the grid row properties -

grid.rows({
    height: 30,
    border: false
});

Extensions

The easiest way to extend the grid is to apply an existing mixin -

// apply title bar mixin
grid.use('title');

// configure the title bar
grid.title({
    height: 30,
    text: 'Datagrid 3.0'
});