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 deleteType and/or selectionType 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 itemTemplate option of the editConfig configuration object. In this case, the selectItem, deleteItem and unselectItem widget methods will be useful.

    View Demo

    Show Example:
    AngularJS
    Knockout
    jQuery
    <div ng-controller="demoController" style="height: 100%;">
        <div dx-list="{
            dataSource: listDataSource,
            editEnabled: true,
            editConfig: {
                selectionType: 'control',
                selectionEnabled: true,
                deleteEnabled: true,
                deleteType: 'toggle'
            }
        }">
            <div data-options="dxTemplate:{ name:'item' }">
                <p style="font-size:larger;"><b>{{name}}</b></p>
                <p>Capital: <i>{{capital}}</i></p>
            </div>
        </div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.listDataSource = new DevExpress.data.DataSource([]);
        $.get("/Content/data/states.txt", function (data) {
            for (var i = 0; i < data.length; i++) {
                $scope.listDataSource.store().insert(data[i]);
            }
            $scope.listDataSource.load();
        }, "json");
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    
    body{
        text-align: center;
    }
    <div data-bind="dxList: {
        dataSource: listDataSource,
        editEnabled: true,
        editConfig: {
            selectionType: 'control',
            selectionEnabled: true,
            deleteEnabled: true,
            deleteType: 'toggle'
        }
    }">
        <div data-options="dxTemplate:{ name:'item' }">
            <p style="font-size:larger;"><b data-bind="text: name"></b></p>
            <p>Capital: <i data-bind="text: capital"></i></p>
        </div>
    </div>
    
    var myViewModel = {
        listDataSource: new DevExpress.data.DataSource([])
    }
    ko.applyBindings(myViewModel);
    $.get("/Content/data/states.txt", function (data) {
        for (var i = 0; i < data.length; i++) {
            myViewModel.listDataSource.store().insert(data[i]);
        }
        myViewModel.listDataSource.load();
    }, "json");
    
    body{
        text-align: center;
    }
    <div id="myList"></div>
    
    var listDataSource = new DevExpress.data.DataSource([]);
    $("#myList").dxList({
        editEnabled: true,
        dataSource: listDataSource,
        itemTemplate: function (itemData, itemIndex, itemElement) {
            itemElement.append("<p style=\"font-size:larger;\"><b>" + itemData.name + "</b></p>");
            itemElement.append("<p>Capital: <i>" + itemData.capital + "</i></p>");
        },
        editConfig: {
            selectionType: 'control',
            selectionEnabled: true,
            deleteEnabled: true,
            deleteType: 'toggle'
        }
    });
    $.get("/Content/data/states.txt", function (data) {
        for (var i = 0; i < data.length; i++) {
            listDataSource.store().insert(data[i]);
        }
        listDataSource.load();
    }, "json");
    
    body{
        text-align: center;
    }

    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 type from the list of predefined types. For this purpose, use the deleteType option of the editConfig configuration object. In addition, you can specify a custom HTML template for deletable list items using the itemTemplate option of the editConfig configuration object. In this instance, the deleteItem widget method will be useful.

    When an item is deleted, the itemDeleted event fires.

    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: 'context'
    Default for generic: 'static'
    Accepted Values: 'toggle'|'slideButton'|'slideItem'|'swipe'|'context'

    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: 'context'
    Default for generic: 'static'
    Accepted Values: 'static'|'toggle'|'slideButton'|'slideItem'|'swipe'|'context'

    Show Example:
    AngularJS
    Knockout
    jQuery
    <div ng-controller="demoController" style="height: 100%;">
        <div dx-list="{
            dataSource: listDataSource,
            editEnabled: true,
            height: '80%',
            editConfig: {
                deleteEnabled: true
            },
            bindingOptions: {
                'editConfig.deleteType': 'deleteType',
            }
        }">
            <div data-options="dxTemplate:{ name:'item' }">
                <p style="font-size:larger;"><b>{{name}}</b></p>
                <p>Capital: <i>{{capital}}</i></p>
            </div>
        </div>
        <div style="margin-top: 15px;" class="dx-fieldset">
            <div class="dx-field">
                <div class="dx-field-label">deleteType</div>
                <div class="dx-field-value" dx-select-box="{
                    dataSource: deleteTypes,
                    bindingOptions: {
                        value: 'deleteType'
                    }
                }"></div>
            </div>
        </div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.listDataSource = new DevExpress.data.DataSource([]);
        $scope.deleteTypes = ["static", "toggle", "slideButton", "slideItem", "swipe", "context"];
        $scope.deleteType = "slideButton";
        $.get("/Content/data/states.txt", function (data) {
            for (var i = 0; i < data.length; i++) {
                $scope.listDataSource.store().insert(data[i]);
            }
            $scope.listDataSource.load();
        }, "json");
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    
    body{
        text-align: center;
    }
    <div data-bind="dxList: {
        dataSource: listDataSource,
        editEnabled: true,
        height: '80%',
        editConfig: {
            deleteEnabled: true,
            deleteType: deleteType
        }
    }">
        <div data-options="dxTemplate:{ name:'item' }">
            <p style="font-size:larger;"><b data-bind="text: name"></b></p>
            <p>Capital: <i data-bind="text: capital"></i></p>
        </div>
    </div>
    <div style="margin-top: 15px;" class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">deleteType</div>
            <div class="dx-field-value" data-bind="dxSelectBox: {
                dataSource: deleteTypes,
                value: deleteType
            }"></div>
        </div>
    </div>
    
    var myViewModel = {
        listDataSource: new DevExpress.data.DataSource([]),
        deleteTypes: ["static", "toggle", "slideButton", "slideItem", "swipe", "context"],
        deleteType: ko.observable("slideButton")
    }
    ko.applyBindings(myViewModel);
    $.get("/Content/data/states.txt", function (data) {
        for (var i = 0; i < data.length; i++) {
            myViewModel.listDataSource.store().insert(data[i]);
        }
        myViewModel.listDataSource.load();
    }, "json");
    
    body{
        text-align: center;
    }
    <div id="myList"></div>
    <div style="margin-top: 15px;" class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">deleteType</div>
            <div class="dx-field-value" id="deleteTypeSelector"></div>
        </div>
    </div>
    
    var listDataSource = new DevExpress.data.DataSource([]);
    $("#myList").dxList({
        editEnabled: true,
        height: '80%',
        dataSource: listDataSource,
        itemTemplate: function (itemData, itemIndex, itemElement) {
            itemElement.append("<p style=\"font-size:larger;\"><b>" + itemData.name + "</b></p>");
            itemElement.append("<p>Capital: <i>" + itemData.capital + "</i></p>");
        },
        editConfig: {
            deleteEnabled: true,
            deleteType: "slideButton"
        }
    });
    $.get("/Content/data/states.txt", function (data) {
        for (var i = 0; i < data.length; i++) {
            listDataSource.store().insert(data[i]);
        }
        listDataSource.load();
    }, "json");
    $("#deleteTypeSelector").dxSelectBox({
        dataSource: ["static", "toggle", "slideButton", "slideItem", "swipe", "context"],
        value: "slideButton",
        onValueChanged: function (e) {
            $("#myList").dxList("instance").option("editConfig.deleteType", e.value);
        }
    });
    
    body{
        text-align: center;
    }

    itemRender

    Deprecated

    Use the itemTemplate option instead.

    itemTemplate

    The template used to render list items in edit mode.

    Type: String|function|DOM Node|jQuery
    Function parameters:
    itemData: Object
    The item object to be rendered.
    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
    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 selectionType/deleteType option. To display and process list items in edit mode in a custom way, specify the itemTemplate option.

    NOTE: A binding context of an item template is the data source object that corresponds to the currently rendered item. So, you can bind template elements to the item object's fields directly (see the code above). To access another binding context within an item template, use the Knockout/Angular binding variables.

    See Also

    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: 'context'
    Default for ios7: 'slide'
    Accepted Values: 'context'|'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 predefined modes. For this purpose, use the selectionType option of the editConfig configuration object. In addition, you can specify a custom HTML template for selectable list items using the itemTemplate option of the editConfig configuration object. In this instance, the selectItem and unselectItem widget methods will be useful.

    When an item is selected or deselected, the selectionChanged event fires.

    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 itemTemplate configuration option. To select and deselect an item, use the selectItem and unselectItems methods, respectively.

    Show Example:
    AngularJS
    Knockout
    jQuery
    <div ng-controller="demoController" style="height: 100%;">
        <div dx-list="{
            dataSource: listDataSource,
            editEnabled: true,
            height: '80%',
            editConfig: {
                selectionEnabled: true
            },
            bindingOptions: {
                'editConfig.selectionType': 'selectionType',
            }
        }">
            <div data-options="dxTemplate:{ name:'item' }">
                <p style="font-size:larger;"><b>{{name}}</b></p>
                <p>Capital: <i>{{capital}}</i></p>
            </div>
        </div>
        <div style="margin-top: 15px;" class="dx-fieldset">
            <div class="dx-field">
                <div class="dx-field-label">selectionType</div>
                <div class="dx-field-value" dx-select-box="{
                    dataSource: selectionTypes,
                    bindingOptions: {
                        value: 'selectionType'
                    }
                }"></div>
            </div>
        </div>
    </div>
    
    //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");
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.listDataSource = new DevExpress.data.DataSource([]);
        $scope.selectionTypes = ["item", "control"];
        $scope.selectionType = "item";
        $.get("/Content/data/states.txt", function (data) {
            for (var i = 0; i < data.length; i++) {
                $scope.listDataSource.store().insert(data[i]);
            }
            $scope.listDataSource.load();
        }, "json");
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    
    body{
        text-align: center;
    }
    <div data-bind="dxList: {
        dataSource: listDataSource,
        editEnabled: true,
        height: '80%',
        editConfig: {
            selectionEnabled: true,
            selectionType: selectionType
        }
    }">
        <div data-options="dxTemplate:{ name:'item' }">
            <p style="font-size:larger;"><b data-bind="text: name"></b></p>
            <p>Capital: <i data-bind="text: capital"></i></p>
        </div>
    </div>
    <div style="margin-top: 15px;" class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">selectionType</div>
            <div class="dx-field-value" data-bind="dxSelectBox: {
                dataSource: selectionTypes,
                value: selectionType
            }"></div>
        </div>
    </div>
    
    //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");
    var myViewModel = {
        listDataSource: new DevExpress.data.DataSource([]),
        selectionTypes: ["item", "control"],
        selectionType: ko.observable("item")
    }
    ko.applyBindings(myViewModel);
    $.get("/Content/data/states.txt", function (data) {
        for (var i = 0; i < data.length; i++) {
            myViewModel.listDataSource.store().insert(data[i]);
        }
        myViewModel.listDataSource.load();
    }, "json");
    
    body{
        text-align: center;
    }
    <div id="myList"></div>
    <div style="margin-top: 15px;" class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">selectionType</div>
            <div class="dx-field-value" id="selectionTypeSelector"></div>
        </div>
    </div>
    
    //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");
    var listDataSource = new DevExpress.data.DataSource([]);
    $("#myList").dxList({
        editEnabled: true,
        height: '80%',
        dataSource: listDataSource,
        itemTemplate: function (itemData, itemIndex, itemElement) {
            itemElement.append("<p style=\"font-size:larger;\"><b>" + itemData.name + "</b></p>");
            itemElement.append("<p>Capital: <i>" + itemData.capital + "</i></p>");
        },
        editConfig: {
            selectionEnabled: true,
            selectionType: "item"
        }
    });
    $.get("/Content/data/states.txt", function (data) {
        for (var i = 0; i < data.length; i++) {
            listDataSource.store().insert(data[i]);
        }
        listDataSource.load();
    }, "json");
    $("#selectionTypeSelector").dxSelectBox({
        dataSource: ["item", "control"],
        value: "item",
        onValueChanged: function (e) {
            $("#myList").dxList("instance").option("editConfig.selectionType", e.value);
        }
    });
    
    body{
        text-align: center;
    }