Mojo.Widget.FilterList
Namespace Detail
Overview
When your list is best navigated with a search field, particularly one where you would instantly filter the list as each character is typed into the field, you would want to use the FilterList widget. It is intended to display a variable length list of objects, which can be filtered through a call back function.
The widget has a text field displayed above a list, where the list is the result of applying the contents of the text field against some off-screen data source. The text field is hidden when empty, its initial state, but it is given focus in the scene so that any typing is captured in the field. As soon as the first character is entered, the framework displays the field and calls the specified filterFunction.
Declaration
<div x-mojo-element="FilterList" id="listId" class="listClass" name="listName"></div>
Properties | Required | Value | Description |
---|---|---|---|
x-mojo-element | Required | FilterList | Declares the widget as type 'FilterList'. |
id | Required | Any String | Identifies the widget element for use when instantiating or rendering. |
Events
Mojo.Event.listen(this.controller.get("filterlistId"), Mojo.Event.listTap, this.handleUpdate);
Event Type | Value | Event Handling |
---|---|---|
Mojo.Event.listChange | {model:this.controller.model, item:dataObj, index: index + this.renderOffset, originalEvent:event} | |
Mojo.Event.listTap | event.value or model.value | |
Mojo.Event.listAdd | ||
Mojo.Event.listDelete |
event.item event.index |
|
Mojo.Event.listReorder |
event.item event.toIndex event.fromIndex |
|
Mojo.Event.filter | event.filterString | |
Mojo.Event.filterImmediate | event.filterString |
Instantiation
this.controller.setupWidget("filterlistId", this.attributes = { itemTemplate: "filterlistscene/static-list-entry", listTemplate: "filterlistscene/static-list-container", addItemLabel: $L("Add ..."), swipeToDelete: true, reorderable: true, filterFunction: this.filterFunction.bind(this), delay: 350, emptyTemplate:"filterlist/emptylist" }, this.model = { disabled: false } );
Attribute Properties
Attribute Property | Type | Required | Default | Description |
---|---|---|---|---|
filterFunction | Function | Optional | None | Called to load items when the list is scrolled or filter changes. Function definition: filterFunction (filterString, listWidget, offset, count) |
delay | Integer | Optional | 300 | Delay after entry before filter function is called (in ms) |
The FilterList widget also includes all attributes available in the List widget.
Model Properties
Model Property | Type | Required | Default | Description |
---|---|---|---|---|
disabled | Boolean | Optional | False | If true, filter field is disabled. |
Methods
To invoke a method on a widget, use the scene controller's get
method for the desired widget, and append mojo
followed by the method.
Example:
this.controller.get('myWidget').mojo.getValue()
Method | Arguments | Description |
---|---|---|
getList | none | Gets the List widget associated with this FilterList. |
close | none | Closes the FilterField associated with this FilterList. |
open | none | Opens the FilterField associated with this FilterList. |
setCount | count (Integer) | Sets the count in the bubble in the FilterField associated with this FilterList. |
The FilterList also includes all methods available in the List and FilterField widgets.