MAF.element.Grid

new MAF.element.Grid({
   rows: 2,
   columns: 2,
   cellCreator: function () {
      var cell = new MAF.element.GridCell({
         events: {
            onSelect: function(event) {
               log('Selected', this.getDataItem());
            }
         }
      });

      cell.text = new MAF.element.Text({
         styles: {
            color: 'white'
         }
      }).appendTo(cell);
      return cell;
   },
   cellUpdater: function (cell, data) {
      cell.text.setText(data.label);
   }
}).appendTo(this);

Configs

carousel : {Boolean}

Defines if the grid needs to behave like a carousel. True will show the first page again after the last page has passed. Default false.

cellCreator : {function}

Is a required method in which you create and prepare your cell's content.

Example

cellCreator: function () {
      var cell = new MAF.element.GridCell({
         events: {
            onSelect: function(event) {
               log('Selected', this.getDataItem());
            }
         }
      });

      cell.text = new MAF.element.Text({
         styles: {
            color: 'white'
         }
      }).appendTo(cell);
      return cell;
   }

cellUpdater : {function}

Is a required method in which you update your cell's content with an item from the dataset. When this method is called the cell is not visible yet.

Properties:

Name	Type	Description
cell	MAF.element.GridCell | MAF.control.GridCell	The cell as configured in cellCreator.
dataItem	Mixed	The dataset for the current page of the grid.

Example

cellUpdater: function (cell, dataItem) {
    cell.text.setText(dataItem.label);
 }

columns : {Number}

Number of columns in the grid.

focus : {Boolean}

Defines if the grid is allowed to get focus. Default true.

manageWaitIndicator : {Boolean}

Show the framework waitindicator while grid is loading or changing pages. Default true.

orientation : {String}

Horizontal or verticale orientation of the grid.

render : {Boolean}

Defines if the grid should be rendered automatically. Default true.

rows : {Number}

Number of rows in the grid.

Methods

animate(config) inherited

Parameters:

Name	Type	Description
config	Object	A config object

Fires:

• MAF.element.Core#event:onAnimationEnded

attachAccessories(arguments)

Attach multiple accessory components to this component.

Parameters:

Name	Type	Description
arguments	Array	Contains muliple accessory components.

Returns:

This component.

attachAccessory(accessory)

Attach a accessory component to this component so it can update on grid events.

Parameters:

Name	Type	Description
accessory	Class	The accessory component.

Returns:

This component.

blurCell()

Blur focus of the given parameter target, which can be a cell, an index, or coordinates of where to blur focus.

Returns:

This component.

changeDataset(data, reset, dataLength) → {MAF.element.Grid}

Parameters:

Name	Type	Argument	Default	Description
data	Array			Data objects that will change the content of the grid.
reset	Boolean	optional	false	This will reset the page the grid will display to 0 when true.
dataLength	Number	optional		When the dataset will be larger then the passed in array in length.

Fires:

• MAF.element.Grid#event:onDatasetChanged

Returns:

changePage(pagenum, options)

Change page of the grid.

Parameters:

Name	Type	Description
pagenum	Number	Number of the page to change to.
options	Object	Options to change the state of the grid.

focus()

Give the grid focus.

focusCell(target)

Change focus to the given parameter target.

Parameters:

Name	Type	Description
target	Mixed	Can be a cell, an index, or coordinates of where to set focus

Returns:

This component.

freeze() → {Class} inherited

Freezes this component. Screen renders no longer trigger until thawed.

Returns:

This component.

getAbsolutePosition() → {Object} inherited

Give back the position relative to its first positioned ancestor element

Returns:

{hOffset:Number, vOffset: Number}

getCellCoordinates() → {Object}

Returns:

With row, column, rows and columns

getCellCount() → {Number}

Returns the cell count of a fully populated grid page. Returns this.config.rows * this.config.columns.

Returns:

The total number of cells on a grid page.

getCellDataIndex(c) → {Number}

Parameters:

Name	Type	Description
c	Object | Number	Can be a Cell, index or a row.

Returns:

Dataset Index.

getCellDataItem(c) → {Mixed}

Parameters:

Name	Type	Description
c	Mixed	Can be a cell, index, or row.

Returns:

Returns a dataset item.

getCellDimensions() → {Object}

Returns:

With the width and height of the cells for the grid.

getCellIndex(a, b) → {Number}

Parameters:

Name	Type	Description
a	Object | Number	Can be a Cell, index or a row.
b	Number	Row

Returns:

Index of the cell if found. Otherwise it returns -1.

getCurrentPage()

Returns:

The zero-based index of the current page of data.

getDataItem(index) → {object}

Get the data item with the specified index.

Parameters:

Name	Type	Description
index	index	The index of the data item to find.

Returns:

The data item with the passed index.

getFocusCoordinates() → {Object}

Returns:

Row and column properties of the last focused cell.

getFocusIndex()

Returns:

Index of last focused cell.

getPageCount()

Returns:

this.pager.getNumPages(). The number of pages in the dataset.

getStartIndex()

Returns:

The dataset index of the first cell on the current page.

getState() → {Object}

Returns:

State object of the grid.

getView() → {Class} inherited

Returns:

Returns the view this class is appended on.

getVisibleCellCount()

Returns the cell count of currently visible cells.

hide() → {Class} inherited

Hides this component.

Returns:

This component.

initialize() inherited

Initialize the class

normalizeIndex() → {Number}

Returns:

Starting index of the page containing the desired data item.

releaseFocus(direction, event) → {boolean}

Deprecated This will probably be removed in the next major MAF release.

Parameters:

Name	Type	Argument	Description
direction	string		The direction to release the focus too.
event	event	optional

Returns:

Always will return true now.

setFilter(fn)

Parameters:

Name	Type	Description
fn	function	A function used as a test for each element in the data set.

Example

grid.setFilter(function (value) {
   if (value.type === 'demo')
      return value;
});

shift(type, options)

Shifts the grid to the page based on the parameter type.

Parameters:

Name	Type	Description
type	String	You can use: first - Shift grid to the first page. last - Shift grid to the last page. up - Shift grid to the previous page. down - Shift grid to the next page. left - Shift grid to the previous page. right - Shift grid to the next page.
options	Object	Options to change the state of the grid.

show() → {Class} inherited

Shows this component.

Returns:

This component.

thaw() → {Class} inherited

Thawes this component. Screen renders can trigger again.

Returns:

This component.

updateState(state) → {Object}

Parameters:

Name	Type	Description
state	Object	Object to update the states of the grid with.

Returns:

The updated state.

Events

onAnimationEnded

Fired when a animation on this component has ended.

onAppend

Fired when component has appended to a parent. Update visual appearances by applying a Theme style and rendering the skin.

onBlur

Fired when the component is blurred.

onChangeDisabled

Fired when this component changes it enabled or disabled state.

onChangePage

Fired before a page on the grid will be changed.

onDatasetChanged

Fired when the data set of the grid has changed.

onDisable

Fired when this component changes it state to disabled.

onEnable

Fired when this component changes it state to enabled.

onFocus

Fired when the component recieves focus.

onNavigate

Fired when a navigation happens when the component has focus.

onPageChanged

Fired after a page on the grid has changed.

onSelect

Fired when the component is selected.

onStateUpdated

Fired when state of the grid is updated/changed.