A list widget.

Type: Object

The dxList widget displays selected items as a scrollable list. The list items are loaded from an array specified using the dataSource configuration option. You can specify a simple array or the array of objects as the widget data source to display list items in a single list. If you want the widget to display a grouped list, assign true to the grouped configuration option. The data source array for a grouped list should appear as follows.

var employees = [
        key: 'Management',
        items: [
            { name: "Bob", hired: 2005 },
            { name: "John", hired: 2007 },
            { name: "Frank", hired: 2001 },
            { name: "Robert", hired: 2007 },
        key: 'Manufacturing',
        items: [
            { name: "Paul", hired: 2011 },
            { name: "Elizabeth", hired: 2000 },
            { name: "Mary", hired: 2002 },
            { name: "Michael", hired: 2003 },
            { name: "George", hired: 2002 }
        key: 'Sales',
        items: [
            { name: "Deborah", hired: 2000 },
            { name: "Lisa", hired: 1999 },
            { name: "Mark", hired: 2011 },
            { name: "Joseph", hired: 2000 }

Each key item field value represents a group title. The group items are listed in the items array.

To create the dxList widget, add a div element with dxList binding within the body of the required view to create the dxList widget, and insert a group and an item template in the widget container tag to specify the format for groups and items.

<div data-bind="dxList: { dataSource: employees, grouped: true }">
    <div data-options="dxTemplate: { name: 'group' }">
        <b><span data-bind="text: key"></span></b> (<span data-bind="text: items.length"></span>)
    <div data-options="dxTemplate: { name: 'item' }">
        <span data-bind="text: name"></span> (hired at <span data-bind="text: hired"></span>)

See the Customize Widget Item Appearance topic to learn how to adjust the appearance of widget items.

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:


An object defining configuration options for the dxList widget.


This section describes members used to manipulate the widget.