The following section explains the required steps to build the simple ListView control with its basic usage in step-by-step procedure.
Install the below required dependent packages to render the ListView control.
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
To get started with the ListView control, you can clone the Essential JS 2 quickstart
project, and install the packages by using the following commands.
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install
Add the HTML <div>
element for ListView control to your index.html
.
[src/index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!--style reference from app-->
<link href="/styles/styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<!--element which is going to render-->
<div id='element'></div>
</div>
</body>
</html>
Import the ListView control into your app.ts
and append it to the #element
.
[src/app/app.ts]
import { ListView } from '@syncfusion/ej2-lists';
//Initialize ListView control
let listviewInstance: ListView = new ListView();
//Render initialized ListView
listviewInstance.appendTo("#element");
Populate the data in ListView by using the dataSource property. Here, an array of JSON values are passed to the ListView control.
[src/app/app.ts]
import { ListView } from '@syncfusion/ej2-lists';
//define the array of JSON
let arts: { [key: string]: string }[] = [
{ text: 'Artwork', id: '01' },
{ text: 'Abstract', id: '02' },
{ text: 'Modern Painting', id: '03' },
{ text: 'Ceramics', id: '04' },
{ text: 'Animation Art', id: '05' },
{ text: 'Oil Painting', id: '06' }];
//Initialize ListView control
let listviewInstance: ListView = new ListView({
//set the data to datasource property
dataSource: arts
});
//Render initialized ListView
listviewInstance.appendTo("#element");
Use the npm run start
command to run the application in the browser.
npm run start
The following example shows a basic ListView.
import { ListView } from '@syncfusion/ej2-lists';
//define the array of JSON
let arts: { [key: string]: string }[] = [
{ text: 'Artwork', id: '01' },
{ text: 'Abstract', id: '02' },
{ text: 'Modern Painting', id: '03' },
{ text: 'Ceramics', id: '04' },
{ text: 'Animation Art', id: '05' },
{ text: 'Oil Painting', id: '06' }];
//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="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>