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>