List of data attributes

Attributes you should specify

data-editable

Type: Boolean

Default: false

Required on the ul tag along with data-role="listview" for the list to be initialized as an Editable Listview.

data-editable-type

Type: String

Default: "simple"

Possible values: "simple" | "complex"

Indicates the type of the editable listview to initialize.

• Simple Editable Listview has only one value per list item.

• Complex Editable Listview can have multiple values per list item and user is required to provide a custom form for entry of new list items.

data-item-name

Type: String

Default: ""

The name of the variable to hold the incoming value(s).

data-title

Type: String

Default: "View list items"

Title of the list when it contains at least one item.

data-empty-title

Type: String

Default: "No items to view"

Title of the list when it is empty.

Attributes you can specify

data-collapsed

Type: Boolean

Default: true

Indicating whether the list will be collapsed or not when initialized.

data-enhanced

Type: Boolean

Default: false

Indicating whether the DOM has already been enhanced or not. If so, then all the required DOM structure along with relevant CSS classes and corresponding data attributes must be specified.

Attributes only for complex type

Following data attributes can only be specified when data-editable-type is "complex".

data-editable-form

Type: String

Default: ""

ID of the form to be used for the complex type. This value is required if data-editable-type is complex.

data-item-template

Type: htmlString

HTMLString used for rendering the list item. Use %% as a placeholder for the value and wrap it with <span> having data-item-name as the id.

data-item-template="<h3><span id='fruitName'>%%</span></h3>"

data-add-button

Type: Boolean

Value: can only be true

Indicates the button to insert the new list items in complex type.

data-clear-button

Type: Boolean

Value: can only be true

Indicates the button to clear input fields in the form in complex type.

Customizing icons and labels

data-item-icon

Type: Boolean

Default: false

A boolean value indicating whether to show default carat-r icon for list items.

data-add-label

Type: String

Default: "Add"

Label of the button in the title header when the list is empty.

data-add-icon

Type: String

Default: "plus"

Icon of the button when the list is empty. See this page for the list of available icons.

data-edit-label

Type: String

Default: "Edit"

Label of the Edit button.

data-edit-icon

Type: String

Default: "edit"

Available Icons: see this page

Icon of the button when the list is not empty.

data-done-label

Type: String

Default: "Done"

Label of the button when the list is in edit mode.

data-done-icon

Type: String

Default: "check"

Available Icons: see this page

Icon of the button when the list is in edit mode empty. See this page for the list of available icons.

data-collapsed-icon

Type: String

Default: "carat-r"

Icon next to list title when the list is collapsed. See this page for the list of available icons.

data-expanded-icon

Type: String

Default: "carat-d"

Icon next to list title when the list is expanded. See this page for the list of available icons.