Configuration 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
<div data-bind="dxList:{dataSource: listDataSource, editEnabled: true, editConfig: {selectionMode: 'control', selectionEnabled: true, deleteEnabled: true, deleteMode: 'toggle'}}">
    <div data-options="dxTemplate:{name:'item'}">
        <span data-bind="text: name"></span>
    </div>   
</div>
//An object passed to the dataSource configuration option of the list
listDataSource = new DevExpress.data.DataSource([]);

//Loads json data and passes it to the DataSource
$.get("/Content/data/states.txt", function (data) {
    for (var i = 0; i < data.length; i++) {
        listDataSource.store().insert(data[i]);
    }
    listDataSource.load();
}, "json");

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

A mode specifying how to delete a list item.

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

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

The following values are available.

  • 'toggle'
    List items are accompanied by toggles. When switching a toggle, the Delete button appears. Press this button to delete the current item.

  • 'slideButton'
    The Delete button appears when sliding a list item. Press this button to delete the current item.

  • 'slideItem'
    The Delete button appears when sliding a list item to the left. Press this button to delete the current item.

  • 'swipe'
    An item is deleted by swiping it.

  • 'hold'
    The Delete button appears when holding a list item. Press this button to delete the current item.

NOTE: If you do not like the predefined modes, provide a custom item template and behavior using the itemRender or itemTemplate configuration options. To delete an item, use the deleteItem method.

Show Example:
jQuery
<div data-bind="dxList:{
        dataSource: listDataSource,
        editEnabled: true,
        editConfig: {deleteEnabled: true, deleteMode: deleteMode()},
        height:'85%'}">
    <div data-options="dxTemplate:{name:'item'}">
        <span data-bind="text: name"></span>
    </div>   
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width:auto" class="dx-field-label">Delete mode</div>
    <div style="width:auto" class="dx-field-value" data-bind="dxLookup: { dataSource: deleteModes, value: deleteMode}"></div>
  </div>
</div>
deleteModes = ["toggle", "slideButton", "slideItem", "swipe", "hold"];
deleteMode = ko.observable(deleteModes[2]);

listDataSource = DevExpress.data.createDataSource({
    load: function (loadOptions) {
        if (!loadOptions.refresh)
            return;
        var dfd = new $.Deferred();
        $.get("/Content/data/states.txt", function (data) {
            dfd.resolve(data);
        }, "json");
        return dfd.promise();
    }
});

itemRender

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

Type: function
Function parameters:
itemData: Object
An object representing the item to be rendered.
itemIndex: Number
The index of the item to be rendered.
itemElement: Object
An HTML element containing 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 as the 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

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

A mode specifying how to select a list item.

Type: String
Default Value: 'item'
Default for desktop: 'control'
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 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
<div data-bind="dxList:{
        dataSource: listDataSource,
        editEnabled: true,
        editConfig: {selectionEnabled: true, selectionMode: selectionMode()},
        height:'85%'}">
    <div data-options="dxTemplate:{name:'item'}">
        <span data-bind="text: name"></span>
    </div>   
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width:auto" class="dx-field-label">Selection mode</div>
    <div style="width:auto" class="dx-field-value" data-bind="dxLookup: { dataSource: selectionModes, value: selectionMode }"></div>
  </div>
</div>
listDataSource = DevExpress.data.createDataSource({
    load: function (loadOptions) {
        if (!loadOptions.refresh)
            return;
        var dfd = new $.Deferred();
        $.get("/Content/data/states.txt", function (data) {
            dfd.resolve(data);
        }, "json");
        return dfd.promise();
    }
});
selectionModes = ["item", "control"];
selectionMode = ko.observable(selectionModes[0]);