CellSpanningLayout.itemInfo property

Required. Gets or sets a function that returns the width and height of an item, as well as whether it should appear in a new column. Setting this function improves performance because the ListView can allocate space for an item without having to measure it first.

Syntax

<div 
    data-win-control="WinJS.UI.ListView"
    data-win-options="{layout: {type: WinJS.UI.CellSpanningLayout, itemInfo: value}}">
</div>

var itemInfo = cellSpanningLayout.itemInfo;
cellSpanningLayout.itemInfo = itemInfo;

Property value

Type: Function

A function that takes a single required parameter:

• itemIndex
  The index of the item to render.

The function returns an object that contains these properties:

width

The total width of the item, which includes the item width, left and right padding, left and right border, and left and right margin.

height

The total height of the item, which includes the item height, top and bottom padding, top and bottom border, and top and bottom margin.

newColumn

Set to true to create a column break; otherwise, false.

Remarks

An itemInfo function must be provided, returning an object with numeric width and height property values. Not providing itemInfo will result in a runtime error.

Note  

The values returned by the itemInfo function must be set based on the item index and can't reliably depend on item data.

Because the itemInfo function takes an index (and not an IItemPromise), it can'’t wait for an item to be returned from the data source. This is fine for synchronous data sources, such as WinJS.Binding.List, because the item is readily available and can be looked up by index. It’s difficult, however, to look up data in an asynchronous data source based on the provided index value (itemIndex), because the items might be added out of order and the data for the items might not yet be available, so your itemInfo function can’'t reliably perform a key-based lookup.

Requirements

See also

CellSpanningLayout