ListViewComponent
1 Oct 202524 minutes to read
Represents ListView component for React
<ListViewComponent dataSource={data}/>
Properties
animation AnimationSettings
The animation property provides an option to apply the different
animations on the ListView component.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
arts = [{
'text': 'Asia',
'id': '01',
'category': 'Continent',
'child': [{
'text': 'India',
'id': '1',
'category': 'Asia',
'child': [{
'text': 'Delhi',
'id': '1001',
'category': 'India',
},
{
'text': 'Kashmir',
'id': '1002',
'category': 'India',
}
]
},
{
'text': 'China',
'id': '2',
'category': 'Asia',
'child': [{
'text': 'Zhejiang',
'id': '2001',
'category': 'China',
},
{
'text': 'Shandong',
'id': '2003',
'category': 'China',
}]
}]
},
{
'text': 'North America',
'id': '02',
'category': 'Continent',
'child': [{
'text': 'USA',
'id': '3',
'category': 'North America',
'child': [{
'text': 'California',
'id': '3001',
'category': 'USA',
},
{
'text': 'New York',
'id': '3002',
'category': 'USA',
}]
},
{
'text': 'Canada',
'id': '4',
'category': 'North America',
'child': [{
'text': 'Ontario',
'id': '4001',
'category': 'Canada',
},
{
'text': 'Alberta',
'id': '4002',
'category': 'Canada',
},
{
'text': 'Manitoba',
'id': '4003',
'category': 'Canada',
}]
}]
},
{
'text': 'Australia',
'id': '04',
'category': 'Continent',
'child': [{
'text': 'Australia',
'id': '7',
'category': 'Australia',
'child': [{
'text': 'Sydney',
'id': '7001',
'category': 'Australia',
},
{
'text': 'Melbourne',
'id': '7002',
'category': 'Australia',
},
{
'text': 'Brisbane',
'id': '7003',
'category': 'Australia',
}]
}]
}
];
//Map the appropriate columns to fields property
fields = { groupBy: 'category' };
animation = {ease:"ease", duration:400, effect:"Zoom"}
render() {
return (
<ListViewComponent id="list" dataSource={this.arts} fields={this.fields} showHeader={true} headerTitle="Continent" animation={this.animation}/>
);}
}
render(<Default />, document.getElementById("sample"));
Defaults to { effect: ‘SlideLeft’, duration: 400, easing: ‘ease’ }
checkBoxPosition checkBoxPosition
The checkBoxPosition is used to set the position of check box in a list item.
By default, the checkBoxPosition is Left, which will appear before the text content in a list item.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
checkBoxPosition = "Right";
render() {
return (
<ListViewComponent id="list" dataSource={this.data} showCheckBox={true} checkBoxPosition={this.checkBoxPosition} />
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to ‘Left’
cssClass string
The cssClass property is used to add a user-preferred class name in the root element of the ListView,
using which we can customize the component (both CSS and functionality customization)
<style>
.custom
{
font-style: italic;
}
</style> import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
cssClass = "custom";
render() {
return (
<ListViewComponent id="list" dataSource={this.data} cssClass={this.cssClass} />
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to ’’
dataSource { : }[]|string[]|number[]|DataManager
The dataSource provides the data to render the ListView component which is mapped with the fields of ListView.
Defaults to []
enable boolean
If enable set to true, the list items are enabled.
And, we can disable the component using this property by setting its value as false.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
render() {
return (
<ListViewComponent id="list" dataSource={this.data} enable= {false} />
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to true
enableHtmlSanitizer boolean
Specifies whether to display or remove the untrusted HTML values in the ListView component.
If ‘enableHtmlSanitizer’ set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
render() {
return (
<ListViewComponent id="list" dataSource={this.data} enableHtmlSanitizer= {true} />
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to true
enablePersistence boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
enableRtl boolean
Enable or disable rendering component in right to left direction.
Defaults to false
enableVirtualization boolean
If enableVirtualization set to true, which will increase the ListView performance, while loading a large amount of data.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent,Inject, Virtualization } from '@syncfusion/ej2-react-lists'; /*Inject Virtualization*/
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
constructor(props) {
super(props);
this.listData = [
{ text: "Nancy", id: "0" },
{ text: "Andrew", id: "1" },
{ text: "Janet", id: "2" },
{ text: "Margaret", id: "3" },
{ text: "Steven", id: "4" },
{ text: "Laura", id: "5" },
{ text: "Robert", id: "6" },
{ text: "Michael", id: "7" },
{ text: "Albert", id: "8" },
{ text: "Nolan", id: "9" }
];
for (let i = 10; i <= 1010; i++) {
let index = parseInt((Math.random() * 10).toString());
this.listData.push({ text: this.listData[index].text, id: i.toString() });
}
}
render() {
return (
<ListViewComponent id="list" dataSource={this.listData} enableVirtualization={true}>
<Inject services={[Virtualization]}/>
</ListViewComponent>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to false
fields FieldSettingsModel
The fields is used to map keys from the dataSource which extracts the appropriate data from the dataSource
with specified mapped with the column fields to render the ListView.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = [{
'text': 'Audi A4',
'id': '9bdb',
'enabled':true,
'Icon': "file",
'check':true,
'visible':true,
'category': 'Audi'
},
{
'text': 'Audi A5',
'id': '4589',
'Icon': "file",
'enabled':'true',
'check':false,
'category': 'Audi'
},
{
'text': 'Audi A6',
'id': 'e807',
'Icon': "file",
'enabled':'false',
'check':false,
'visible':true,
'category': 'Audi'
},
{
'text': 'BMW 501',
'id': 'f849',
'enabled':true,
'Icon': "file",
'visible':true,
'check':true,
'category': 'BMW'
},
{
'text': 'BMW 502',
'id': '7aff',
'Icon': "file",
'enabled':false,
'check':false,
'visible':true,
'category': 'BMW'
},
{
'text': 'BMW 503',
'id': 'b1da',
'Icon': "file",
'enabled':true,
'visible':false,
'check':false,
'category': 'BMW'
}];
fields = { groupBy: 'category', tooltip: 'text' , text:'text', id:'id', enabled:'enabled',isVisible:'visible', isChecked:'check', iconCss:'Icon'}
render() {
return (
<ListViewComponent id="list" dataSource={this.data} fields ={this.fields} showCheckBox = {true} />
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to defaultMappedFields
groupTemplate string|function|JSX.Element
The ListView has an option to custom design the group header title with the help of groupTemplate property.
Defaults to null
headerTemplate string|function|JSX.Element
The ListView has an option to custom design the ListView header title with the help of headerTemplate property.
Defaults to null
headerTitle string
The headerTitle is used to set the title of the ListView component.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
render() {
return (
<div>
<ListViewComponent id='list' dataSource={this.data} headerTitle="List of Arts" showHeader={true}>
</ListViewComponent>
</div>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to ””
height number|string
Defines the height of the ListView component which accepts both string and number values.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
render() {
return (
<ListViewComponent id="list" dataSource={this.data} height="200px" />
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to ’’
htmlAttributes { : }
The htmlAttributes allows additional attributes such as id, class, etc., and
accepts n number of attributes in a key-value pair format.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
htmlAttributes = {style: "border: 1px solid black"};
render() {
return (
<ListViewComponent id="list" dataSource={this.data} htmlAttributes={this.htmlAttributes} />
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to {}
locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ’’
query Query
The query is used to fetch the specific data from dataSource by using where and select keywords.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
import { DataManager, Query } from '@syncfusion/ej2-data'; /* Import datamanager and query*/
export class Default extends SampleBase {
data = new DataManager({ url:"//js.syncfusion.com/ejServices/Wcf/Northwind.svc/", crossDomain: true });
//bind the Query instance to query property
query = new Query()
.from("Products")
.select("ProductID,ProductName")
.take(6);
//map the appropriate columns to fields property
fields = { id: "ProductID", text: "ProductName" };
render() {
return (
<ListViewComponent id="list" dataSource={this.data} fields={this.fields} query={this.query} showHeader={true} headerTitle="Product Name"/>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to null
showCheckBox boolean
If showCheckBox set to true, which will show or hide the checkbox.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
render() {
return (
<ListViewComponent id="list" dataSource={this.data} showCheckBox={true} />
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to false
showHeader boolean
If showHeader set to true, which will show or hide the header of the ListView component.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
render() {
return (
<ListViewComponent id="list" dataSource={this.data} showHeader={true} headerTitle="List of Items" />
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to false
showIcon boolean
If showIcon set to true, which will show or hide the icon of the list item.
<style>
.e-listview .e-list-icon {
height: 24px;
width: 30px;
}
.folder {
background-repeat: no-repeat;
background-image: url("css/listview/images/file_icons.png");
background-position: -5px -466px;
background-size: 302%;
}
</style> import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = [{
'Name': 'Music',
'id': 'list-01',
'icon':'folder'
},
{
'Name': 'Videos',
'id': 'list-02',
'icon':'folder'
},
{
'Name': 'Documents',
'id': 'list-03',
'icon': 'folder'
}];
fields= { text: 'Name', tooltip: 'Name', id:'id',iconCss:'icon'}
render() {
return (
<ListViewComponent id="list" dataSource={this.data} fields={this.fields} showIcon={true}/>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to false
sortOrder SortOrder
The sortOrder is used to sort the data source. The available type of sort orders are,
-
None- The data source is not sorting. -
Ascending- The data source is sorting with ascending order. -
Descending- The data source is sorting with descending order.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = [{
'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'
}];
fields= { text: 'Name', tooltip: 'Name', id:'id',sortBy:"Name"}
render() {
return (
<ListViewComponent id="list" dataSource={this.data} fields={this.fields} sortOrder="Descending"/>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to ‘None’
template string|function|JSX.Element
The ListView component supports to customize the content of each list items with the help of template property.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = [
{ Name: 'Janet', contact: '(206) 555-3412', id: '2', image: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png', category: 'Fresher' },
{ Name: 'Margaret', contact: '(206) 555-8122', id: '4', image: 'https://ej2.syncfusion.com/demos/src/grid/images/4.png', category: 'Experience' },
{ Name: 'Andrew ', contact: '(206) 555-9482', id: '5', image: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', category: 'Experience' },
{ Name: 'Robert', contact: '(71) 555-5598', id: '8', image: 'https://ej2.syncfusion.com/demos/src/grid/images/7.png', category: 'Fresher' }
];
fields = { text: 'Name', groupBy: 'category' };
listTemplate(data) {
return (<div className="e-list-wrapper e-list-multi-line e-list-avatar">
<img className="e-avatar e-avatar-circle" src={data.image}/>
<span className="e-list-item-header">{data.Name}</span>
<span className="e-list-content">{data.contact}</span>
</div>);
}
render() {
return (
<div>
<ListViewComponent id='list' dataSource={this.data} fields={this.fields} template={this.listTemplate} width='350px' cssClass='e-list-template'>
</ListViewComponent>
</div>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to null
width number|string
Defines the width of the ListView component which accepts both string and number values.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase {
data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
render() {
return (
<ListViewComponent id="list" dataSource={this.data} width="300px" />
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to ’’
Methods
addItem
Adds the new list item(s) to the current ListView.
To add a new list item(s) in the ListView, we need to pass the data as an array of items that need
to be added and fields as the target item to which we need to add the given item(s) as its children.
For example fields: { text: ‘Name’, tooltip: ‘Name’, id:’id’}
Returns void
back
Switches back from the navigated sub list item.
Returns void
checkAllItems
Checks all the unchecked items in the ListView.
Returns void
checkItem
Checks the specific list item by passing the unchecked fields as an argument to this method.
| Parameter | Type | Description |
|---|---|---|
| item |
Fields | HTMLElement | Element
|
It accepts Fields or HTML list element as an argument. |
Returns void
destroy
It is used to destroy the ListView component.
Returns void
disableItem
Disables the list items by passing the Id and text fields.
| Parameter | Type | Description |
|---|---|---|
| item |
Fields | HTMLElement | Element
|
We can pass element Object or Fields as Object with ID and Text fields. |
Returns void
enableItem
Enables the disabled list items by passing the Id and text fields.
| Parameter | Type | Description |
|---|---|---|
| item |
Fields | HTMLElement | Element
|
We can pass element Object or Fields as Object with ID and Text fields. |
Returns void
findItem
Finds out an item details from the current list.
| Parameter | Type | Description |
|---|---|---|
| item |
Fields | HTMLElement | Element
|
We can pass element Object or Fields as Object with ID and Text fields. |
Returns SelectedItem
getSelectedItems
Gets the details of the currently selected item from the list items.
Returns SelectedItem | SelectedCollection | UISelectedItem | NestedListData
hideItem
Hides an list item from the ListView.
| Parameter | Type | Description |
|---|---|---|
| item |
Fields | HTMLElement | Element
|
We can pass element Object or Fields as Object with ID and Text fields. |
Returns void
refreshItemHeight
Refresh the height of the list item only on enabling the virtualization property.
Returns void
removeItem
Removes the list item from the data source based on a passed
element like fields: { text: ‘Name’, tooltip: ‘Name’, id:’id’}
| Parameter | Type | Description |
|---|---|---|
| item |
Fields | HTMLElement | Element
|
We can pass element Object or Fields as Object with ID and Text fields. |
Returns void
removeMultipleItems
Removes multiple items from the ListView by passing the array of elements or array of field objects.
| Parameter | Type | Description |
|---|---|---|
| item |
HTMLElement[] | Element[] | Fields[]
|
We can pass array of elements or array of field Object with ID and Text fields. |
Returns void
selectItem
Selects the list item from the ListView by passing the elements or field object.
| Parameter | Type | Description |
|---|---|---|
| item |
Fields | HTMLElement | Element
|
We can pass element Object or Fields as Object with ID and Text fields. |
Returns void
selectMultipleItems
Selects multiple list items from the ListView.
| Parameter | Type | Description |
|---|---|---|
| item |
Fields[] | HTMLElement[] | Element[]
|
We can pass array of elements or array of fields Object with ID and Text fields. |
Returns void
showItem
Shows the hide list item from the ListView.
| Parameter | Type | Description |
|---|---|---|
| item |
Fields | HTMLElement | Element
|
We can pass element Object or Fields as Object with ID and Text fields. |
Returns void
uncheckAllItems
Uncheck all the checked items in ListView.
Returns void
uncheckItem
Uncheck the specific list item by passing the checked fields as an argument to this method.
| Parameter | Type | Description |
|---|---|---|
| item |
Fields | HTMLElement | Element
|
It accepts Fields or HTML list element as an argument. |
Returns void
unselectItem
This method allows for deselecting a list item within the ListView. The item to be deselected can be specified by passing the element or field object.
| Parameter | Type | Description |
|---|---|---|
| item (optional) |
Fields | HTMLElement | Element
|
We can pass an element Object or Fields as an Object with ID and Text fields. |
Returns void
Events
actionBegin EmitType<object>
Triggers when every ListView action starts.
actionComplete EmitType<MouseEvent>
Triggers when every ListView actions completed.
actionFailure EmitType<MouseEvent>
Triggers, when the data fetch request from the remote server, fails.
scroll EmitType<ScrolledEventArgs>
Triggers when scrollbar of the ListView component reaches to the top or bottom.
select EmitType<SelectEventArgs>
Triggers when we select the list item in the component.