The filtered data can be displayed in the ListView component depending upon on user inputs using the
DataManager
. Refer to the
following steps to render the ListView with filtered data.
dataSource
, and set
the sortOrder
property.keyup
event for textbox to perform filtering operation. To filter list data, pass the list data source to the
DataManager
, manipulate the data using the
executeLocal
method,
and then update filtered data as ListView dataSource.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataManager, Query } from "@syncfusion/ej2-data";
import { ListViewComponent } from "@syncfusion/ej2-react-lists";
export default class App extends React.Component {
constructor(props) {
super(props);
this.list = [
{ text: "Hennessey Venom", id: "list-01" },
{ text: "Bugatti Chiron", id: "list-02" },
{ text: "Bugatti Veyron Super Sport", id: "list-03" },
{ text: "SSC Ultimate Aero", id: "list-04" },
{ text: "Koenigsegg CCR", id: "list-05" },
{ text: "McLaren F1", id: "list-06" }
];
this.fields = { text: "text", id: "id" };
this.state = { listData: this.list };
}
onKeyUp(e) {
let value = e.target.value;
let data = new DataManager(this.state.listData).executeLocal(new Query().where("text", "startswith", value, true));
if (!value) {
this.setState({
listData: this.list
});
}
else {
this.setState({
listData: data
});
}
}
render() {
return (<div id="sample">
<input className="e-input" type="text" id="textbox" placeholder="Filter" onKeyUp={this.onKeyUp.bind(this)} title="Type in a name"/>
<ListViewComponent id="list" dataSource={this.state.listData} fields={this.fields} sortOrder="Ascending"/>
</div>);
}
}
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/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/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>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: "Helvetica Neue", "calibiri";
font-size: 14px;
top: 45%;
left: 45%;
}
#list {
box-shadow: 0 1px 4px #ddd;
border-bottom: 1px solid #ddd;
}
#sample {
height: 220px;
margin: 0 auto;
display: table;
}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataManager, Query, ODataV4Adaptor } from "@syncfusion/ej2-data";
import { ListViewComponent } from "@syncfusion/ej2-react-lists";
interface MyState {
listData: any[];
}
export default class App extends React.Component<{}, MyState> {
constructor(props: any) {
super(props);
this.state = { listData: this.list };
}
public list: any[] = [
{ text: "Hennessey Venom", id: "list-01" },
{ text: "Bugatti Chiron", id: "list-02" },
{ text: "Bugatti Veyron Super Sport", id: "list-03" },
{ text: "SSC Ultimate Aero", id: "list-04" },
{ text: "Koenigsegg CCR", id: "list-05" },
{ text: "McLaren F1", id: "list-06" }
];
public fields: Object = { text: "text", id: "id" };
public onKeyUp(e: any) {
let value = e.target.value;
let data = new DataManager(this.state.listData).executeLocal(
new Query().where("text", "startswith", value, true)
);
if (!value) {
this.setState({
listData: this.list
});
} else {
this.setState({
listData: data
});
}
}
render() {
return (
<div id="sample">
<input
className="e-input"
type="text"
id="textbox"
placeholder="Filter"
onKeyUp={this.onKeyUp.bind(this)}
title="Type in a name"
/>
<ListViewComponent
id="list"
dataSource={this.state.listData}
fields={this.fields}
sortOrder="Ascending"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("element"));
In this demo, data has been filtered with starting character of the list items. You can also filter list items with ending character by passing the
endswith
in where clause instead ofstartswith
.