Documentation Class: GridView

new GridView(options)

Class of a projection grid view

Parameters:

Name Type Description

options

Object

The constructor options.

Properties

Name	Type	Argument	Default	Description
`tableClasses`	Array.<string>	<optional>	[]
`tableAttributes`	object	<optional>	{aria-label: 'table'}	The classes for the TABLE elements (content table and sticky/fixed header)
`scrolling`	ScrollingConfig	<optional>	{virtualized: false, header: 'static'}	The scrolling related configurations

Extends

Backbone.View

Members

countRows :number

The count of data rows.

Type:

number

dataSource :DataSource

The data source of the grid

Type:

DataSource

itemArray :Array.<Object>

The array data items.

Type:

Array.<Object>

items :Array.<Object>|FakeArray

The data items. It's a fake array of original model.

Type:

Array.<Object> | FakeArray

primaryKey :string

The primary key of data items.

Type:

string

totalCountRows :number

The total count of data items. This represents the server side state.

Type:

number

Methods

appendBodyRows(rows)

Append a set body rows

Parameters:

Name	Type	Description
`rows`	Array.<RowConfig>	The rows to append

appendFootRows(rows)

Append a set footer rows

Parameters:

Name	Type	Description
`rows`	Array.<RowConfig>	The rows to append

appendHeadRows(rows)

Append a set header rows

Parameters:

Name	Type	Description
`rows`	Array.<RowConfig>	The rows to append

columnWithName(name)

Get the finalized column configuration with a given column name.

Parameters:

Name	Type	Description
`name`	string	The name of the column.

Returns:

Type: ExtendedColumnConfig

deselectAll()

Deselect all the selectable items.

deselectRow(key)

Deselect a row with the given primary key.

Parameters:

Name	Type	Description
`key`	string	The primary key for the row.

get(name)

Read the grid(projection)_configuration

Parameters:

Name	Type	Description
`name`	string	name of the projection

Returns:

Type: object

getBodyRows()

Get the row configurations for TBODY

Returns:

Type: Array.<RowConfig>

getFootRows()

Get the row configurations for TFOOT

Returns:

Type: Array.<RowConfig>

getHeadRows()

Get the row configurations for THEAD

Returns:

Type: Array.<RowConfig>

indexOfElement(el)

Given an element in the data rows, get the index of the corresponding data item.

NOTE: It's not recommended to use this API to find the data item for a given element. It could be incorrect if there're custom projections changes the TR sequence of TBODY. Insteadly, you should use GridView#keyOfElement.

Parameters:

Name	Type	Description
`el`	HTMLElement \| jQuery \| string	The DOM element. It can be an `HTMLElement`, a jQuery object or a jQuery selector.

Returns:

The index of the data row.

Type: number

itemAt(index)

Get the data item with its index in the items array.

Parameters:

Name	Type	Description
`index`	number	The index of the item.

Returns:

Type: Object

itemOfElement(el)

Get the data item from a DOM element in a certain row.

Parameters:

Name	Type	Description
`el`	HTMLElement \| jQuery \| string	The DOM element. It can be an `HTMLElement`, a jQuery object or a jQuery selector.

Returns:

Type: Object

itemWithKey(key)

Query the data item with its primary key.

Parameters:

Name	Type	Description
`key`	string	the primary key.

Returns:

Type: Object

keyOfElement(el)

Get the primary key from a DOM element in a certain row.

Parameters:

Name	Type	Description
`el`	HTMLElement \| jQuery \| string	The DOM element. It can be an `HTMLElement`, a jQuery object or a jQuery selector.

Returns:

The primary key for the row.

Type: string

monitorViewportChange( [timeout] [, interval])

Monitor the viewport change during a certain period and adjust the sticky headers if necessary.

Parameters:

Name	Type	Argument	Default	Description
`timeout`	number	<optional>	1000	The period of monitoring in milliseconds
`interval`	number	<optional>	100	The interval of sampling in milliseconds

patch(config, callback)

Patch the grid(projection) configurations. It's similar to GridView#set, but instead of replacing the projection configurations, patch do deep object merge.

Parameters:

Name	Type	Description
`config`	Object.<string, Object>	A hash of configurations to change. The keys are projection names while the values are the projection configurations
`callback`	function	A callback to notify the update is completed

Returns:

This grid view.

Type: GridView

pipeContentProjections(projs)

Pipe a projection to procceed the grid visual content

Parameters:

Name	Type	Argument	Description
`projs`	ProjectionDefinition	<repeatable>	A list of projection definitions

Returns:

This grid view

Type: GridView

pipeDataProjections(projs)

Pipe a projection to procceed the grid data

Parameters:

Name	Type	Argument	Description
`projs`	ProjectionDefinition	<repeatable>	A list of projection definitions

Returns:

This grid view

Type: GridView

pipeStructureProjections(projs)

Pipe a projection to procceed the grid structure

Parameters:

Name	Type	Argument	Description
`projs`	ProjectionDefinition	<repeatable>	A list of projection definitions

Returns:

This grid view

Type: GridView

prependBodyRows(rows)

Prepend a set body rows

Parameters:

Name	Type	Description
`rows`	Array.<RowConfig>	The rows to prepend

prependFootRows(rows)

Prepend a set footer rows

Parameters:

Name	Type	Description
`rows`	Array.<RowConfig>	The rows to prepend

prependHeadRows(rows)

Prepend a set header rows

Parameters:

Name	Type	Description
`rows`	Array.<RowConfig>	The rows to prepend

query(params)

Make query to the data source

Parameters:

Name	Type	Description
`params`	object	The query parameters

Returns:

Type: QueryResult

refresh( [force])

Refresh the GridView

Parameters:

Name	Type	Argument	Default	Description
`force`	boolean	<optional>	false	True for force refresh ignoring the cached states.

remove()

Destroy and detach the view from DOM.

render( [callback])

Render the grid view.

Parameters:

Name	Type	Argument	Description
`callback`	function	<optional>	A callback to notify the render is completed.

Returns:

This grid view.

Type: GridView

selectAll()

Select all the selectable items.

selectedItems()

Get the selected items.

Returns:

An array of the selected data items.

Type: Array.<Object>

selectedKeys()

Get the primary keys of the selected items.

Returns:

An array of the selected keys.

Type: Array.<string>

selectRow(key)

Select a row with the given primary key.

Parameters:

Name	Type	Description
`key`	string	The primary key for the row.

set(config [, callback])

Change the grid(projection) configuratons

Parameters:

Name	Type	Argument	Description
`config`	Object.<string, Object>		A hash of configurations to change. The keys are projection names while the values are the projection configurations
`callback`	function	<optional>	A callback to notify the update is completed

Returns:

This grid view.

Type: GridView

setBodyRows(value)

Set the row configurations for TBODY

Parameters:

Name	Type	Description
`value`	Array.<RowConfig> \| SetRowsCallback	The new body rows or a function to transform the body rows.

setFootRows(value)

Set the row configurations for TFOOT

Parameters:

Name	Type	Description
`value`	Array.<RowConfig> \| SetRowsCallback	The new footer rows or a function to transform the footer rows.

setHeadRows(value)

Set the row configurations for THEAD

Parameters:

Name	Type	Description
`value`	Array.<RowConfig> \| SetRowsCallback	The new header rows or a function to transform the header rows.

Events

didRedraw

The GridView did redraw the DOM. This event may trigger frequently when virtualization is enabled.

didRedrawBody

didRedrawFooter

didRedrawHeader

didReload

The GridView did reload data from the data source. This event take 2 parameters

succeeded (Boolean), true if the data fetch succeeded
data|rejection (Object)
- If the data fetch succeeded, pass the fetched data in form of { totalCount, items }. Where totalCount is the server side total item count, and the items is the array of data items with current query condition
- If the data fetch failed, pass the rejection object, which is usually an Error object from the data source

didUpdate

The GridView did update its configuration and redraw.

willRedraw

The GridView will redraw the DOM. This event may trigger frequently when virtualization is enabled.

willRedrawFooter

willRedrawHeader

willReload

The GridView will reload data from the data source.

willUpdate

The GridView will update its configuration and redraw.

wwillRedrawBody