Control.Datagrid

Before proceeding you may want to read our getting started page.

What does this control do?

Displays a datagrid, the information to fill this datagrud is received via an specially formatted response.

For an usage example check out the Control.Datagrid demo.

How to use it

In order to use this control, paste this line of javascript right at the beginning of your script tag:

Meteora.uses('Control.Datagrid');

You'll need a div that will act as a container for the Datagrid.

<div id="datagrid-container"></div>

You may then by able to invoke the Datagrid this way:

new Datagrid(
 
  // ELEMENT
  // The Datagrid will be nested inside this element.
  // You may use an element's id or an HTML element's reference here.
  'datagrid-container',

  // DATA SOURCE
  // A relative url that will contain the data the datagrid
  // is going to be fill with.
  '/path/to/server-side/json'

);

Here is a server side response example:

[
  // Column names
  {
    'id':           'ID',
    'firstField':   'First column',
    'secondField':  'Second column'
  },
  // First row...
  {
    'id':           '1',
    'firstField':   'First column, first row',
    'secondField':  'Second column, first row'
  },
  // Second row...
  {
    'id':           '2',
    'firstField':   'First column, second row',
    'secondField':  'Second column, second row'
  }
]
To generate this response using PHP you'll have to write something like this:
$json->response(
  array(
    array(
      'id'            => 'ID',
      'firstColumn'   => 'First column',
      'secondColumn'  => 'Second column'
    ),
    array(
      'id'            => '1',
      'firstColumn'   => 'First column, first row',
      'secondColumn'  => 'Second column, first row'
    ),
    array(
      'id'            => '2',
      'firstColumn'   => 'First column, second row',
      'secondColumn'  => 'Second column, second row'
    )
  )
);