Load html content via ajax in React ListView component
23 Jan 20257 minutes to read
We can set external HTML
page content as template
for the ListView
component by making use of an AJAX
call.
ajax = new Ajax('./template.html', 'GET', false);
ajax.onSuccess = (e: string) => {
template = e;
};
ajax.send();
In the below sample, we render a smartphone settings template from an external HTML
file.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { Ajax } from '@syncfusion/ej2-base';
import './index.css';
function App() {
let template;
let ajax;
ajax = new Ajax("./template.html", "GET", false);
ajax.onSuccess = (e) => {
template = e;
};
ajax.send();
//Define an array of JSON data
let 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" }
];
return (<ListViewComponent id="list" dataSource={data} headerTitle="Settings" showHeader={true} template={template} cssClass="e-list-template" />);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { Ajax } from '@syncfusion/ej2-base';
function App() {
let template: any;
let ajax: Ajax;
ajax = new Ajax("./template.html", "GET", false);
ajax.onSuccess = (e: string) => {
template = e;
};
ajax.send();
//Define an array of JSON data
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" }
];
return (
<ListViewComponent
id="list"
dataSource={data}
headerTitle="Settings"
showHeader={true}
template={template}
cssClass="e-list-template"
/>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#list {
display: block;
max-width: 300px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#list .e-list-header {
background: rgb(2, 120, 215);
color: white;
font-size: 19px;
font-weight: 500;
}
#list.e-listview .e-list-item {
cursor: pointer;
}
#list .settings-container .name {
font-size: 15px;
font-weight: 500;
line-height: 20px;
height: 20px;
}
#list .settings-container .description {
line-height: 20px;
height: 20px;
font-size: 10px;
font-style: italic;
margin-top: -2px;
}
<!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="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-react-lists/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>