Contact Support
Display spinner for list item loading from remote data in EJ2 TypeScript ListView control
1 Mar 20256 minutes to read
Features of the ListView control, such as remote data binding, can take some time to fetch data from the corresponding dataSource/remote URL. In this scenario, you can use the EJ2 Spinner
to enhance the appearance of the UI. This section explains how to load a spinner control to improve the user experience.
Refer to the following code sample to render the spinner control.
createSpinner({
target: document.getElementById('spinner')
});
showSpinner(document.getElementById('spinner'));
Refer to the following code sample to render the ListView control.
let listviewInstance: ListView = new ListView({
//Bind the DataManager instance to the dataSource property
dataSource: new DataManager({
url: '//js.syncfusion.com/ejServices/Wcf/Northwind.svc/',
crossDomain: true
}),
//Bind the Query instance to the query property
query: new Query().from('Products').select('ProductID,ProductName').take(10),
//Map the appropriate columns to the fields property
fields: { id: 'ProductID', text: 'ProductName' },
//Set the header tittle to the list
headerTitle: 'Product Name',
showHeader: true,
width:"300",
actionComplete : oncomplete
});
//Render the initialized ListView
listviewInstance.appendTo("#element");
Here, the data is fetched from the Northwind
Service URL; it takes a few seconds to load the data. To enhance the UI, the spinner control has been rendered initially. After the data is loaded from the remote URL, the spinner control will be hidden in the ListView actionComplete
event.
import { ListView } from '@syncfusion/ej2-lists';
//Import DataManager related classes
import { DataManager, Query } from '@syncfusion/ej2-data';
import { createSpinner, showSpinner } from '@syncfusion/ej2-popups';
//Initialize the 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,
width: "300",
actionComplete: oncomplete
});
//Render the initialized ListView
listviewInstance.appendTo("#element");
createSpinner({
target: document.getElementById('spinner')
});
showSpinner(document.getElementById('spinner'));
function oncomplete() {
const spinner = document.getElementById('spinner');
if (spinner) {
spinner.style.display = "none";
}
}
<!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/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/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 id="spinner"></div>
</div>
</div>
<style>
#element {
display: block;
max-width: 350px;
min-height: 200px;
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: 35%;
left: 45%;
}