React
Demos
Support
Forum
Download
Search results

Load HTML content via AJAX in React ListView component

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

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

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

Source
Preview
index.tsx
index.html
index.css
index.jsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { Ajax } from '@syncfusion/ej2-base';

export default class App extends React.Component<{}, {}> {
  constructor(props: any) {
    super(props);
    this.ajax = new Ajax("./template.html", "GET", false);
    this.ajax.onSuccess = (e: string) => {
      this.template = e;
    };
    this.ajax.send();
  }
  //Define an array of JSON data
  public 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" }
  ];

  public template: any;
  public ajax: Ajax;

  render() {
    return (
      <ListViewComponent
        id="list"
        dataSource={this.data}
        headerTitle="Settings"
        showHeader={true}
        template={this.template}
        cssClass="e-list-template"
      />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('element'));
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>
#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;
}
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { Ajax } from '@syncfusion/ej2-base';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        //Define an array of JSON data
        this.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" }
        ];
        this.ajax = new Ajax("./template.html", "GET", false);
        this.ajax.onSuccess = (e) => {
            this.template = e;
        };
        this.ajax.send();
    }
    render() {
        return (<ListViewComponent id="list" dataSource={this.data} headerTitle="Settings" showHeader={true} template={this.template} cssClass="e-list-template"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));
Previous
Next