UI Widgets List

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.

JavaScript
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.

HTML
<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>  
    <div data-options="dxTemplate: { name: 'item' }">
        <span data-bind="text: name"></span> (hired at <span data-bind="text: hired"></span>)
    </div>   
</div>

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:
jQuery
<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>  
    <div data-options="dxTemplate:{name:'item'}">
        <span data-bind="text: name"></span> (hired at <span data-bind="text: hired"></span>)
    </div>   
</div>
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 }
        ]
    }
];

Configuration

An object defining configuration options for the dxList widget.

Methods

This section describes members used to manipulate the widget.