Module: alfresco/lists/views/layouts/Grid

alfresco/lists/views/layouts/Grid

Use this widget to render a grid. Every widget rendered within it will be added so that if a row contains the number of widgets defined by columns in order to allow the {@link module:alfresco/lists/views/Grid#expandedPanel} to be re-expanded following a resize events that re-renders the data.
Type:
  • string
Since:
  • 1.0.83
Default Value:
  • null
Source:

_lastExpandedWidgets :object

Logs the last requested widgets model provided in a call to {@link module:alfresco/lists/views/Grid#expandedPanel} in order to be able to recreate the last [expandedPanel]{@link module:alfresco/lists/views/Grid#expandedPanel} following resize events.
Type:
  • object
Since:
  • 1.0.83
Default Value:
  • null
Source:

columns :number

This is the number of columns in the grid.
Type:
  • number
Default Value:
  • 4
Source:

cssRequirements :object[]

An array of the CSS files to use with this widget.
Type:
  • object[]
Default Value:
  • [{cssFile:"./css/Grid.css"}]
Source:

emptyCells :element[]

This is used to keep track of any empty cells that are created as a result of calling completeRow so that they can be destroyed when more results are added (when used within an infinite scrolling list).
Type:
  • element[]
Since:
  • 1.0.40
Default Value:
  • null
Source:

enableHighlighting :boolean

Indicates whether or not highlighting should be enabled. If this is configured to be true then highlighting of focus and expansion will be handled.
Type:
  • boolean
Since:
  • 1.0.44
Default Value:
  • false
Source:

expandedItemKey :string

This is set to the itemKeyProperty of the item in the grid that has been expanded by the publication of the expandTopic
Type:
  • string
Since:
  • 1.0.44
Default Value:
  • null
Source:

expandedPanel :string

This is set to a reference to a panel expanded within the grid showing more details of one of the rendered items. It should not be configured in models, but can be referenced in extending modules.
Type:
  • string
Since:
  • 1.0.44
Default Value:
  • null
Source:

fixedColumns :boolean

Indicates whether the number of columns is fixed for resize events. This means that the thumbnail size can change.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • true
Source:

gridCellMapping :object

Used to keep track of which cell is mapped to each itemKeyProperty]
Type:
  • object
Since:
  • 1.0.44
Default Value:
  • null
Source:

itemKeyProperty :string

This is the property that is used to uniquely identify each item rendered in the grid. It is used as the key in the gridCellMapping to map each item to the cell that it is rendered in. This is required in order to know where to exand the grid when the expandTopics is published.
Type:
  • string
Since:
  • 1.0.44
Default Value:
  • null
Source:

nextLinkLabel :string

The label to use for the next link. This defaults to null, so MUST be set for the next link to be displayed.
Type:
  • string
Default Value:
  • null
Source:

nextLinkPublishTopic :string

The topic to publish when the next link is clicked.
Type:
  • string
Default Value:
  • null
Source:
When set to true this will show a link for requesting more data (if available). This should be used when the grid is rendering data in an infinite scroll view. It is required because when the grid cells are small the data may not be sufficient to allow the scrolling events to occur that will request more data.
Type:
  • boolean
Default Value:
  • false
Source:

templateString :String

The HTML template to use for the widget.
Type:
  • String
Source:

thumbnailSize :boolean

The size of each thumbnail. This is only used when columns are not fixed.
Type:
  • boolean
Since:
  • 1.0.40
Default Value:
  • null
Source:

Methods

_onChildBlur()

This is called whenever focus leaves a child widget. It will call the blur function of the currently focused widget if it has one.
Source:

allItemsRendered()

Overrides the inherited function to create a link for retrieving more data when
Source:

collapsePanel()

Destroys the [expandedPanel]expandedPanel and restores the focus to the cell that was selected to be expanded.
Since:
  • 1.0.44
Source:

completeRow()

To ensure that the grid items are spaced correctly when there are less items in the final row than there are columns, it is necessary to create empty cells to fill the final columns in the row.
Since:
  • 1.0.40
Source:

createWidgetDomNode(widget, rootNode, rootClassName)

Overridden to add an additional TD elements for each cell in the grid. It will also create a new TR element if the end of the current row has been reached.
Parameters:
Name Type Description
widget object The widget definition to create the DOM node for
rootNode element The DOM node to create the new DOM node as a child of
rootClassName string A string containing one or more space separated CSS classes to set on the DOM node
Source:

expandPanel(payload)

Creates a new [expandedPanel]expandedPanel for an item rendered in the grid or collapses the currently expanded panel if it represents the requested item.
Parameters:
Name Type Description
payload object The payload containing the details of the item to expand and what to place in the expanded panel.
Since:
  • 1.0.44
Source:

focusOnCell(widget)

This function ensures that the widget requested to be focused has a focus function and if so calls the "focusChild" function provided by the _KeyNavContainer. Otherwise it manually takes care of setting the focus.
Parameters:
Name Type Description
widget object The widget to focus
Since:
  • 1.0.43
Source:

focusOnCellAbove()

Gives focus to the cell immediately above the currently focused cell. If the focused cell is on the first row then it will select the cell in the same column on the last column (and if there isn't a cell in the same column on the last row then the last item is selected).
Source:

focusOnCellBelow()

Gives focus to the cell immediately below the currently focused cell. If the currently focused cell is on the last row then the cell in the same column on the first row is selected.
Source:

focusOnCellLeft()

Source:

focusOnCellRight()

Source:

postCreate()

Calls processWidgets
Source:
Listens to Events:

renderData()

Extends the mixed in function to reset the gridCellMapping in preparation for rendering a new data set.
Since:
  • 1.0.44
Source:

renderNextItem()

Extends the inherited function to ensure that any DOM elements added for allowing the user to retrieve more items is destroyed. These will have been created by the allItemsRendered function when more data is available.
Source:

resizeCell(containerNodeMarginBox, widthToSet, node, index)

Sets the width of an individual cell.
Parameters:
Name Type Description
containerNodeMarginBox Object The margin box for the container nodes parent
widthToSet number The widget for the cell (in pixels)
node element The node to set width on
index number The current index of the element in the array
Source:

resizeCells()

Gets the content box of the containing DOM node of the grid and then iterates over all the cells in the grid calling the resizeCell to move to the next/previous item using the left and right cursor keys and the up/down keys to access the cell directly above or below.
Source:

Events

expandTopics

This is an array of optional topics that can be subscribed to to create a panel within the grid for showing additional data about a particular cell in the grid. The payload should contain a "widgets" attribute that represents the model to render within the panel.
Type:
  • string[]
Properties:
Name Type Description
widgets objects[] The widgets to show in the expanded panel.
Since:
  • 1.0.44
Default Value:
  • null
Source:
Listeners of This Event: