React List Props

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

This property is used when the UI component is displayed on a platform whose guidelines include the active state change for UI components.

View Demo

See Also

• List - Item Deletion - User Interaction

To obtain items in the same order as they are displayed in the UI component, read the items property for jQuery or bind it to a component property for Angular, Vue, and React.

See Also

• List - Item Reordering - User Interaction
• itemReordered

If the property is set to true, you can scroll the list content up (down) even if you have reached the bottom (top) boundary. But when you release the content, it returns to the bound position. If the property value is false, you can scroll the list content until you reach the boundary.

See Also

• List - Scrolling - User Interaction

This property makes sense if the grouped property is set to true.

If the collapsibleGroups property is set to true, the down arrow is displayed to the right of a group header. An end-user can collapse or expand a group simply clicking the group header.

See Also

• List - Expand and Collapse a Group

View Demo

If you use DevExtreme ASP.NET MVC Controls, refer to the Bind Controls to Data article.

The List works with collections of string values or objects.

Depending on your data source, bind the List to data as follows. If the data source provides objects, also specify the itemTemplate. You can skip this part if the objects contain fields described in the items section.

• Data Array
  Assign the array to the dataSource property.

• Read-Only Data in JSON Format
  Set the dataSource property to the URL of a JSON file or service that returns JSON data.

• OData
  Implement an ODataStore.

• Web API, PHP, MongoDB
  Use one of the following extensions to enable the server to process data according to the protocol DevExtreme UI components use:

  • DevExtreme.AspNet.Data
  • DevExtreme-PHP-Data
  • devextreme-query-mongodb

  Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

  jQuery

  JavaScript

  $(function() {
      let serviceUrl = "https://url/to/my/service";
      $("#listContainer").dxList({
          // ...
          dataSource: DevExpress.data.AspNet.createStore({
              key: "ID",
              loadUrl: serviceUrl + "/GetAction",
              insertUrl: serviceUrl + "/InsertAction",
              updateUrl: serviceUrl + "/UpdateAction",
              deleteUrl: serviceUrl + "/DeleteAction"
          })
      })
  });

  Angular

  app.component.ts

  app.component.html

  app.module.ts

  import { Component } from '@angular/core';
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      store: CustomStore;
      constructor() {
          let serviceUrl = "https://url/to/my/service";
          this.store = createStore({
              key: "ID",
              loadUrl: serviceUrl + "/GetAction",
              insertUrl: serviceUrl + "/InsertAction",
              updateUrl: serviceUrl + "/UpdateAction",
              deleteUrl: serviceUrl + "/DeleteAction"
          })
      }
  }

  <dx-list ...
      [dataSource]="store">
  </dx-list>

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
  import { DxListModule } from 'devextreme-angular';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          DxListModule
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

  Vue

  App.vue

  <template> 
      <DxList ...
          :data-source="store" />
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  import { DxList } from 'devextreme-vue/list';
  
  export default {
      components: {
          DxList
      },
      data() {
          const serviceUrl = "https://url/to/my/service";
          const store = createStore({
              key: "ID",
              loadUrl: serviceUrl + "/GetAction",
              insertUrl: serviceUrl + "/InsertAction",
              updateUrl: serviceUrl + "/UpdateAction",
              deleteUrl: serviceUrl + "/DeleteAction"
          });
          return {
              store
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  import 'devextreme/dist/css/dx.common.css';
  import 'devextreme/dist/css/dx.light.css';
  
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  import List from 'devextreme-react/list';
  
  const serviceUrl = "https://url/to/my/service";
  const store = createStore({
      key: "ID",
      loadUrl: serviceUrl + "/GetAction",
      insertUrl: serviceUrl + "/InsertAction",
      updateUrl: serviceUrl + "/UpdateAction",
      deleteUrl: serviceUrl + "/DeleteAction"
  });
  
  class App extends React.Component {
      render() {
          return (
              <List ...
                  dataSource={store} />
          );
      }
  }
  export default App;

• Any other data source
  Implement a CustomStore.

Regardless of the data source on the input, the List always wraps it in the DataSource object. This object allows you to sort, filter, group, and perform other data shaping operations. To get its instance, call the getDataSource() method.

Set this property to the name of a data field that provides displayed values...

displayExpr: "name"

... or to a function that returns the displayed value:

displayExpr: function(item) {
    // "item" can be null
    return item && 'ID: ' + item.id + ', Name: ' + item.name;
}

Leave this property unspecified or set it to this if the data source contains primitives.

When this property is true, make sure that all data source objects have the following structure:

const dataSource = [{
    key: "Group 1", // Group caption 
    items: [ // Items in the group
        { ... },
        { ... }
    ]
}, {
    // ...
}];

View Demo

You can supply data to this structure using the DataSource object's group property.

See Also

• List - Grouping

View Demo

See Also

• Customize Group Headers
• Custom Templates

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

Use the ListItemDeleteMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Static, Toggle, SlideButton, SlideItem, Swipe, and Context.

View Demo

See Also

• List - Item Deletion - User Interaction

See the Sortable configuration for properties that you can specify in this object.

The items array can contain:

• Strings
• Objects with fields described in this section
• Objects with any other fields. In this case, specify the itemTemplate.

If you need to update the UI component items, reassign the entire items array as shown in the following example:

listInstance.option('items', newItems);

As an alternative to items, you can use the dataSource property. It accepts the DataSource object, whose underlying stores provide an API that allows you to update individual items without reassigning the entire item collection.

See Also

• Customize Item Appearance
• Custom Templates

See Also

• Specify data using dataSource property
• Specify data using items property

See Also

• List - Item Context Menu

Use the ListMenuMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Context and Slide.

See Also

• List - Item Context Menu

See Also

• List - Localization

See Also

• grouped

See Also

• Get a UI component Instance in Angular | AngularJS | Knockout | Vue | React

Note that the itemDeleted event is raised only if an item is deleted using the appropriate method of the UI component or end-user interaction. If you delete an item from an observable array passed to the dataSource or items property, the UI component entirely reloads the items array without raising the itemDeleted and itemDeleting events.

See Also

• List - Handle Deletion-Related Events

You can cancel item deletion by setting the handler parameter's cancel field to true. This field also accepts a Promise (jQuery or native), which enables you to perform an asynchronous action before an item is deleted.

const widgetOptions = {
    onItemDeleting: function(e) {
        const d = $.Deferred();
        DevExpress.ui.dialog.confirm("Do you really want to delete the item?")
            .done(function(value) { 
                d.resolve(!value);
            })
            .fail(d.reject);
        e.cancel = d.promise();
    }
}

Note that the onItemDeleted and onItemDeleting handlers are not executed if an item is deleted from the data source without using the UI component's UI or API.

See Also

• itemDragging
• List - Handle Reordering-Related Events

See Also

• List - Touch-Screen Gestures

The following example shows how to subscribe to component property changes:

$(function() {
    $("#listContainer").dxList({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<dx-list ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-list>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxListModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxListModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  

<template> 
    <DxList ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script> 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 
import DxList from 'devextreme-vue/list'; 

export default { 
    components: { 
        DxList
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react'; 
import 'devextreme/dist/css/dx.common.css'; 
import 'devextreme/dist/css/dx.light.css'; 

import List from 'devextreme-react/list'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <List ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

See Also

• Paging

See Also

• List - Touch-Screen Gestures

See Also

• List - Handle Scrolling-Related Events

See Also

• selectAllMode
• List - Handle Selection-Related Events

See Also

• List - Localization

Use the ListPageLoadMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: ScrollBottom and NextButton.

See Also

• List - Paging

See Also

• List - Localization

See Also

• List - Localization

If the property is set to true, list data is refreshed each time you pull down and release list contents.

See Also

• List - Touch-Screen Gestures

See Also

• List - Localization

See Also

• push(changes) in: ArrayStore | CustomStore | LocalStore | ODataStore
• DataSource.reshapeOnPush

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

See Also

• Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors

See Also

• List - Scrolling - User Interaction

See Also

• List - Scrolling - User Interaction

See Also

• List - Scrolling - User Interaction

See the TextBox Configuration for properties you can specify in this object.

View Demo

See Also

• Searching

If you need to search several fields, assign an array of field names to this property.

searchExpr: ["firstName", "lastName"]

Use the CollectionSearchMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Contains, StartsWith, and Equals.

The selectAllMode specifies how records should be selected on clicking the "Select All" check box. The following modes are available:

• "page"
  Selects items on the currently rendered pages.

• "allPages"
  Selects items on all pages.

View Demo

See Also

• List - Selection - User Interaction

The item keys can be specified using the keyExpr property or the key property within the underlying Store.

See Also

• key in ArrayStore | CustomStore | LocalStore | ODataStore

This property accepts the following values.

• "none"
  Selection is disabled.

• "single"
  A user can select only a single item.

• "multiple"
  A user can select several items.

• "all"
  The multiple mode with a check box that selects/unselects all items.
  If paging is enabled, the select all check box selects only items that have been already loaded.

  NOTE

  The check box that selects/unselects all items is displayed only if the showSelectionControls property is enabled. Otherwise, the "all" mode works as "multiple".

Use the ListSelectionMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Single, Multiple, All, and None.

View Demo

See Also

• List - Selection - User Interaction

Setting this property makes sense only when the useNativeScrolling property is set to false.

Use the ShowScrollbarMode enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: OnScroll, OnHover, Always, and Never.

See Also

• List - Scrolling - User Interaction

See Also

• List - Selection - User Interaction

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

See Also

• List - Scrolling - User Interaction

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }