Zebra API Doc

zebra.ui.grid.Grid Class

Extends zebra.ui.Panel

Grid UI component class. The grid component visualizes "zebra.data.Matrix" data model. Grid cell visualization can be customized by defining and setting an own view provider. Grid component supports cell editing. Every existent UI component can be configured as a cell editor by defining an own editor provider.

   // create a grid that contains three rows and tree columns
   var grid  = new zebra.ui.grid.Grid([
       [ "Cell 1.1", "Cell 1.2", "Cell 1.3"],
       [ "Cell 2.1", "Cell 2.2", "Cell 2.3"],
       [ "Cell 3.1", "Cell 3.2", "Cell 3.3"]
   ]); 

   // add the top caption 
   grid.add(zebra.layout.TOP, new zebra.ui.grid.GridCaption([
       "Caption title 1", "Caption title 2", "Caption title 3"
   ]));

   // set rows size
   grid.setRowsHeight(45);

Grid can have top and left captions.

Constructor

zebra.ui.grid.Grid

(
  • [model]
  • [rows]
  • [columns]
)

Parameters:

  • [model] zebra.data.Matrix | Array optional

    a matrix model to be visualized with the grid component. It can be an instance of zebra.data.Matrix class or an array that contains embedded arrays. Every embedded array is a grid row.

  • [rows] Integer optional

    a number of rows

  • [columns] Integer optional

    a number of columns

Methods

cellByLocation

(
  • x
  • y
)
Array

Detect a cell by the given location

Parameters:

  • x Integer

    a x coordinate relatively the grid component

  • y Integer

    a y coordinate relatively the grid component


Return: Array

an array that contains detected grid cell row as the first element and a grid column as the second element. The row and column values are set to -1 if no grid cell can be found at the given location

clearSelect

()

Clear grid row or rows selection

getCellsVisibility

() zebra.ui.grid.CellsVisibility

Inherited from zebra.ui.grid.Metrics:

Get a structure that describes a grid component columns and rows visibility


Return: zebra.ui.grid.CellsVisibility

a grid cells visibility

getColPSWidth

(
  • col
)
Integer

Get a preferred width the given column wants to have

Parameters:

  • col Integer

    a column


Return: Integer

a preferred width of the given column

getColWidth

(
  • col
)
Integer

Get the given grid column width

Parameters:

  • col Integer

    a grid column


Return: Integer

a width of the given column

getColX

(
  • col
)
Integer

Get the given column top-left corner x coordinate

Parameters:

  • col Integer

    a column


Return: Integer

a top-left corner x coordinate of the given column

getColX

(
  • row
)
Integer

Get the given row top-left corner y coordinate

Parameters:

  • row Integer

    a row


Return: Integer

a top-left corner y coordinate of the given column

getDataToEdit

(
  • row
  • col
)
Object protected

Fetch a data from matrix model that has to be edited

Parameters:

  • row Integer

    a row

  • col Integer

    a column


Return: Object

a matrix model data to be edited

getEditingCell

() Array

Get currently editing grid cell


Return: Array

am editing grid cell row and column as the first and the second array elements correspondingly. null if there is no any editing grid cell

getGridCols

() Integer

Inherited from zebra.ui.grid.Metrics:

Get number of columns in a grid component


Return: Integer

a number of columns

getGridColumns

() Integer

Get number of columns in the given grid


Return: Integer

a number of columns

getGridRows

() Integer

Get number of rows in the given grid


Return: Integer

a number of rows

getLeftCaptionWidth

() Integer protected

Get left grid caption width. Return zero if no left caption element has been defined


Return: Integer

a left caption width

getPSColWidth

(
  • col
)
Integer

Inherited from zebra.ui.grid.Metrics:

Get the given column preferred width of a grid component

Parameters:

  • col Integer

    a column index


Return: Integer

a column preferred width

getPSRowHeight

(
  • row
)
Integer

Inherited from zebra.ui.grid.Metrics:

Get the given row preferred height of a grid component

Parameters:

  • row Integer

    a row index


Return: Integer

a row preferred height

getRowHeight

(
  • row
)
Integer

Get the given grid row height

Parameters:

  • row Integer

    a grid row


Return: Integer

a height of the given row

getRowPSHeight

(
  • col
)
Integer

Get a preferred height the given row wants to have

Parameters:

  • col Integer

    a row


Return: Integer

a preferred height of the given row

getTopCaptionHeight

() Integer protected

Get top grid caption height. Return zero if no top caption element has been defined


Return: Integer

a top caption height

getXOrigin

() Integer

Inherited from zebra.ui.grid.Metrics:

Get a x origin of a grid component. Origin indicates how the grid component content has been scrolled


Return: Integer

a x origin

getYOrigin

() Integer

Inherited from zebra.ui.grid.Metrics:

Get a y origin of a grid component. Origin indicates how the grid component content has been scrolled


Return: Integer

a y origin

isSelected

(
  • row
)
Boolean

Checks if the given grid row is selected

Parameters:

  • row Integer

    a grid row


Return: Boolean

true if the given row is selected

pageSize

(
  • d
)
Integer protected

Calculate number of rows to be scrolled up or down to scroll one page

Parameters:

  • d Integer

    a direction. 1 for scroll down and -1 for scroll up


Return: Integer

a page size in rows to be scrolled up or down

paintData

(
  • g
)
protected

Paint grid data

Parameters:

  • g 2DContext

    a HTML5 canvas 2d context

paintNet

(
  • g
)
protected

Paint vertical and horizontal grid component lines

Parameters:

  • g 2DContext

    a HTML5 canvas 2d context

repaintRows

(
  • r1
  • r2
)

Repaint range of grid rows

Parameters:

  • r1 Integer

    the first row to be repainted

  • r2 Integer

    the last row to be repainted

select

(
  • row
  • [b]
)

Mark as selected or unselected the given grid row.

Parameters:

  • row Integer

    a grid row

  • [b] Boolean optional

    a selection status. true if the parameter has not been specified

setCellPadding

(
  • p
)

Set the given top, left, right, bottom cell paddings

Parameters:

  • p Integer

    a top, left, right and bottom cell paddings

setCellPaddings

(
  • t
  • l
  • b
  • r
)

Set the given top, left, right, bottom cell paddings

Parameters:

  • t Integer

    a top cell padding

  • l Integer

    a left cell padding

  • b Integer

    a bottom cell padding

  • r Integer

    a rightcell padding

setColsHeight

(
  • [col]
  • [len]
  • w
)

Set the given width for all or the specified range of columns

Parameters:

  • [col] Integer optional

    start column

  • [len] Integer optional

    number of columns whose height has to be set

  • w Integer

    a width

setColWidth

(
  • column
  • w
)

Set the given width for the specified grid column. The method has no effect if the grid component is forced to use preferred size metric.

Parameters:

  • column Integer

    a grid column

  • w Integer

    a width of the grid column

setDrawLines

(
  • hor
  • ver
)

Set if horizontal and vertical lines have to be painted

Parameters:

  • hor Boolean

    true if horizontal lines have to be painted

  • ver Boolean

    true if vertical lines have to be painted

setEditedData

(
  • row
  • col
  • an
)
protected

Apply the given edited data to grid matrix model

Parameters:

  • row Integer

    a row

  • col Integer

    a column

  • an Object

    edited matrix model data to be applied

setEditorProvider

(
  • p
)

Set the given editor provider. Editor provider is a way to customize cell editing.

Parameters:

  • p Object

    an editor provider

setLineColor

(
  • c
)

Set the given color to render the grid vertical and horizontal lines

Parameters:

  • c String

    a color

setLineSize

(
  • s
)

Set the given grid lines size

Parameters:

  • s Integer

    a size

setModel

(
  • d
)

Set the given matrix model to be visualized and controlled with the grid component

Parameters:

  • d zebra.data.Matrix | Array

    a model passed as an instance of zebra matrix model or an array that contains model rows as embedded arrays.

setRowHeight

(
  • row
  • h
)

Set the given height for the specified grid row. The method has no effect if the grid component is forced to use preferred size metric.

Parameters:

  • row Integer

    a grid row

  • h Integer

    a height of the grid row

setRowsHeight

(
  • [row]
  • [len]
  • h
)

Set the given height for all or the specified range of rows

Parameters:

  • [row] Integer optional

    start row

  • [len] Integer optional

    number of rows whose height has to be set

  • h Integer

    a height

setUsePsMetric

(
  • b
)

Force to size grid columns and rows according to its preferred size

Parameters:

  • b Boolean

    use true to use preferred size

setViewProvider

(
  • p
)

Set the given cell view provider. Provider is a special class that says how grid cells content has to be rendered, aligned, colored

Parameters:

  • p Object

    a view provider

setViews

(
  • a
)

Set number of views to render different grid component elements

Parameters:

  • a Object

    set of views as dictionary where key is a view name and the value is a view instance, string (for color, border), or render function. The following view elements can be passed:

    {
       "onselection" : <view to render selected row for the grid that holds focus>,   
       "offselection": <view to render selected row for the grid that doesn't hold focus>
    }

startEditing

(
  • row
  • col
)

Start editing the given grid cell. Editing is initiated only if an editor provider has been set and the editor provider defines not-null UI component as an editor for the given cell.

Parameters:

  • row Integer

    a grid cell row

  • col Integer

    a grid cell column

stopEditing

(
  • applyData
)
protected

Stop editing a grid cell.

Parameters:

  • applyData Boolean

    true if the edited data has to be applied as a new grid cell content

Attributes

cellInsetsBottom

Integer readonly

Grid cell bottom padding

Default: 1

cellInsetsLeft

Integer readonly

Grid cell left padding

Default: 2

cellInsetsRight

Integer readonly

Grid cell right padding

Default: 2

cellInsetsTop

Integer readonly

Grid cell top padding

Default: 1

defCellColor

String

Default cell background color

Default: pkg.DefViews.cellBackground

defXAlignment

Integer

Default cell content horizontal alignment

Default: zebra.layout.LEFT

defYAlignment

Integer

Default cell content vertical alignment

Default: zebra.layout.CENTER

drawHorLines

Boolean readonly

Indicate if horizontal lines have to be rendered

Default: true

drawVerLines

Boolean readonly

Indicate if vertical lines have to be rendered

Default: true

editingCol

Integer readonly

Currently editing column. -1 if no column is editing

Default: -1

editingRow

Integer readonly

Currently editing row. -1 if no row is editing

Default: -1

isUsePsMetric

Boolean readonly

Indicate if size of grid cells have to be calculated automatically basing on its preferred heights and widths

Default: false

leftCaption

zebra.ui.grid.GridCaption | zebra.ui.grid.CompGridCaption readonly

Reference to left caption component

Default: null

lineColor

String readonly

Line color

Default: gray

lineSize

Integer

Grid line size

Default: 1

position

zebra.util.Position readonly

Virtual cursor position controller

topCaption

zebra.ui.grid.GridCaption | zebra.ui.grid.CompGridCaption readonly

Reference to top caption component

Default: null

Events

rowSelected

Fire when a grid row selection state has been changed

   grid.bind(function(grid, row, count, status) {
       ... 
   });

Event Parameters:

  • grid zebra.ui.grid.Grid

    a grid that triggers the event

  • row Integer

    a first row whose selection state has been updated. The row is -1 if all selected rows have been unselected

  • count Integer

    a number of rows whose selection state has been updated

  • status Boolean

    a status. true means rows have been selected