DomAPI Home
DomAPI

domapi.Listgrid

See also: Elm
See also: Component

Represents a combination Grid and Listview. Among its many features are column sorting, column re-ording, column resizing, drag-n-drop and inline editing. Supports a 'virtual mode' in which the grid can hold thousands of rows with no percievable performance loss.

Listgrid is a GUI frontent to the Dataset object. Most of the data manipulation methods are pointers directly into the grid's internal Listgrid.data property. For power users, you may find it easier to deal with the data object directly, and just use the grid to display its contents. The grid's Listgrid.refresh() method updates its display to match the data object.

Virtual Mode

The Listgrid has two modes it can operate in. The default mode uses physical rows to represent the data -- that is, for every row in the dataset, there will be a physical row in the browser. For large dataset, this can seriously hamper performance and consome lots of memory. To combat this, the grid also offers a 'virtual' mode. When in this mode, there are only ever enough physical rows that will fit within the viewport. The grid updates the contents of these rows as you scroll the viewport. This offers phenonmenal speed increases on larger datasets, and consume very little resources. The tradeoff is that the grid may feel less 'snappy' when scrolling, especially if the viewport is very large and can fit many rows. This is usually an acceptable trade for the improved load times and reduced memory usage.


Listgrid Example: system, aqua

Listgrid Constructor

var listgrid1 = domapi.Listgrid({
  headerH         : 16,
  rowbarW         : 10,
  doLedger        : false,
  doColMove       : true,
  doColSort       : true,
  doDepress       : true,
  gridlines       : "both",
  resizeBdr       : 10,
  selectMode      : "row",
  doAllowEdit     : true,
  doColResize     : true,
  linesPerRow     : 1,
  minColWidth     : 20,
  doShowHeader    : true,
  doShowRowbar    : true,
  doMultiSelect   : false,
  doVirtualMode   : false,
  doAllowNoSelect : false,
  doShowSelection : true 
});
Also inherits the construtor arguments of Elm and Component.

Constructor Details
Parameter Type Default Description
headerH integer 16  Height of the headerbar. 
rowbarW integer 10  Width of the rowbar column. 
doLedger boolean false  Controls whether or not the row background colors are "striped". 
doColMove boolean true  Allow the user to rearrange the column order by dragging with the mouse. 
doColSort boolean true  Allow the user to sort a column by clicking its header. 
doDepress boolean true  Causes the header cells to act as buttons. 
gridlines String both  Controls the gridlines. Possible values are "vert", "horz", "both" or "none". 
resizeBdr integer 10  The size of the 'resize range' -- that is, the distance the mouse can be from the edge of a column that it will register as being a resize zone. 
selectMode String row  In the future, other selection types may be made available. Currently this only supports "row". 
doAllowEdit boolean true  Controls whether the grid is read-only or not. 
doColResize boolean true  Allow the user to resize columns by dragging with the mouse. 
linesPerRow integer Determines how many lines of text to display for each row. MUST be passed in the constructor -- cannot be changed after grid creation. 
minColWidth integer 20  The smallest width the user may make a column. 
doShowHeader boolean true  The header is the top row which shows the column names. 
doShowRowbar boolean true  The rowbar is the left column, which displays the row indicators. 
doMultiSelect boolean false  Controls whether the user can select more than one row at a time. 
doVirtualMode boolean false  Controls whether the grid runs in virtualmode or not. This cannot be changed after creation, only in the constructor. 
doAllowNoSelect boolean false  When true, and when doMultiSelect is true, allows the user to deselect all rows -- otherwise one row must always be selected. 
doShowSelection boolean true  Causes the selected row to be highlighted. 

Events unique to domapi.Listgrid

Methods unique to domapi.Listgrid

Properties unique to domapi.Listgrid

Also has the same properties as Elm and Component.

Events
onallowedit ( colindex ) type : boolean

Fires when the user is trying to edit a cell. Return a boolean to allow or stop.

Parameters:
Parameter Type Required Default Description
colindex integer Y     
back to top
onbeginedit ()

Fires when the current cell is being edited. Current cell is specified by Listgrid.currentRow and Listgrid.currentCol.

back to top
oncanceledit ()

Fires when an edit has been canceled.

back to top
oncolresize ( colIndex, newWidth )

Fires whenever a column is resized.

Parameters:
Parameter Type Required Default Description
colIndex integer Y     
newWidth integer Y     
back to top
oncolswap ( col1, col2 )

Fires when two columns have been swapped.

Parameters:
Parameter Type Required Default Description
col1 integer Y     
col2 integer Y     
back to top
ondeselectrow ( index )

Fires when a row is de-selected.

Parameters:
Parameter Type Required Default Description
index integer Y     
back to top
ondrawcell ( cell, col1, row1, col2, row2 )

Fires when a cell is rendered. Note, this event only fires when the grid is in virtual mode.

Parameters:
Parameter Type Required Default Description
cell HTMLElement Y   The cell being rendered. 
col1 integer Y   The actual col index. 
row1 integer Y   The actual row index. 
col2 integer Y   The physical col index. 
row2 integer Y   The physical row index. 
back to top
onendedit ()

Fires when an edit is commited.

back to top
onheaderclick ( colindex )

Fires when a header cell is clicked.

Parameters:
Parameter Type Required Default Description
colindex integer Y     
back to top
onscroll ()

Fires when the viewport is scrolled.

back to top
onselectrow ( index )

Fires when a row is selected.

Parameters:
Parameter Type Required Default Description
index integer Y     
back to top
Methods
addCol ()

Adds a column to the Listgrid.data object and calls Listgrid.assert() if not in update mode.

See also:  beginUpdate
back to top
addRow ()

Adds a row to the Listgrid.data object and calls Listgrid.assert() if not in update mode.

back to top
assert ()

Used by other internal methods, you should not need to call it yourself. Assert calls the assertion routines of the Listgrid.data object and also asserts that there are enough columns and rows in the grid.

back to top
cancelEdit ()

If the grid is in edit mode, this cancels it. Equivalant to hitting ESC.

back to top
changeCellText ( row, col, value )

Changes the text of a cell (in it's dataset) and then refreshes that cell in the UI.

Parameters:
Parameter Type Required Default Description
row integer Y     
col integer Y     
value String Y     
back to top
changeCellValue ( row, col, value )

Changes the value of a cell (in it's dataset) and then refreshes that cell in the UI.

Parameters:
Parameter Type Required Default Description
row integer Y     
col integer Y     
value variant Y     
back to top
clear ()

Clears the Listgrid.data object and refreshes the display.

back to top
commitEdit ()

If the grid is in edit mode, this commits the edits. Equivalant to hitting ENTER.

back to top
deleteRow ( index )

Causes the Listgrid.data object to delete the specified row.

Parameters:
Parameter Type Required Default Description
index integer Y   Row index. 
back to top
dumpState ()

Handy debug method -- dump the internal state of the grid to the console. Requires that the debug unit be loaded before use.

back to top
editCell ()

Places the grid into edit mode. Edits the cell specified by Listgrid.currentRow and Listgrid.currentCol. Equivalant to hitting F2.

back to top
getHeaderHeight () type : integer

Returns the height of the headerbar. Returns zero if it's hidden.

back to top
getHorzScrollBarVisible () type : boolean

Returns true if the horizontal scrollbar is visible in the viewport.

back to top
getRow ( index ) type : variant

The physical grid has no concept of rows. Data is actually stored in columns, as a stack of DIVs. The getRow() method is handy for times when you need to treat the grid as though it were row based. The returned object has a cells property that is an array containing each child from the columns that match the row index provided. This allows you to cycle through each cell as though they were in a row. Note that the object returned by this function is NOT an HTMLElement.

Example:
  var cells = grid.getRow(5).cells;
for(var i=0;i<cells.length;i++)
  cells[i].style.color = "green";
Parameters:
Parameter Type Required Default Description
index integer Y     
back to top
getRowbarWidth () type : integer

Returns the width of the rowbar. Returns zero if it's hidden.

back to top
getRowsViewable () type : integer

Returns the number of rows that can fit within the viewport.

back to top
getRowsVisible () type : integer

Returns the number of non-hidden rows in the Listgrid.data object.

back to top
getTopRow () type : integer

Returns the index of the top row in the viewport.

back to top
getVertScrollBarVisible () type : boolean

Returns true if the vertical scrollbar is visible in the viewport.

back to top
loadFromCsv ( csv )

Loads the Listgrid.data object from a CSV (comma separated value) string.

Parameters:
Parameter Type Required Default Description
csv String Y     
back to top
loadFromCsvUrl ()

Loads the Listgrid.data object from CSV returned from a URL.

back to top
loadFromJson ( json )

Loads the Listgrid.data object from a JSON object.

Parameters:
Parameter Type Required Default Description
json Object Y     
back to top
loadFromJsonUrl ( url )

Loads the Listgrid.data object from JSON returned from a URL.

Parameters:
Parameter Type Required Default Description
url String Y     
back to top
loadFromXml ()

Loads the Listgrid.data object from an XML object or node.

back to top
loadFromXmlUrl ()

Loads the Listgrid.data object from XML returned from an URL.

back to top
refresh ()

Calling this method forces the grid to re-render itself. This is somthing you normally don't need to do -- but can be handy if you've manually edited the Listgrid.data property.

back to top
refreshCell ( row, col )

Refreshes just a single specified cell rather than the whole grid or viewport. Can be more effecient when making small changes.

Parameters:
Parameter Type Required Default Description
row integer Y     
col integer Y     
back to top
rowVisible ( index ) type : boolean

Returns true if the specified row is within the viewport.

Parameters:
Parameter Type Required Default Description
index integer Y     
back to top
selectAll ()

Selects every row.

back to top
selectNone ()

De-selects every row.

back to top
selectRow ( index, doSelect, makeVisible )

Used to select or de-select a row.

Parameters:
Parameter Type Required Default Description
index integer Y   Row index. 
doSelect boolean Y   Whether to select or de-select the row. 
makeVisible boolean   false  Whether to scroll the viewport so that the row is visible. 
back to top
setGridlines ( value )

Changes the way gridlines are drawn. Acceptable values are "vert", "horz", "both" or "none".

Parameters:
Parameter Type Required Default Description
value String Y     
back to top
setTopRow ( index )

Scrolls the grid so that the specified row is at the top of the grid, or as close to it as possible.

Parameters:
Parameter Type Required Default Description
index integer Y   Row index. 
back to top
sortCol ( colIndex, direction )

Sorts a specified column, based on the columns dataType specified in the Listgrid.data object.

Parameters:
Parameter Type Required Default Description
colIndex integer Y     
direction integer   0 or 1, for ascending or descending order. 
back to top
swapCols ( col1, col2 )

Swaps two columns in the Listgrid.data object and then updates the display.

Parameters:
Parameter Type Required Default Description
col1 integer Y     
col2 integer Y     
back to top
Properties
cols type : Array

Collection that contains references to the physical column objects. You should not have to mess with this.. use the Listgrid.data object instead.

back to top
currentCol type : integer

Index of current col. Read-only.

back to top
currentRow type : integer

Index of current row. Read-only.

back to top
data type : Dataset

Reference to the Dataset object that the grid uses for rendering. If you make any manual changes to the dataset, you can use the grid's Listgrid.refresh() method to update the display.

back to top
selected type : Array

Array of physical row indexes. This should be considered read-only, use the methods provided by the grid for manipulating selections.

back to top
DHTML by www.domapi.com