ListView provides the option to load the data either from local data sources or remote data services. This can be done through dataSource property which supports the data type of array or through DataManager.
ListView supports different kind 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 bind to ListView, you should map the fields properly. Otherwise, the ListView properties remain as undefined or null.
Local data represents in two ways, which are described below.
ListView supports to load the 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';
export default class App extends React.Component<{}, {}> {
private data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
render() {
return (
// specifies the tag to render the ListView component
<ListViewComponent id='list' dataSource={this.data} ></ListViewComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>
</head>
<body>
<div id='element' style="margin:0 auto; max-width:400px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#list {
display: block;
max-width: 400px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
}
render() {
return (
// specifies the tag to render the ListView component
<ListViewComponent id='list' dataSource={this.data}></ListViewComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
ListView can generate its list items through an array of complex data. To get it work properly, you should map the appropriate columns to field 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';
export default class App extends React.Component<{}, {}> {
//define the array of JSON
private 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"
}
];
private fields = { text: "Name", tooltip: "Name", id: "id" };
render() {
return (
// specifies the tag to render the ListView component
<ListViewComponent
id="list"
dataSource={this.settings}
fields={this.fields}
showHeader={true}
headerTitle="Device settings"
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>
</head>
<body>
<div id='element' style="margin:0 auto; max-width:400px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#list {
display: block;
max-width: 400px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
constructor() {
super(...arguments);
//define the array of JSON
this.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"
}
];
this.fields = { text: "Name", tooltip: "Name", id: "id" };
}
render() {
return (
// specifies the tag to render the ListView component
<ListViewComponent id="list" dataSource={this.settings} fields={this.fields} showHeader={true} headerTitle="Device settings"/>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
ListView supports to retrieve the data from remote data services with the help of DataManager component and Query property allows to fetch data and return it to ListView from the database.
In the below sample, displayed 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, ODataV4Adaptor } from '@syncfusion/ej2-data';
export default class App extends React.Component<{}, {}> {
//bind the DataManager instance to dataSource property
private data = new DataManager({ url: "//js.syncfusion.com/ejServices/Wcf/Northwind.svc/", crossDomain: true });
//bind the Query instance to query property
private query = new Query()
.from("Products")
.select("ProductID,ProductName")
.take(6);
//map the appropriate columns to fields property
private fields = { id: "ProductID", text: "ProductName" };
render() {
return (
// specifies the tag to render the ListView component
<ListViewComponent
id="list"
dataSource={this.data}
fields={this.fields}
query={this.query}
showHeader={true}
headerTitle="Product Name"
/>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>
</head>
<body>
<div id='element' style="margin:0 auto; max-width:400px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#list {
display: block;
max-width: 400px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
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';
export default class App extends React.Component {
constructor() {
super(...arguments);
//bind the DataManager instance to dataSource property
this.data = new DataManager({ url: "//js.syncfusion.com/ejServices/Wcf/Northwind.svc/", crossDomain: true });
//bind the Query instance to query property
this.query = new Query()
.from("Products")
.select("ProductID,ProductName")
.take(6);
//map the appropriate columns to fields property
this.fields = { id: "ProductID", text: "ProductName" };
}
render() {
return (
// specifies the tag to render the ListView component
<ListViewComponent id="list" dataSource={this.data} fields={this.fields} query={this.query} showHeader={true} headerTitle="Product Name"/>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));