%META:TOPICPARENT{name="OATDOCIndex"}%
---+ grid.js

Advanced grid (table) control.

%TOC%

---++ Objects

---+++ OAT.Grid(element, optionsObject)

Creates a <tt>grid</tt> as a child of <tt>element</tt>.<tt>optionsObject</tt> may contain:

   * <tt>*autoNumber*</tt> - Grid will automatically add the first auto-numbered column
   * <tt>*rowOffset*</tt> - starting offset for auto-numbered column
   * <tt>*allowColumnHiding*</tt> - user can toggle column visibility at runtime
   * <tt>*sortFunc*</tt> - custom user-specified sorting routine
   * <tt>*imagePath*</tt> - path to images (with trailing slash)
   * <tt>*reorderNotifier*</tt> - routine to be called when column reordering occurs

---++ Methods

---+++ OAT.Grid::createRow(data, [index])

Adds a row. If <tt>index</tt> is present, it specifies at which index the new row should be inserted.<tt>Data</tt> is an array of either values or objects. If objects are used, they should contain:

   * <tt>*value*</tt> - cell value
   * <tt>*align*</tt> - one of ALIGN_ constants

---+++ OAT.Grid::createHeader(data)

Creates a header row. <tt>Data</tt> is an array of either values or objects. If objects are used, they should contain:

   * <tt>*value*</tt> - cell value
   * <tt>*sortable*</tt> - whether this column is sortable
   * <tt>*draggable*</tt> - whether this column is draggable
   * <tt>*resizable*</tt> - whether this column is resizable
   * <tt>*align*</tt> - one of <tt>ALIGN_</tt> constants
   * <tt>*sort*</tt> - one of <tt>SORT_</tt> constants
   * <tt>*type*</tt> - one of <tt>TYPE_</tt> constants

---+++ OAT.Grid::appendHeader(data, [index])

Adds a new header cell. If <tt>index</tt> is present, it specifies at which index the new cell should be inserted.<tt>Data</tt> are in the same format as in <tt>OAT.Grid::createHeader().</tt>

---+++ OAT.Grid::fromTable(table)

Converts an existing <tt>table</tt> into a grid.

---+++ OAT.Grid::row::addCell(data, [index])

Adds one cell to one row. If <tt>index</tt> is present, it specifies at which index new cell should be inserted. <tt>Data</tt> are in the same format as in <tt>OAT.Grid::createRow()</tt>. This method should be called as <tt>grid.rows[i].addCell()</tt>.

---+++ OAT.Grid::removeColumn(index)

Removes one column specified by <tt>index</tt> from the grid.

---+++ OAT.Grid::clearData()

Clears the grid (preserves header).

---+++ OAT.Grid::rows[index].select()

Selects row.

---+++ OAT.Grid::rows[index].deselect()

Deselects row.

---++ Constants    

---+++ OAT.GridData.LIMIT

Sets the minimal width of the column.

---+++ OAT.GridData.ALIGN_

Column alignment.

   * <tt><b>OAT.GridData.ALIGN_CENTER</b></tt> 
   * <tt><b>OAT.GridData.ALIGN_LEFT</b></tt> 
   * <tt><b>OAT.GridData.ALIGN_RIGHT</b> </tt>

---+++ OAT.GridData.SORT_

Column sorting order.

   * <tt><b>OAT.GridData.SORT_NONE</b></tt>
   * <tt><b>OAT.GridData.SORT_ASC</b></tt>
   * <tt><b>OAT.GridData.SORT_DESC</b> </tt>

---+++ OAT.GridData.TYPE_

Constants specifying the data type in a column. They affect sorting - string or numeric sorts will be used based on these constants. When set to auto, simple detection test (parsing a float of the first row) will be performed.

   * <tt><b>OAT.GridData.TYPE_AUTO</b></tt> 
   * <tt><b>OAT.GridData.TYPE_STRING</b></tt>
   * <tt><b>OAT.GridData.TYPE_NUMERIC</b></tt> 

---++ CSS classes

---+++ .grid

CSS class of grid table element.

---+++ .even

CSS class of even and odd rows.

---+++ .odd

CSS class of even and odd rows.

---+++ .hover

CSS class of hovered row.

---+++ .index

CSS class of the first column (index) when auto numbering option is active.

---+++ .header_value

CSS class of the header (first row) column.

---+++ .row_value

CSS class of a regular data column.

---++ Example

<verbatim>
myGridInstance.rows[index].select(); 
myGridInstance.rows[index].deselect(); 
</verbatim>

CategoryDocumentation CategoryOAT CategoryOpenSource