Class zebkit.ui.grid.Grid
mixed with <zebkit.ui.grid.Metrics> <zebkit.ui.DecorationViews>
extends <zebkit.ui.Panel>
<zebkit.ui.grid>

Grid UI component class. The grid component visualizes "zebkit.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 zebkit.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("top", new zebkit.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:
zebkit.ui.grid.Grid ([model], [rows], [columns])

Parameters:
  • [model] <zebkit.data.Matrix | Array>

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

  • [rows] <Integer>

    a number of rows

  • [columns] <Integer>

    a number of columns




private <zebkit.draw.View> $getPosMarker ( )
private <Integer> $initialCellX ( )
private <Integer> $initialCellY ( )
public <Object> cellByLocation (x, y)
public void clearSelect ( )
public <zebkit.draw.View> getCellView (row, col)
public <Integer> getColPSWidth (col)
public <Integer> getColWidth (col)
public <Integer> getColX (row)
public <Integer> getColX (col)
protected <Object> getDataToEdit (row, col)
public <Integer> getGridColumns ( )
public <Integer> getGridRows ( )
protected <Integer> getLeftCaptionWidth ( )
public <Integer> getRowHeight (row)
public <Integer> getRowPSHeight (col)
protected <Integer> getTopCaptionHeight ( )
public <Boolean> isSelected (row, col)
public void makeVisible (row, col)
protected <Integer> pageSize (d)
protected void paintCellSelection (g, row, col, x, y)
protected void paintData (g)
protected void paintNet (g)
protected void paintPosMarker (g)
public void repaintRows (r1, r2)
public void select (row, col, [b])
public void setCellPadding (p)
public void setCellPaddings (t, l, b, r)
public void setColsWidth ([col], [len], w)
public void setColWidth (column, w)
public void setDefCellAlignments (ax, ay)
public void setDefCellXAlignment (ax)
public void setDefCellYAlignment (ay)
public void setDrawCaptionLines (s)
public void setDrawLines (hor, ver)
protected void setEditedData (row, col, an)
public void setEditorProvider (p)
public void setLeftCaption (title)
public void setLineColor (c)
public void setLineSize (s)
public void setModel (d)
public void setNavigationMode (mode)
public void setPosition (p)
public void setRowHeight (row, h)
public void setRowsHeight ([row], [len], h)
public void setTopCaption (title)
public void setUsePsMetric (b)
public void setViewProvider (p)
public void setViews (a)
public <Boolean> startEditing (row, col)
protected void stopEditing (applyData)


Inherited methods:
$setConstraints(c)    add(constr, d)    byConstraints([p], c)    byPath(path, [cb])    calcPreferredSize(target)    doLayout( )    fire(event, [path], [params])    focused( )    getBottom( )    getCanvas( )    getCellsVisibility( )    getComponentAt(x, y)    getGridCols( )    getHorPadding( )    getLeft( )    getPreferredSize( )    getPSColWidth(col)    getPSRowHeight(row)    getRight( )    getTop( )    getVerPadding( )    getXOrigin( )    getYOrigin( )    hasFocus( )    indexOf(c)    insert(i, constr, d)    invalidate( )    invalidateLayout( )    kidAdded(index, constr, l)    kidRemoved(i, l)    laidout( )    load(JSON)    off([eventName], [path], [cb])    on([eventName], [path], cb)    paintComponent(g)    paintViewAt(g, ax, ay, v)    properties([path], props)    property([path], name, value)    recalc( )    relocated(px, py)    remove(c)    removeAll( )    removeAt(i)    removeByConstraints(ctr)    removeMe([after])    repaint([x], [y], [w], [h])    requestFocus( )    requestFocusIn([timeout])    resized(pw, ph)    setAt(i, d)    setBackground(v)    setBorder([v])    setBottomPadding(bottom)    setBounds(x, y, w, h)    setByConstraints(constr, c)    setConstraints(ctr)    setEnabled(b)    setId(id)    setKids(a)    setLayout(m)    setLeftPadding(left)    setLocation(xx, yy)    setPadding(v)    setParent(o)    setPreferredSize(w, h)    setProperties([path], props)    setRightPadding(right)    setSize(w, h)    setTopPadding(top)    setVisible(b)    toBack( )    toFront( )    toPreferredHeight( )    toPreferredSize( )    toPreferredWidth( )    toView(target)    validate( )    validateMetric( )    vrp( )   


private <zebkit.draw.View> $getPosMarker ( )

Get position marker view taking in account focus state.


Returns: <zebkit.draw.View>

a position marker view

private <Integer> $initialCellX ( )

Initial (not scrolled) x coordinate of first cell


Returns: <Integer>

initial x coordinate

private <Integer> $initialCellY ( )

Initial (not scrolled) y coordinate of first cell


Returns: <Integer>

initial y coordinate

public <Object> cellByLocation (x, y)

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


Returns: <Object>

an object that contains detected grid cell row as "row" field and a grid column as "col" field. null is returned if no cell can be detected.

public chainable clearSelect ( )

Clear grid row or rows selection

public <zebkit.draw.View> getCellView (row, col)

Return a view that is used to render the given grid cell.


Parameters:
  • row <Integer>

    a grid cell row

  • col <Integer>

    a grid cell column


Returns: <zebkit.draw.View>

a cell view

public <Integer> getColPSWidth (col)

Get a preferred width the given column wants to have


Parameters:
  • col <Integer>

    a column


Returns: <Integer>

a preferred width of the given column

@Override zebkit.ui.grid.Metrics
public <Integer> getColWidth (col)

Get the given grid column width


Parameters:
  • col <Integer>

    a grid column


Returns: <Integer>

a width of the given column

public <Integer> getColX (row)

Get the given row top-left corner y coordinate


Parameters:
  • row <Integer>

    a row


Returns: <Integer>

a top-left corner y coordinate of the given column

public <Integer> getColX (col)

Get the given column top-left corner x coordinate


Parameters:
  • col <Integer>

    a column


Returns: <Integer>

a top-left corner x coordinate of the given column

protected <Object> getDataToEdit (row, col)

Fetch a data from matrix model that has to be edited


Parameters:
  • row <Integer>

    a row

  • col <Integer>

    a column


Returns: <Object>

a matrix model data to be edited

public <Integer> getGridColumns ( )

Get number of columns in the given grid


Returns: <Integer>

a number of columns

@Override zebkit.ui.grid.Metrics
public <Integer> getGridRows ( )

Get number of rows in the given grid


Returns: <Integer>

a number of rows

protected <Integer> getLeftCaptionWidth ( )

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


Returns: <Integer>

a left caption width

@Override zebkit.ui.grid.Metrics
public <Integer> getRowHeight (row)

Get the given grid row height


Parameters:
  • row <Integer>

    a grid row


Returns: <Integer>

a height of the given row

public <Integer> getRowPSHeight (col)

Get a preferred height the given row wants to have


Parameters:
  • col <Integer>

    a row


Returns: <Integer>

a preferred height of the given row

protected <Integer> getTopCaptionHeight ( )

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


Returns: <Integer>

a top caption height

public <Boolean> isSelected (row, col)

Checks if the given grid cell is selected


Parameters:
  • row <Integer>

    a grid row

  • col <Integer>

    a grid col


Returns: <Boolean>

true if the given row is selected

public chainable makeVisible (row, col)

Make the given cell visible.


Parameters:
  • row <Integer>

    a cell row

  • col <Integer>

    a cell column

protected <Integer> pageSize (d)

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


Returns: <Integer>

a page size in rows to be scrolled up or down

protected void paintCellSelection (g, row, col, x, y)

Paint a selection for the given grid cell


Parameters:
  • g <CanvasRenderingContext2D>

    a graphical 2D context

  • row <Integer>

    a cell row.

  • col <Integer>

    a cell column.

  • x <Integer>

    a cell x location.

  • y <Integer>

    a cell y location.

protected void paintData (g)

Paint grid data


Parameters:
protected void paintNet (g)

Paint vertical and horizontal grid component lines


Parameters:
protected void paintPosMarker (g)

Paint position marker.


Parameters:
public chainable 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

public chainable select (row, col, [b])

Mark as selected or unselected the given grid cell


Parameters:
  • row <Integer>

    a grid row

  • col <Integer>

    a grid row,

  • [b] <Boolean>

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

public chainable setCellPadding (p)

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


Parameters:
  • p <Integer>

    a top, left, right and bottom cell paddings

public chainable 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 right cell padding

public chainable setColsWidth ([col], [len], w)

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


Parameters:
  • [col] <Integer>

    start column

  • [len] <Integer>

    number of columns whose height has to be set

  • w <Integer>

    a width

@Override zebkit.ui.grid.Metrics
public chainable 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

public chainable setDefCellAlignments (ax, ay)

Set the grid cell default horizontal and vertical alignments.


Parameters:
  • ax <String>

    a horizontal alignment. Use "left", "right" or "center"

  • ay <String>

    a horizontal alignment. Use "top", "bottom" or "center" as the alignment value.

public chainable setDefCellXAlignment (ax)

Set the grid cell content default horizontal alignment.


Parameters:
  • ax <String>

    a horizontal alignment. Use "left", "right" or "center" as the alignment value.

public chainable setDefCellYAlignment (ay)

Set the grid cell default vertical alignment.


Parameters:
  • ay <String>

    a vertical alignment. Use "top", "bottom" or "center" as the alignment value.

public chainable setDrawCaptionLines (s)

Set the given grid lines size


Parameters:
  • s <Integer>

    a size

public chainable 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

protected void setEditedData (row, col, an)

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

public chainable setEditorProvider (p)

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


Parameters:
  • p <Object>

    an editor provider

public chainable setLeftCaption (title)

Set the grid left caption titles


Parameters:
  • title <Object> (*..n)

    number of titles

public chainable setLineColor (c)

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


Parameters:
public chainable setLineSize (s)

Set the given grid lines size


Parameters:
  • s <Integer>

    a size

public chainable setModel (d)

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


Parameters:
  • d <zebkit.data.Matrix | Array>

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

public chainable setNavigationMode (mode)

Set navigation mode. It is possible to use "row" or "cell" navigation mode. In first case navigation happens over row, in the second case navigation happens over cell.


Parameters:
  • mode <String>

    a navigation mode ("row" or "cell")

public chainable setPosition (p)

Set the position controller.


Parameters:
@Override zebkit.ui.grid.Metrics
public chainable 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

public chainable setRowsHeight ([row], [len], h)

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


Parameters:
  • [row] <Integer>

    start row

  • [len] <Integer>

    number of rows whose height has to be set

  • h <Integer>

    a height

public chainable setTopCaption (title)

Set the grid top caption titles


Parameters:
  • title <Object> (*..n)

    number of titles

public chainable setUsePsMetric (b)

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


Parameters:
  • b <Boolean>

    use true to use preferred size

public chainable 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:
@Override zebkit.ui.DecorationViews
public void 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:

    {
       "focusOnSelect" : <view to render selected row for the grid that holds focus>,
       "focusOffSelect": <view to render selected row for the grid that doesn't hold focus>
    }
public <Boolean> 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


Returns: <Boolean>

true if a cell editor has been initiated, otherwise returns false.

protected void stopEditing (applyData)

Stop editing a grid cell.


Parameters:
  • applyData <Boolean>

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



Inherited attributes:
public zebkit.draw.View bg    public zebkit.draw.View border    public Boolean canHaveFocus    public Object constraints    public Integer height    public Boolean isEnabled    public Boolean isValid    public Boolean isVisible    public Array kids    public zebkit.layout.Layout layout    public zebkit.layout.Layoutable parent    public Integer width    public Integer x    public Integer y   



public <Integer> cellInsetsBottom

Grid cell bottom padding

public <Integer> cellInsetsLeft

Grid cell left padding

public <Integer> cellInsetsRight

Grid cell right padding

public <Integer> cellInsetsTop

Grid cell top padding

public <String> defCellColor

Default cell background color

public <String> defXAlignment

Default cell content horizontal alignment

public <String> defYAlignment

Default cell content vertical alignment

public <Boolean> drawCaptionLines

Indicate if caption lines have to be rendered

public <Boolean> drawHorLines

Indicate if horizontal lines have to be rendered

public <Boolean> drawVerLines

Indicate if vertical lines have to be rendered

public <Integer> editingCol

Currently editing column. -1 if no column is editing

public <Integer> editingRow

Currently editing row. -1 if no row is editing

public <Boolean> isUsePsMetric /* Overwritten from isUsePsMetric */

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

public <zebkit.ui.grid.GridCaption | zebkit.ui.grid.CompGridCaption> leftCaption

Reference to left caption component

public <String> lineColor

Line color

public <Integer> lineSize /* Overwritten from lineSize */

Grid line size

public <String> navigationMode

Grid navigation mode

public <Boolean> paintPosMarkerOver

Defines if the pos marker has to be renederd over rendered data

public <zebkit.util.Position> position

Virtual cursor position controller

public <zebkit.ui.grid.GridCaption | zebkit.ui.grid.CompGridCaption> topCaption

Reference to top caption component




rowSelected

Fire when a grid row selection state has been changed

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

Parameters:
  • grid <zebkit.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