Search results

How to dynamic listview by loading AJAX HTML content

We can set external HTML page content as template for our ListView control by making use of AJAX call.

let template: string;
let ajax: Ajax = new Ajax('./template.html', 'GET', false);
ajax.onSuccess = (e: string)=>{
    template = e;
}

ajax.send();

In the below sample, we have rendered smartphone settings template from external HTML file.

Source
Preview
index.ts
index.html
index.css
import { ListView } from '@syncfusion/ej2-lists';
import { Ajax } from '@syncfusion/ej2-base';

let data: { [key: string]: Object }[] = [
    { 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' }
];

let template: string;
let ajax: Ajax = new Ajax('./template.html', 'GET', false);
ajax.onSuccess = (e: string)=>{
    template = e;
}

ajax.send();

let listViewInstance: ListView = new ListView({
    dataSource: data,
    template: template,
    headerTitle: 'Settings',
    showHeader: true,
    fields: {text:'name', id: 'id'}
});

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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#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;
}