Class “Cell”

Object > NativeObject > Widget > Composite > Cell

This widget is expected by ListView as a child (in JSX) or turn value of createCell. It’s data-binding enabled by default. It’s children can also not be selected from the outside, except for using apply directly on the instance. This allows using it as a function component as demonstrated in this example.

Type: Cell<ItemType> extends Composite
Generics: ItemType: any
Constructor: public
Singleton: No
Module: tabris-decorators
Direct subclasses: None
JSX Support: Element: <Cell/>
Parent Elements: <ListView/>
Child Elements: Any standalone widget element

Examples

JSX

contentView.append(
  <ListView stretch items={items}>
    <Cell padding={8} height={52}>
      <TextView centerY bind-text='item.text' font='24px'/>
    </Cell>
  </ListView>
);

Constructor

new Cell(properties?)

Parameter Type Description
properties Properties<Cell> Sets all key-value pairs in the properties object as widget properties. Optional.

Properties

item

The ListView item currently assigned to this cell. Child elements of <Cell> can bind properties to it used the bind-<widgetProperty>='item.itemProperty syntax.

Type: ItemType
Settable: No
Change Event: itemChanged

itemCheck

A callback that must return true for any item this cell can display. This is used to determine which <Cell> template to use when multiple are given in a <ListView> element. May be used instead or in addition to itemType.

Setting this property also enables runtime item type checks, so it can be useful to set it even if only one <Cell> element is present.

**This property only has an effect when Cell is used as an JSX child element of ListView.

Type: (value) => boolean
Default: null
Settable: Yes
Change Event: itemCheckChanged

itemIndex

The index (within the items of ListView) of the item currently assigned to this cell.

Type: number
Settable: No
Change Event: itemIndexChanged

itemType

The class (constructor) or name (typeof value) of the item type this cell can display. This is used to determine which <Cell> template to use when multiple are given in a <ListView> element. May be used instead or in addition to itemCheck.

Setting this property also enables runtime item type checks, so it can be useful to set it even if only one <Cell> element is present.

**This property only has an effect when Cell is used as an JSX child element of ListView.

Type: Constructor
| 'string'
| 'number'
| 'boolean'
Default: null
Settable: By Constructor or JSX
Change Event: Not supported

This property can only be set via constructor or JSX. Once set, it cannot change anymore.

selectable

If set to true (e.g. <Cell selectable>), the cell will trigger the select event of ListView when tapped.

Alternatively, any of the static ListView select trigger methods can be registered as listeners of any event of Cell or its child elements. This allows select events to be triggered on more specific user interactions.

**This property only has an effect when Cell is used as an JSX child element of ListView.

Type: boolean
Default: false
Settable: By Constructor or JSX
Change Event: Not supported

This property can only be set via constructor or JSX. Once set, it cannot change anymore.

Change Events

itemChanged

Fired when the item property has changed.

EventObject Type: PropertyChangedEvent<Cell, ItemType>

Property Type Description
value ItemType The new value of item.

itemIndexChanged

Fired when the itemIndex property has changed.

EventObject Type: PropertyChangedEvent<Cell, number>

Property Type Description
value number The new value of itemIndex.

itemCheckChanged

Fired when the itemCheck property has changed.

EventObject Type: PropertyChangedEvent<Cell, Function>

Property Type Description
value (value) => boolean The new value of itemCheck.