Class: UWA.Controls.DataGrid

UWA/Controls/DataGrid. UWA.Controls.DataGrid

new UWA.Controls.DataGrid(options)

Display a Data Grid.

Example
var dataGrid = new UWA.Controls.DataGrid({
className: 'table',
columns: [
   {
       text: 'Birthday',
       dataIndex: 'date',
       format: function (value) {
           return UWADate.strftime(value, '%X');
       },
       sortKey: function (value) {
           return value.getTime();
       }
   },
   {
       text: 'Name',
       dataIndex: 'name',
       sortKey: function (value) {
           return value.split(' ').slice(1).join(' ');
       }
   }
],
data:[
   { 'date': new Date(), 'users': 'Foo Bar'}
],
sortable: `true`
}).inject(widget.body);
`

Output HTML:
```html
<div class="uwa-datagrid table">
<table class="uwa-datagrid-table">
   <thead>
       <tr>
           <th>Birthday</th>
           <th>Name</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>2012 07 06</td>
           <td>Foo Bar</td>
       </tr>
   </tbody>
</table>
</div>
Parameters
Name Type Description
options Object

Options hash or a option/value pair.

Properties
Name Type Argument Default Description
className String <optional>
 ''

The DataGrid CSS class for theming
data String <optional>
 null

Grid data
columns Object <optional>
 null

Grid columns
sortable Boolean <optional>
 false

The DataGrid is sortable belong the columns
scrollerOptions Object <optional>
 {}

Options for scroller

Extends

  • UWA.Controls.Abstract

Index

Members

Methods

Members

<protected> defaultOptions

Properties:
Name Type Description
defaultOptions Object

The default controls options.

<protected> name

Properties:
Name Type Description
name String

control name. Defaults to 'uwa-datagrid'

<protected> dataGrid

Properties:
Name Type Description
dataGrid Array

List of data

columns

Properties:
Name Type Description
columns Array

List of columns

Methods

setScrollerSize(size)

Change the size of the grid.

Parameters
Name Type Description
size Object

an object with width and height properties, matching the width and height style values.

<protected> buildSkeleton()

Build main dom elements

<protected> initEvents()

Register an Event delegation for all dataGrid click events.

<protected> handleEvent(e)

Implements EventHandler interface (DOM2).

Parameters
Name Type Description
e UIEvent

Browser event

fillGrid()

Fill grid with data

fillHeader()

Fill header of grid

fillBody()

Fill body of grid

sortData() → {Array}

sort Data

Returns

data.

Type
Array

onOrderColumn(column)

Order column

Parameters
Name Type Description
column String

Column selected

updateData(columns, data)

Update data of the grid

Parameters
Name Type Description
columns Array

Columns.
data Array

Data

addScroller()

Add Scroller

updateScroller()

Update Scroller