Having trouble getting help?
Contact Support
Contact Support
Dynamic EJ2 JavaScript ListView control by loading ajax html content
1 Mar 20256 minutes to read
We can set external HTML
page content as a template
for our ListView
control by making use of an AJAX
call.
let template: string;
let ajax: Ajax = new Ajax('https://ej2.syncfusion.com/documentation/code-snippet/listview/ajax-cs1/template', 'GET', false);
ajax.onSuccess = (e: string)=>{
template = e;
}
ajax.send();
In the sample below, we have rendered a smartphone settings template from an external HTML
file.
var data = [
{ name: 'Network & Internet', id: '0', description: 'Wi-Fi, mobile, data usage, hotspot' },
{ name: 'Connected devices', id: '1', description: 'Bluetooth, cast, NFC' },
{ name: 'Battery', id: '2', description: '18% -4h 12m left' },
{ name: 'Display', id: '3', description: 'Wallpaper, sleep, font size' },
{ name: 'Sound', id: '4', description: 'Volume, vibration, Do Not Disturb' },
{ name: 'Storage', id: '5', description: '52% used - 15.48 GB free' }
];
var template;
var ajax = new ej.base.Ajax('https://ej2.syncfusion.com/documentation/code-snippet/listview/ajax-cs1/template', 'GET', true);
ajax.send().then();
ajax.onSuccess = function (e) {
template = e;
listfunction();
}
function listfunction() {
listViewInstance.template = template;
listViewInstance.refresh();
}
ajax.onFailure = function (reason) {
console.log(reason);
}
var listViewInstance = new ej.lists.ListView({
dataSource: data,
headerTitle: 'Settings',
showHeader: true,
template: template,
fields: { text: 'name', id: 'id' },
height: 380
});
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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
<style>
#element {
display: block;
max-width: 300px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#element .e-list-header {
background: rgb(2, 120, 215);
color: white;
font-size: 19px;
font-weight: 500;
}
#element.e-listview .e-list-item {
padding: 10px 16px;
height: 61px;
}
#element .settings-container .name {
font-size: 15px;
font-weight: 500;
line-height: 20px;
height: 20px;
}
#element .settings-container .description {
line-height: 20px;
height: 20px;
font-size: 10px;
font-style: italic;
margin-top: -2px;
}
</style>
</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%;
}