Data binding in React ListView component

5 Mar 202519 minutes to read

ListView provides the option to load data either from local data sources or remote data services. This can be done through the dataSource property, which supports array data types or DataManager.

ListView supports different kinds of data services such as OData, OData V4, Web API and data formats like XML, JSON, JSONP with the help of DataManager Adaptors.

Fields Type Description
id string Specifies ID attribute of list item, mapped in dataSource.
text string Specifies list item display text field.
isChecked string Specifies checked status of list item.
isVisible string Specifies visibility state of list item.
enabled string Specifies enabled state of list item.
iconCss string Specifies the icon class of each list item which will be add before to inner text.
child string Specifies child dataSource fields.
tooltip string Specifies tooltip title text field.
groupBy string Specifies category of each list item.
sortBy string Specifies sorting field, which is used to sort the listview data.
htmlAttributes string Specifies list item html attributes field.

When complex data is bound to ListView, you should map the fields properly. Otherwise, the ListView properties remain as undefined or null.

Bind to local data

Local data represents in two ways, which are described below.

  • Array of simple data
  • Array of JSON data.

Array of simple data

ListView supports loading an array of primitive data like string and numbers. Here, both value and text field act as same.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    let data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    return (
        // specifies the tag to render the ListView component
        <ListViewComponent id='list' dataSource={data}></ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {
  let data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

  return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={data} ></ListViewComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Array of JSON data

ListView can generate its list items from an array of complex data. To make it work properly, you should map the appropriate columns to fields property.

The below example illustrates the concept of binding Array of JSON data.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    //define the array of JSON
    let settings = [
        {
            Name: "Display",
            id: "list-01"
        },
        {
            Name: "Notification",
            id: "list-02"
        },
        {
            Name: "Sound",
            id: "list-03"
        },
        {
            Name: "Apps",
            id: "list-04"
        },
        {
            Name: "Storage",
            id: "list-05"
        },
        {
            Name: "Battery",
            id: "list-06"
        }
    ];
    let fields = { text: "Name", tooltip: "Name", id: "id" };
    return (
        // specifies the tag to render the ListView component
        <ListViewComponent id="list" dataSource={settings} fields={fields} showHeader={true} headerTitle="Device settings" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {
  //define the array of JSON
  let settings: { [key: string]: Object }[] = [
    {
      Name: "Display",
      id: "list-01"
    },
    {
      Name: "Notification",
      id: "list-02"
    },
    {
      Name: "Sound",
      id: "list-03"
    },
    {
      Name: "Apps",
      id: "list-04"
    },
    {
      Name: "Storage",
      id: "list-05"
    },
    {
      Name: "Battery",
      id: "list-06"
    }
  ];
  let fields = { text: "Name", tooltip: "Name", id: "id" };
  return (
    // specifies the tag to render the ListView component
    <ListViewComponent
      id="list"
      dataSource={settings}
      fields={fields}
      showHeader={true}
      headerTitle="Device settings"
    />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Bind to remote data

ListView supports retrieving data from remote data services with the help of DataManager component and Query property allows fetching data and returning it to ListView from the database.

In the below sample, displays the first 6 Products from Product table of NorthWind data service.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
//import DataManager related classes
import { DataManager, Query } from '@syncfusion/ej2-data';
function App() {
  //bind the DataManager instance to dataSource property
  let data = new DataManager({
    url: 'https://services.syncfusion.com/react/production/api/',
    crossDomain: true
  });
  //bind the Query instance to query property
  let query = new Query().from('ListView').select('EmployeeID,FirstName').take(10);
  //map the appropriate columns to fields property
  let fields = {
    id: 'EmployeeID',
    text: 'FirstName'
  };
  return (
    // specifies the tag to render the ListView component
    <ListViewComponent id="list" dataSource={data} fields={fields} query={query} showHeader={true} headerTitle="Employees" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
//import DataManager related classes
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';

function App() {
  //bind the DataManager instance to dataSource property
  let data = new DataManager({
    url: 'https://services.syncfusion.com/react/production/api/',
    crossDomain: true
  });

  //bind the Query instance to query property
  let query = new Query().from('ListView').select('EmployeeID,FirstName').take(10);

  //map the appropriate columns to fields property
  let fields = {
    id: 'EmployeeID',
    text: 'FirstName'
  };

  return (
    // specifies the tag to render the ListView component
    <ListViewComponent
      id="list"
      dataSource={data}
      fields={fields}
      query={query}
      showHeader={true}
      headerTitle="Employees"
    />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>