JavaScript/jQuery List - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The List displays data from a local or remote data storage and allows users to group, select, search, reorder, and delete items.

This tutorial explains how to add a List to a page, bind it to data, and configure its core features. The following control demonstrates the result:

Each section in this tutorial covers a single configuration step. You can also find the full code in the GitHub repository.

View on GitHub

Create a List

Add DevExtreme to your jQuery application and use the following code to create a List:

index.js
index.html
  • $(function () {
  • $('#list').dxList({
  • // Configuration goes here
  • });
  • });
  • <html>
  • <head>
  • <!-- ... -->
  • <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  •  
  • <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css">
  • <link rel="stylesheet" href="index.css">
  •  
  • <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script>
  • <script src="products.js"></script>
  • <script type="text/javascript" src="index.js"></script>
  • </head>
  • <body class="dx-viewport">
  • <div id="list"></div>
  • </body>
  • </html>

Bind the List to Data

The List can load data from different data source types. To use a local array, assign it to the dataSource property. If array elements are objects, use the displayExpr property to specify the data field that supplies values to the list. For information on other data source types, refer to the following articles:

index.js
products.js
  • $(function () {
  • $('#list').dxList({
  • dataSource: products,
  • displayExpr: 'Name',
  • });
  • });
  • const products = [{
  • ID: 1,
  • Name: "HD Video Player",
  • Category: "Video Players"
  • },
  • {
  • ID: 3,
  • Name: "SuperPlasma 50",
  • Category: "Televisions"
  • },
  • {
  • ID: 4,
  • Name: "SuperLED 50",
  • Category: "Televisions"
  • },
  • {
  • ID: 5,
  • Name: "SuperLED 42",
  • Category: "Televisions"
  • },
  • {
  • ID: 6,
  • Name: "SuperLCD 55",
  • Category: "Televisions"
  • },
  • {
  • ID: 7,
  • Name: "SuperLCD 42",
  • Category: "Televisions"
  • },
  • {
  • ID: 8,
  • Name: "SuperPlasma 65",
  • Category: "Televisions"
  • },
  • {
  • ID: 9,
  • Name: "SuperLCD 70",
  • Category: "Televisions"
  • },
  • {
  • ID: 10,
  • Name: "DesktopLED 21",
  • Category: "Monitors"
  • },
  • {
  • ID: 12,
  • Name: "DesktopLCD 21",
  • Category: "Monitors"
  • },
  • {
  • ID: 13,
  • Name: "DesktopLCD 19",
  • Category: "Monitors"
  • },
  • {
  • ID: 14,
  • Name: "Projector Plus",
  • Category: "Projectors"
  • },
  • {
  • ID: 15,
  • Name: "Projector PlusHD",
  • Category: "Projectors"
  • },
  • {
  • ID: 17,
  • Name: "ExcelRemote IR",
  • Category: "Automation"
  • },
  • {
  • ID: 18,
  • Name: "ExcelRemote BT",
  • Category: "Automation"
  • },
  • {
  • ID: 19,
  • Name: "ExcelRemote IP",
  • Category: "Automation"
  • }];

Select Items

The List supports "single", "multiple", and "all" item selection modes. To enable selection, assign one of these modes to the selectionMode property.

index.js
  • $(function () {
  • $('#list').dxList({
  • // ...
  • selectionMode: 'single',
  • });
  • });

View Demo

Group Items

The List can display items as a two-level hierarchy: parent and child items. To group items, set the grouped property to true and ensure that data is structured as a hierarchical array of objects. The control recognizes a hierarchy if objects contain properties named key and nested lists named items. Refer to the following help topic for more information and additional ways to build a hierarchy: Grouping in the Data Source.

You can also display a hierarchy in a list bound to a flat array. In this case, use the DataSource component. Wrap your array in a store as shown below. Assign the grouping field to the DataSource's group property.

index.js
  • $(function () {
  • $('#list').dxList({
  • dataSource: new DevExpress.data.DataSource({
  • store: products,
  • group: 'Category',
  • }),
  • grouped: true,
  • });
  • });

View Demo

Search Items

To add a search bar to the List, set the searchEnabled property to true. Use the searchMode property to specify whether found list items should start with, contain, or match the search string.

index.js
  • $(function () {
  • $('#list').dxList({
  • // ...
  • searchEnabled: true,
  • searchMode: 'contains',
  • });
  • });

View Demo

Reorder Items

Users can drag and drop list items to reorder them. To configure this functionality, define the itemDragging object. Within this object, set the allowReordering property to true.

index.js
  • $(function () {
  • $('#list').dxList({
  • // ...
  • itemDragging: {
  • allowReordering: true,
  • },
  • });
  • });

View Demo

Delete Items

To allow users to delete items from the List, set the allowItemDeleting property to true. Use the itemDeleteMode property to select the UI elements and/or user actions that remove items.

index.js
  • $(function () {
  • $('#list').dxList({
  • // ...
  • allowItemDeleting: true,
  • });
  • });

View Demo