DataGrid Class

Custom grid control based on javaxt.dhtml.Table. Supports remote loading, sorting, and infinite scroll.

Constructors

DataGrid( parent, config )
Used to instantiate this class
parentDOM element in which to render this component
configConfiguration settings (optional). See config options for more information.

Config Options

style
Style config. See default styles in javaxt.dhtml.Table for a list of options. In addition to the table styles, you can also specify a checkbox style
url
The URL endpoint that this component uses to fetch records
params
JSON object with key/value pairs that are appended to the URL
payload
Data to send in the body of the request. This parameter is optional. If payload is not null, the component executes a POST request.
post
If true, and if the payload is empty, will sent params as a URL encoded string in a POST request. Otherwise the params will be appended to the query string in the request URL.
limit
Used to specify the page size (i.e. the maximum number records to fetch from the server at a time)
count
If true, the server will be asked to return a total record count. This is a legacy feature and is NOT required for pagination.
autoload
If true, the grid will automatically fetch records from the server on start-up
localSort
If true, the grid will sort values in the grid locally using whatever data is available. If fetching data from a remote server, recommend setting localSort to false (default)
fields
Optional list of field names used to specify which database fields should be returned from the server. If not provided, uses the "field" attributes in the column definition. If both are provided, the list of fields are merged into a unique list.
getResponse
Default method used to get responses from the server. Typically, you do not need to override this method.
payload
success
failure
parseResponse
Default method used to parse responses from the server. Should return an array of rows with an array of values in each row. Example: [["Bob","12/30","$5.25"],["Jim","10/28","$7.33"]]
update
Default method used to update a row with values. This method can be overridden to render values in a variety of different ways (e.g. different fonts, links, icons, etc). The row.set() method accepts strings, numbers, and DOM elements.
mask
DOM element with custom show() and hide() methods. The mask is typically rendered over the grid control to prevent users from interacting with the grid during load events. It is rendered before load and is hidden after data is rendered. If a mask is not defined, a simple mask will be created automatically using the "mask" style config.

Events

onScroll( )
onPageChange( currPage, prevPage )
onSelectionChange( )
beforeLoad( page )
onLoad( )
onError( request )
onRowClick( row, e )
onKeyEvent( keyCode, modifiers )
onCheckbox( value, checked, checkbox )
onSort( idx, sortDirection )

Public Methods

setFilter( newFilter )
Used to update the filter with new params
getFilter( )
Returns the current filter
getParams( )
getCurrPage( )
Returns the current page number
getScrollInfo( )
forEachRow( callback )
Used to traverse all the rows in the table and extract contents of each cell. Example:
    grid.forEachRow(function(row, content){
        console.log(row, row.record, content);
    });
    
Optional: return true in the callback function if you wish to stop processing rows.
select( row )
Used to select a given row in the grid
selectAll( )
Selects all the rows in the grid
deselectAll( )
Deselects all the rows in the grid
clear( )
Removes all the rows from the grid
remove( row )
Removes a row from the grid
show( )
Used to unhide the grid if it is hidden
hide( )
Used to hide the grid
focus( )
refresh( callback )
Used to clear the grid and reload the first page.
callbackOptional callback function called after the grid has been refreshed and loaded with data.
load( )
Used to load records from the remote store. Optionally, you can pass an array of records, along with a page number, to append rows to the table.
setLimit( limit )
Used to update the number of records to load per page.
scrollTo( obj )
Scrolls to the top of a page or to a row in the table
objPage number (integer) or row in the grid (DOM element)
getSelectedRecords( key, callback )
Returns an array of selected records from the grid.
keyOptional field name or index (e.g. 'id' or 0). If given, the output array will only contain values for the given key. This can be useful for limiting the amount of data returned in the array. For example, you might only need selected IDs instead of a full record.
callbackCallback function. If the table has a checkbox header, and the check box is checked, then the user expects to get back ALL "selected" records, even those that have yet to load. In this case, we will fetch records from the server and invoke the callback with additional data.
setSortIndicator( idx, sortDirection )