WebFXGrid

This is the base class, representing the grid.

Syntax

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

Parameters

NameTypeDescripton
aDataString[][] 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.
nRowsNumberDesired number of rows
nColsNumberDesired number of columns

Static Methods

NameDescription

Static Fields

NameTypeDescripton
None.

Methods

NameDescription
addCol

Syntax

object.addCol([sValue])

Arguments

NameTypeDescripton
sValueStringOptional. 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

NameTypeDescripton
p0Number[]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.
sidNumber[]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

NameTypeDescripton
bBooleanOptional. 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

NameTypeDescripton
conditionStringThe 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

NameTypeDescripton
rowNumberOptional. 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

NameTypeDescripton
bBooleanFlag

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

NameTypeDescripton
aString[][]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

NameTypeDescripton
iRowNumberThe row index number
iCellNumberThe cell index number
sValueStringOptional. The value
iIndexNumberOptional. 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

NameTypeDescripton
aString[]An array containing the values.

Return Type

void

Sets the default values for each column
setColFlags

Syntax

object.setColFlags(a)

Arguments

NameTypeDescripton
aNumber[] 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

NameTypeDescripton
aNumber[]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

NameTypeDescripton
aString[]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

NameTypeDescripton
aNumber[] 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

NameTypeDescripton
aString[]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

NameTypeDescripton
bBooleanFlag

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

NameTypeDescripton
iNumberRow index for the desired row
idNumberThe new id number

Return Type

void

Sets the id for a certain row
setLinkData

Syntax

object.setLinkData(a)

Arguments

NameTypeDescripton
aString[][]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

NameTypeDescripton
aNumber[]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

NameTypeDescripton
aNumber[]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

NameTypeDescripton
bBooleanFlag

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

NameTypeDescripton
wNumberThe desired with
hNumberThe 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

NameTypeDescripton
sStringAny 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

NameTypeDescripton
colNumberColumn index to sort by.

Return Type

void

Sorts the grid by one of the columns.
toString

Syntax

object.toString()

Arguments

NameTypeDescripton

Return Type

String

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

Fields

NameTypeDescripton
autoExpandBooleanIf true a new row will automatically be added to the grid once the last one is modified. Default is false.
colDefaultString[]Read only. An array containing the column defaults, use setColDefault to modify.
colFlagsNumber[]Read only. An array containing the column flags, use setColFlags to modify.
colLengthsNumber[]Read only. An array containing the column lengths, use setColLengths to modify.
colLinkDataString[]Read only. An array containing the column link data, use setLinkData to modify.
colsNumberRead only. The number of columns in the grid.
colSizesNumber[]Read only. An array containing the column sizes, use setColSizes to modify.
colTypesNumber[]Read only. An array containing the column types, use setColTypes to modify.
defColSizeNumberThe default column size.
flagsNumberPermission flags, affecting the entire grid according to this bitmap: 1 - update, 2 - insert, 4 - delete - The default value is 7.
groupByFirstBooleanDeprecated. 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.
headersString[]Read only. An array containing the column headers, use setHeaders to modify.
hideBoxOnBlurBooleanIf true the edit box will be hidden on blur. Default is false.
minimalNumberThe 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.
resizeAreaNumberThe width of the area between columns in the grid header that can be grabbed, and used to resize the columns. Default value is 7.
resizeAreaVNumberSame 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.
rowsWebFXGridRow[]Read only. An array containing the rows of the grid.

Events

NameDescripton
onChangeFires when a change has been made.
onColResizeFires when a column has been resized.
onNewRowFires when a new row has been added.
onSelectFires when a row has been selected.
onSortFires 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

NameTypeDescripton
aDataString[] 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.
nColsNumberDesired number of columns
sidNumberThe row sid, or server id.
bUnescapeDataBoolean If true the supplied data will be parsed through the unescape function before used to populate the cells. Default is false."

Static Methods

NameDescription

Static Fields

NameTypeDescripton
None.

Methods

NameDescription
deselect

Syntax

object.deselect([b])

Arguments

NameTypeDescripton
bBooleanOptional. 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

NameTypeDescripton

Return Type

void

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

Syntax

object.over()

Arguments

NameTypeDescripton

Return Type

void

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

Syntax

object.select()

Arguments

NameTypeDescripton

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

NameTypeDescripton
cellsWebFXGridCells[]Read only. An array containing the cells the row consists of.
idStringRead only. A unique name used to identify the html element that will be generated.
parentWebFXGridRead only. A reference to the parent grid.
sidNumberThe sid, or server id.

Events

NameDescripton
None.

Remarks

None.

WebFXGridCell

This class represents a cell.

Syntax

new WebFXGridCell([sValue]);

Parameters

NameTypeDescripton
sValueStringThe cell value

Static Methods

NameDescription

Static Fields

NameTypeDescripton
None.

Methods

NameDescription
click

Syntax

object.click()

Arguments

NameTypeDescripton

Return Type

void

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

Fields

NameTypeDescripton
idStringRead only. A unique name used to identify the html element that will be generated.
indexNumberRead only. The cell index.
parentStringRead only. A reference to the parent row.
styleStringA css string describing the style of the cell.
valueStringRead only. The cell value. To modify use the WebFXGrid setCellValue method.

Events

NameDescripton
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