3.0 beta 2

Data Binding

The simplest way to put some data into the grid is to assign the data array to the rows property. However you will get more flexibility and better performance when using data binding. In this case the data goes into the data property and the bind property of each column gets a binding expression.

Assigning data

If the data has already arrived to the client side - assign the data array to the grid data property.

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

var grid = new AX.Grid({
    data: data
});

Most often the data comes from the server in JSON format via an asynchronous request. The common way to interact with the deferred data is Promise API, which is implemented by many libraries (including jQuery) and automatically recognized by ActiveWidgets object properties. This allows assigning the deferred results directly to the data property where the property method itself takes care of processing success/failure callbacks.

// get the data asynchronously via jQuery AJAX
var data = $.getJSON(path, params);

// assign deferred data directly to the grid property
// let the grid automatically handle success/failure callbacks
var grid = new AX.Grid({
    data: data
});

If you need just part of your results payload or want to do some pre-processing - it is easy with chained Promise.then() calls.

// promise.then() returns another promise
var data = $.getJSON(path, params).then(function(results){
    return results.data; // do something with arriving results
});

// still good to assign directly to the data property
var grid = new AX.Grid({
    data: data
});

Configuring bindings

Array

If each data record is a simple array - use $0..$n expressions for the column bindings.

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'}
];

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

Object

If each data record is an object/hashmap - use the field name with a $ prefix.

var data = [
    {name: "Fay Decker", company: "Sed Pharetra Institute", phone: "(130) 810-8083"},
    {name: "Hilel Stafford", company: "Magna Limited", phone: "(605) 829-9200"}
];

var columns = [
    {header: 'Name', bind: '$name'},
    {header: 'Company', bind: '$company'},
    {header: 'Phone', bind: '$phone'}
];

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

The binding expressions can address nested objects as well.

bind: '$contact.name'

Expressions

The binding expressions can be arbitrary javascript expressions and include calculations and external function calls.

bind: '$total/1000'

or

bind: '$qty * $price'

The $ and @ prefixes are replaced with references to the data fields and component properties. Everything else follows normal javascript rules, i.e. token without prefix will refer to the global function or variable.

bind: 'myFunction($value)'

Multiple properties

Normally, the string assigned to the bind property will be a binding expression for the default property (text). It is possible also to bind multiple properties using object syntax (name-value pairs).

bind: {
    text: '$countryName',
    icon: '$countryCode'
}