editConfig

An object used to set configuration options for the dxList's edit mode.

Type: Object

If you make the dxList widget editable, set the required edit mode. For this purpose, use the deleteEnabled and/or selectionEnabled fields of the editConfig configuration object.

The dxList widget comes with several predefined modes for item deletion and selection. You can set the required mode using the deleteMode and/or selectionMode fields of the editConfig configuration object. The predefined modes enclose a specific item appearance and control elements for deletion and selection. You can also specify a custom HTML template for selectable/deletable list items using the itemRender or itemTemplate option of the editConfig configuration object. In this case, the selectItem, deleteItem and unselectItem widget methods will be useful.

Show Example:
jQuery

deleteEnabled

Specifies whether the list items can be deleted.

Type: Boolean
Default Value: false

When item deletion is enabled, a default item delete mode is applied. You can choose the required delete mode from the list of predefined modes. For this purpose, use the deleteMode option of the editConfig configuration object. In addition, you can specify a custom HTML template for deletable list items using the itemRender or itemTemplate option of the editConfig configuration object. In this instance, the deleteItem widget method will be useful.

When an item is deleted, the action assigned to the itemDeleteAction option is performed.

deleteMode

Deprecated

Use the deleteType option instead.

A mode specifying how to delete a list item.

Type: String
Default Value: 'toggle'
Default for ios 6 and below: 'slideButton'
Default for ios7: 'slideItem'
Default for android: 'swipe'
Default for windows 8: 'hold'
Default for generic: 'slideItem'
Accepted Values: 'toggle'|'slideButton'|'slideItem'|'swipe'|'hold'

deleteType

Specifies the way a user can delete items from the list.

Type: String
Default Value: 'toggle'
Default for ios 6 and below: 'slideButton'
Default for ios7: 'slideItem'
Default for android: 'swipe'
Default for windows 8: 'hold'
Default for generic: 'slideItem'
Accepted Values: 'toggle'|'slideButton'|'slideItem'|'swipe'|'hold'

Show Example:
jQuery

itemRender

A function used to render list items in an edit mode.

Type: function
Function parameters:
itemData: Object
The data that is bound to the rendered item.
itemIndex: Number
The index of the item to be rendered.
itemElement: jQuery
An HTML element of the item to be rendered.
Return Value: String|DOM Node|jQuery
An HTML string, Element, or jQuery object representing the rendered item.
Default Value: null

When the editEnabled option is set to true, list items must be displayed so that end-users can select/delete them. To set one of the predefined select/delete modes, use the selectionMode/deleteMode option. To display and process list items in an edit mode in a custom way, specify the itemRender or itemTemplate option. The former is appropriate when you use the jQuery approach, while the latter is appropriate in the Knockout approach. For details, refer to the Customize Widget Item Appearance topic to learn more about ways to render collection items.

The function assigned to the itemRender option is called each time a list item is rendered in an edit mode. The following data is passed function parameters.

  • itemData
    An object representing the rendered item.
  • itemIndex
    An index of the rendered item.
  • itemElement
    A container element containing the rendered item.

Return an HTML string, Element or jQuery object representing the rendered item.

itemTemplate

The template used to render list items in an edit mode.

Type: String|function|DOM Node|jQuery
Return Value: String|jQuery
A template name or a template container.
Default Value: "null"

When the editEnabled option is set to true, list items must be displayed so that end-users can select/delete them. To set one of the predefined select/delete modes, use the selectionMode/deleteMode option. To display and process list items in an edit mode in a custom way, specify the itemTemplate or itemRender option. The former is appropriate when you use a Knockout approach, while the latter is appropriate in the jQuery approach. For details, refer to the Customize Widget Item Appearance topic to learn more about ways to render collection items.

Define a custom template using the dxTemplate markup component within the widget's container. To apply this template to editable list items, use the itemTemplate option in one of the following ways.

  • Assign a string representing the name of the required template.
  • Assign a function that returns the name of the template as a result of a certain logic.

You can factor out a custom template into a separate element. In this instance, assign one of the following values to the itemTemplate option.

  • A jQuery object representing the template's container.
  • A DOM Node representing the template's container.
  • A function that returns the jQuery object or a DOM Node representing the template's container.

menuItems

Specifies the array of items for a context menu called for a list item.

Type: Array
Default Value: []

Each item of the array passed to this option should include the text and action properties. The text property specifies the menu item text. The action property takes on a function called when the item is clicked. The function passed to the action property has the following parameters.

  • itemElement - specifies the current item element
  • itemData - specifies the current item data object

menuType

Specifies whether an item context menu is shown when a user swipes or holds an item.

Type: String
Default Value: 'hold'
Default for ios7: 'slide'
Accepted Values: 'hold'|'slide'

reorderEnabled

Specifies whether or not a user can reorder items.

Type: Boolean
Default Value: false

Note that it is necessary to set the useNativeScrolling option to false to enable the reordering of items in Windows Phone 8 and Android 4.0 or higher.

selectionEnabled

Specifies whether the list items can be selected.

Type: Boolean
Default Value: false

When item selection is enabled, a default item selection mode is applied. You can choose the required selection mode from a list of predefiend modes. For this purpose, use the selectionMode option of the editConfig configuration object. In addition, you can specify a custom HTML template for selectable list items using the itemRender or itemTemplate option of the editConfig configuration object. In this instance, the selectItem and unselectItem widget methods will be useful.

When an item is selected, the action assigned to the itemSelectAction option is performed. When an item is deselected, the action assigned to the itemUnselectAction option is performed.

selectionMode

Deprecated

Use the selectionType option instead.

A mode specifying how to select a list item.

Type: String
Default Value: 'item'
Accepted Values: 'item'|'control'

selectionType

A type specifying how to select a list item.

Type: String
Default Value: 'item'
Accepted Values: 'item'|'control'

This option is used when the selectionEnabled option is set to true.

The following values are available.

  • 'item'
    List items are selected when clicked (touched).

  • 'control'
    List items are selected when checked using check boxes.

NOTE: Check boxes accompany list items in both of the modes detailed above. When checked, they indicate the selected items for end-users. If you do not like the rendering of these check boxes, provide a custom item template and behavior using the itemRender or itemTemplate configuration options. To select and deselect an item, use the selectItem and unselectItems methods, respectively.

Show Example:
jQuery