Grid API (WebFX)

WebFXGrid

This is the base class, representing the grid.

Syntax

new WebFXGrid(aData);
new WebFXGrid(nRows, nCols);

Parameters

Name	Type	Descripton
`aData`	`String[][]`	A two dimensional array containing the number of rows and columns desired. Unless the array is empty the values found will be used to populate the appropiate cells.
`nRows`	`Number`	Desired number of rows
`nCols`	`Number`	Desired number of columns

Static Methods

Name	Description

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

addCol

Syntax

object.addCol([sValue])

Arguments

Name	Type	Descripton
`sValue`	`String`	Optional. If specified this value will be used in the new cells.

Return Type

void

Adds a new column to the grid

addRow

Syntax

object.addRow([p0 [, sid]])

Arguments

Name	Type	Descripton
`p0`	`Number[]`	Optional. Can either be a number to indicate the desired number of cells or an array containing data to populate the row. If not specified an emty row will be added with the same number of cells as the grid has.
`sid`	`Number[]`	Optional. If specified this value will be used in the new cells.

Return Type

void

Adds a new column to the grid

calcSize

Syntax

object.calcSize()

Arguments

No Arguments.

Return Type

void

Re-Calculates the size of the grid itself and all it's sub elements

dump

Syntax

object.dump([b])

Arguments

Name	Type	Descripton
`b`	`Boolean`	Optional. If true all cells will be dumped, otherwise only the modified ones will be included. The default value is `false`.

Return Type

String

Dumps the content of the grid as a long string, formatted as a query string, making it suitable for usage with a back-end. See the backend introduction for further information about this method.

dumpMatrix

Syntax

object.dumpMatrix()

Arguments

No Arguments.

Return Type

String[][]

Deprecated - see getGridData.

find

Syntax

object.find(condition)

Arguments

Name	Type	Descripton
`condition`	`String`	The condition to match (indexOf will be used, not very sophisticated)

Return Type

void

Highlights the first row containing a cell that matches the supplied condition, It's quite useless, subclass it if you need a proper search function.

focus

Syntax

object.focus()

Arguments

No Arguments.

Return Type

void

Changes focus to the grid

getColSizes

Syntax

object.getColSizes()

Arguments

No Arguments.

Return Type

Number[]

Returns an array containing the column sizes.

getGridData

Syntax

object.getGridData()

Arguments

No Arguments.

Return Type

String[][]

Returns the content of the grid as a two dimensional array.

getSelected

Syntax

object.getSelected()

Arguments

No Arguments.

Return Type

Element

Returns a reference to the selected rows <tr> element.

getShowSid

Syntax

object.getShowSid()

Arguments

No Arguments.

Return Type

Boolean

Returns the ShowSid flag, see setShowSid.

removeRow

Syntax

object.removeRow([row])

Arguments

Name	Type	Descripton
`row`	`Number`	Optional. Row to remove

Return Type

void

Removes the specified row, or if no row is specified the selected one.

selectFirst

Syntax

object.selectFirst()

Arguments

No Arguments.

Return Type

void

Selects the first row.

selectLast

Syntax

object.selectLast()

Arguments

No Arguments.

Return Type

void

Selects the last row.

setAutoExpand

Syntax

object.setAutoExpand(b)

Arguments

Name	Type	Descripton
`b`	`Boolean`	Flag

Return Type

void

Sets the autoExpand flag. If true a new row will automatically be added to the grid once the last one is modified. Default is false.

setCellStyles

Syntax

object.setCellStyles(a)

Arguments

Name	Type	Descripton
`a`	`String[][]`	A two dimensional array containing css strings for each cell

Return Type

void

Assigns an individual css string to each cell

setCellValue

Syntax

object.setCellValue(iRow, iCell [, sValue [, iIndex]])

Arguments

Name	Type	Descripton
`iRow`	`Number`	The row index number
`iCell`	`Number`	The cell index number
`sValue`	`String`	Optional. The value
`iIndex`	`Number`	Optional. If the cell consists of a drop down, use this to set the value by the option index rather than id, as setting the value would.

Return Type

void

Sets the value of a cell

setColDefault

Syntax

object.setColDefault(a)

Arguments

Name	Type	Descripton
`a`	`String[]`	An array containing the values.

Return Type

void

Sets the default values for each column

setColFlags

Syntax

object.setColFlags(a)

Arguments

Name	Type	Descripton
`a`	`Number[]`	An array containing the flags, each flag is a bitmap according to this legend: Bit 1 - Read only Bit 2 - Mandatory Bit 4 - Mask data (password field) Bit 8 - Hidden

Return Type

void

Sets the column flags, preferably used when creating the grid.

setColLengths

Syntax

object.setColLengths(a)

Arguments

Name	Type	Descripton
`a`	`Number[]`	An array with the lengths to use. Preferably used when creating the grid.

Return Type

void

Sets the maximum allowed length for each column. (Only applies to text fields, equivalent of the maxlength property)

setColSizes

Syntax

object.setColSizes(a)

Arguments

Name	Type	Descripton
`a`	`String[]`	An array with the sizes to use, append unit for non-pixel arguments. Preferably used when creating the grid.

Return Type

void

Sets the column sizes

setColTypes

Syntax

object.setColTypes(a)

Arguments

Name	Type	Descripton
`a`	`Number[]`	An array containing the types. 1 - Int 2 - String 3 - Date 4 - Float

Return Type

void

Sets the column types, limiting and verifying the content. For example a column with the type int may only contain digits, while a String Column may contain anything. The column type will also affect the sorting functionality. Preferably used when creating the grid.

setHeaders

Syntax

object.setHeaders(a)

Arguments

Name	Type	Descripton
`a`	`String[]`	An array with the headers to use

Return Type

void

Sets the column headers, preferably used when creating the grid.

setHideBoxOnBlur

Syntax

object.setHideBoxOnBlur(b)

Arguments

Name	Type	Descripton
`b`	`Boolean`	Flag

Return Type

void

Sets the hideBoxOnBlur flag. If true the edit box will be hidden on blur. Default is false.

setId

Syntax

object.setId(i, id)

Arguments

Name	Type	Descripton
`i`	`Number`	Row index for the desired row
`id`	`Number`	The new id number

Return Type

void

Sets the id for a certain row

setLinkData

Syntax

object.setLinkData(a)

Arguments

Name	Type	Descripton
`a`	`String[][]`	A set of arrays containing the link data to use

Return Type

void

Sets the link data (presented as a drop down menu) for each column, see the usage section for further information. Preferably used when creating the grid.

setNewIds

Syntax

object.setNewIds(a)

Arguments

Name	Type	Descripton
`a`	`Number[]`	An array with the ids to use

Return Type

void

Sets the id for on or more rows that doesn't have any, used to assign ids to rows once they have been created. The value -1 is treated as a fag indicating that the save operation failed, thus marking the row as not saved.

setRowsServerIds

Syntax

object.setRowsServerIds(a)

Arguments

Name	Type	Descripton
`a`	`Number[]`	An array with the ids to use

Return Type

void

Sets the id for all rows, preferably used when creating the grid.

setShowSid

Syntax

object.setShowSid(b)

Arguments

Name	Type	Descripton
`b`	`Boolean`	Flag

Return Type

void

Sets the ShowSid flag. If true the id column will display the row ids, if false the row numbers will be displayed, and every second row will be a slightly different color.

setSize

Syntax

object.setSize(w, h)

Arguments

Name	Type	Descripton
`w`	`Number`	The desired with
`h`	`Number`	The desired height

Return Type

void

Resize the grid using the supplied parameters, will automatically invoke the calcSize method afterwards.

setUri

Syntax

object.setUri(s)

Arguments

Name	Type	Descripton
`s`	`String`	Any valid uri

Return Type

void

Sets the URI that will be used as a base for the dump method, the dump data will be appended to whatever this is set to. See the backend introduction for further information.

sort

Syntax

object.sort(col)

Arguments

Name	Type	Descripton
`col`	`Number`	Column index to sort by.

Return Type

void

Sorts the grid by one of the columns.

toString

Syntax

object.toString()

Arguments

Name	Type	Descripton

Return Type

String

This is the method that generates the actual HTML code for the grid.

Fields

Name	Type	Descripton
`autoExpand`	`Boolean`	If true a new row will automatically be added to the grid once the last one is modified. Default is false.
`colDefault`	`String[]`	Read only. An array containing the column defaults, use setColDefault to modify.
`colFlags`	`Number[]`	Read only. An array containing the column flags, use setColFlags to modify.
`colLengths`	`Number[]`	Read only. An array containing the column lengths, use setColLengths to modify.
`colLinkData`	`String[]`	Read only. An array containing the column link data, use setLinkData to modify.
`cols`	`Number`	Read only. The number of columns in the grid.
`colSizes`	`Number[]`	Read only. An array containing the column sizes, use setColSizes to modify.
`colTypes`	`Number[]`	Read only. An array containing the column types, use setColTypes to modify.
`defColSize`	`Number`	The default column size.
`flags`	`Number`	Permission flags, affecting the entire grid according to this bitmap: 1 - update, 2 - insert, 4 - delete - The default value is 7.
`groupByFirst`	`Boolean`	Deprecated. If set to true the rows will be grouped by the first column, collapsing the cells with matching values. - This field is deprecated and will be removed in a future version, however no replacement yet implemented.
`headers`	`String[]`	Read only. An array containing the column headers, use setHeaders to modify.
`hideBoxOnBlur`	`Boolean`	If true the edit box will be hidden on blur. Default is false.
`minimal`	`Number`	The minimal with of a cell in edit mode, if the width of the column is less than this value, the editbox will span additional columns until this value has been reached.
`resizeArea`	`Number`	The width of the area between columns in the grid header that can be grabbed, and used to resize the columns. Default value is 7.
`resizeAreaV`	`Number`	Same as resizeArea however this indicates the size of the area in which the cursor will change to indicate resizable rather than the actual area. Default value is 5.
`rows`	`WebFXGridRow[]`	Read only. An array containing the rows of the grid.

Events

Name	Descripton
`onChange`	Fires when a change has been made.
`onColResize`	Fires when a column has been resized.
`onNewRow`	Fires when a new row has been added.
`onSelect`	Fires when a row has been selected.
`onSort`	Fires when the grid is sorted.

Remarks

None.

WebFXGridRow

This class represents a row.

Syntax

new WebFXGridRow(aData[, sid[, bUnescapeData]]);
new WebFXGridRow([nCols[, sid[, bUnescapeData]]]);

Parameters

Name	Type	Descripton
`aData`	`String[]`	An array containing the same number of elements as the row should have columns. Unless the array is empty the values found will be used to populate the appropiate cells.
`nCols`	`Number`	Desired number of columns
`sid`	`Number`	The row sid, or server id.
`bUnescapeData`	`Boolean`	If true the supplied data will be parsed through the unescape function before used to populate the cells. Default is false."

Static Methods

Name	Description

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

deselect

Syntax

object.deselect([b])

Arguments

Name	Type	Descripton
`b`	`Boolean`	Optional. If specified the row will not be blured if any of its cells are in edit mode.

Return Type

void

Restores the original style of the row.

out

Syntax

object.out()

Arguments

Name	Type	Descripton

Return Type

void

Disables the mouse over effect. Automatically executed on mouse out.

over

Syntax

object.over()

Arguments

Name	Type	Descripton

Return Type

void

Enables a mouse over effect that highlights the row. Automatically executed on mouse over.

select

Syntax

object.select()

Arguments

Name	Type	Descripton

Return Type

void

Selects the row and updates the style of it to indicate that it has been selected. Also executes the deselect method on the previously selected row and fires the onSelect event.

Fields

Name	Type	Descripton
`cells`	`WebFXGridCells[]`	Read only. An array containing the cells the row consists of.
`id`	`String`	Read only. A unique name used to identify the html element that will be generated.
`parent`	`WebFXGrid`	Read only. A reference to the parent grid.
`sid`	`Number`	The sid, or server id.

Events

Name	Descripton
None.

Remarks

None.

WebFXGridCell

This class represents a cell.

Syntax

new WebFXGridCell([sValue]);

Parameters

Name	Type	Descripton
`sValue`	`String`	The cell value

Static Methods

Name	Description

Static Fields

Name	Type	Descripton
None.

Methods

Name Description

click

Syntax

object.click()

Arguments

Name	Type	Descripton

Return Type

void

Enables edit mode for the cell. This method is executed when a cell is clicked on, hence the name.

Fields

Name	Type	Descripton
`id`	`String`	Read only. A unique name used to identify the html element that will be generated.
`index`	`Number`	Read only. The cell index.
`parent`	`String`	Read only. A reference to the parent row.
`style`	`String`	A css string describing the style of the cell.
`value`	`String`	Read only. The cell value. To modify use the WebFXGrid setCellValue method.

Events

Name	Descripton
None.

Remarks

None.

History & Introduction
Usage
API
Backend - Introduction
Backend - Perl (cgi/mod_perl)
Backend - C++ (cgi/isapi)
Backend - Java (servlet)
Demo
Download

Author: Emil A Eklund