Docs

Grids

Primary aim

With this page, you will know what are Grids and how to use them.

Grids widget

Under Dana, a GridView is a vertical RecyclingListView of GridLineView displayed on screen. And a GridLineView is an horizontal List of TileView.

Grids_items

Grids events

GridView emits some events (and you can override them under the named statics structure):

  • grid.selectionChange => onGridSelectionChange() when rail selection change
  • grid.start => onGridStart() at the start of the grid
  • grid.end => onGridEnd() at the end of the grid
  • grid.line.start => onGridLineStart() at the start of the line
  • grid.line.end => onGridLineEnd() at the end of the line

Line position

Each line of the Grid is automatically positioned below the previous one separated by lineMargin as margin. Each tile of the Line is automatically positioned behind the previous one separated be itemMargin as margin. You can override both property to adjust the component to your desired design.

Properties

  • The property dataItem represents the data of the focused TileView.
  • The property currentLineIndex is the index of the current line.
  • The property currentColumnIndex is holding the index of the current column.
  • The boolean endOfLineMove property allows you to go to the next or previous line at the end or start of a line (default behavior is true).
  • The property nbItemPerLine represents the number of TileView by line. (default value is 5).

How does it work?

A GridView takes a ListModel of data and converts this ListModel in ListModel of ListModel.

So data is the native listModel of data and $$listData is the converted ListModel of ListModel.

If you want a specific GridLineView you can override the itemViewClass property to use your own View as Line. Your line should extend of AbstractGridLineView.

You can override the itemViewClass property of your GridLineView to use your own TileView as grid item. If you want only override the TileView of your grid, you can override the lineItemViewClass property of your grid.

Grid properties to override Line and Tile
```javascript properties: { itemViewClass: () => $MyOwnGridLineView, lineItemViewClass: () => $MyOwnTileView } ```

GridView gets internal up/down/right/left/back API methods for navigation. The back API method is selecting the first line of the grid then return true or selects the first item of the first line (then returns true) otherwise return false.

To navigate in the Rail, your screen should call, for example:

onKeypressRIGHT: function (key) { return this.grid.right(key); },

onKeypressLeft: function (key) { return this.grid.left(key); },

onKeypressUp: function (key) { return this.grid.up(key); },

onKeypressDown: function (key) { return this.grid.down(key); },

onKeypressBack: function (key) { return this.grid.back(key); }

Caution

Do not forget to pass the key parameter to navigation functions.

API Reference

This UI component is part of Dana’s vendor named wtv-vendor-components which includes a JSDoc description.

See the component AbstractGridView and AbstractGridLineView under views category of this components API.

Prev
Glossary
Next
handle-done-callback