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
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.
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";
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.
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.