Data binding in EJ2 TypeScript ListView control

28 Jan 202513 minutes to read

The ListView control provides an option to load the data either from a local data source or remote data services. This can be done through the dataSource property, which supports the data type of an array or DataManager.

ListView supports different kinds of data services such as OData, OData V4, and Web API, and data formats like XML, JSON, and 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 that will be added before to the list item 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, that 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 can be represented in two ways:

  • Array of simple data.
  • Array of JSON data.

Array of simple data

The ListView control supports loading an array of primitive data like strings and numbers. Here, both value and text fields act the same.

import { ListView } from '@syncfusion/ej2-lists';

//define the array of string
let arts: string[] = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

//Initialize ListView control
let listviewInstance: ListView = new ListView({
    //set the data to datasource property
    dataSource: arts
});

//Render initialized ListView
listviewInstance.appendTo("#element");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for 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 ListView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
    <style>
        #element {
            display: block;
            max-width: 400px;
            margin: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

Array of JSON data

ListView can generate its list items through an array of complex data. To ensure it works properly, you should map the appropriate columns to the field property.

In the following example, the role column is mapped with the text field.

import { ListView } from '@syncfusion/ej2-lists';

//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' }
];

//Initialize ListView control
let listviewInstance: ListView = new ListView({
    //set the data to datasource property
    dataSource: settings,

    //map the appropriate columns to fields property
    fields: { text: 'Name', tooltip: 'Name', id: 'id' },

    //set the header tittle for the list
    headerTitle: 'Device settings',
    showHeader: true

});

//Render initialized ListView
listviewInstance.appendTo("#element");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for 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 ListView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
    <style>
        #element {
            display: block;
            max-width: 350px;
            margin: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

Bind to remote data

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

In the following sample, the first 10 employees from the ListView table are displayed.

import { ListView } from '@syncfusion/ej2-lists';
//import DataManager related classes
import { DataManager, Query } from '@syncfusion/ej2-data';

//Initialize ListView control
let listviewInstance: ListView = new ListView({
    //bind the DataManager instance to dataSource property
    dataSource: new DataManager({
        url: 'https://services.syncfusion.com/js/production/api/',
        crossDomain: true
    }),

    //Initialize query with the Query instance to get specified set of data
    query: new Query().from('ListView').select('EmployeeID,FirstName').take(10),

    //Map the appropriate columns to fields property
    fields: { id: 'EmployeeID', text: 'FirstName' },

    //Set header title
    headerTitle: 'Employees',

    //Set true to show header title
    showHeader: true
});

//Render initialized ListView
listviewInstance.appendTo("#element");
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for 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 ListView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
    <style>
        #element {
            display: block;
            max-width: 350px;
            margin: auto;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}