Use dynamic templates in ListView based on device

17 Mar 202524 minutes to read
The Syncfusion^® Essential^® JS2 components are designed to be both desktop and mobile-friendly. Therefore, Syncfusion^® components can be used effectively in both desktop and mobile modes. However, component templates may need to be dynamic to accommodate different devices. Applications may need to load various templates depending upon the device.
Integration

The ListView component utilizes template support for this purpose. While the component wrapper is responsive across all devices, the template contents may need to change dynamically based on the device, with dimensions specified in the sample code. Additional CSS customization is required in the sample code to ensure responsive alignment of template content in both mobile and desktop modes.
In this example, we’ve implemented two separate templates: one for mobile mode and another for desktop mode. To detect the device mode, we’ve imported the browser module from the ej2-base package.
index.jsx
index.tsx
index.css
index.html
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { Browser } from '@syncfusion/ej2-base';
import './index.css';

function App() {
  function listTemplate(data) {
    return (<div className="settings">
      <div id="postContainer">
        <div id="postImg">
          <img src={data.image} />
        </div>
        <div id="content">
          <div className="name">{data.Name}</div>
          <div className="description">{data.content}</div>
          <div id="info">
            <div id="logo">
              <div id="share">
                <span className="share" />{" "}
              </div>
              <div id="comments">
                {" "}
                <span className="comments" />{" "}
              </div>
              <div id="bookmark">
                {" "}
                <span className="bookmark" />{" "}
              </div>
            </div>
            <div className="timeStamp">{data.timeStamp} </div>
          </div>
        </div>
      </div>
    </div>);
  }
  function mobTemplate(data) {
    return (<div className="settings">
      <div id="postContainer">
        <div id="postImg">
          <img src={data.image} />
        </div>
        <div id="content">
          <div id="info">
            <div id="logo">
              <div id="share">
                <span className="share" />{" "}
              </div>
              <div id="comments">
                {" "}
                <span className="comments" />{" "}
              </div>
              <div id="bookmark">
                {" "}
                <span className="bookmark" />{" "}
              </div>
            </div>
          </div>
          <div className="name">{data.Name}</div>
          <div className="description">{data.content}</div>
          <div className="timeStamp">{data.timeStamp} </div>
        </div>
      </div>
    </div>);
  }
  // define the array of Json
  let dataSource = [
    {
      Name: "IBM Open-Sources Web Sphere Liberty Code",
      content: "In September, IBM announced that it would be open-sourcing the code for WebSphere...",
      id: "1",
      image: "https://ej2.syncfusion.com/demos/src/listview/images/1.png",
      timeStamp: "Syncfusion Blog - October 19, 2017"
    },
    {
      Name: "Must Reads: 5 Big Data E-books to upend your development",
      content: "Our first e-book was published in May 2012-jQuery Succinctly was the start of over...",
      id: "2",
      image: "https://ej2.syncfusion.com/demos/src/listview/images/2.png",
      timeStamp: "Syncfusion Blog - October 18, 2017"
    },
    {
      Name: "The Syncfusion Global License: Your Questions, Answered ",
      content: "Syncfusion recently hosted a webinar to cover the ins and outs of the Syncfusion global...",
      id: "4",
      image: "https://ej2.syncfusion.com/demos/src/listview/images/3.png",
      timeStamp: "Syncfusion Blog - October 18, 2017"
    },
    {
      Name: "Know: What is Coming from Microsoft this Fall ",
      content: "On October 17, Microsoft will release its Fall Creators Update for the Windows 10 platform...",
      id: "5",
      image: "https://ej2.syncfusion.com/demos/src/listview/images/6.png",
      timeStamp: "Syncfusion Blog - October 17, 2017"
    }
  ];
  let fields = { text: "Name" };
  let wintemplate;
  let list = null;
  if (Browser.isDevice) {
    if (list) {
      list.element.style.width = "350px";
    }
    wintemplate = mobTemplate;
  }
  else {
    wintemplate = listTemplate;
  }
  return (<div>
    <ListViewComponent id="list" ref={l => { list = l; }} dataSource={dataSource} fields={fields} headerTitle="Syncfusion Blog" showHeader={true} template={wintemplate} />
  </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { Browser } from '@syncfusion/ej2-base';

function App() {
  function listTemplate(data: any): JSX.Element {
    return (
      <div className="settings">
        <div id="postContainer">
          <div id="postImg">
            <img src={data.image} />
          </div>
          <div id="content">
            <div className="name">{data.Name}</div>
            <div className="description">{data.content}</div>
            <div id="info">
              <div id="logo">
                <div id="share">
                  <span className="share" />{" "}
                </div>
                <div id="comments">
                  {" "}
                  <span className="comments" />{" "}
                </div>
                <div id="bookmark">
                  {" "}
                  <span className="bookmark" />{" "}
                </div>
              </div>
              <div className="timeStamp">{data.timeStamp} </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  function mobTemplate(data: any): JSX.Element {
    return (
      <div className="settings">
        <div id="postContainer">
          <div id="postImg">
            <img src={data.image} />
          </div>
          <div id="content">
            <div id="info">
              <div id="logo">
                <div id="share">
                  <span className="share" />{" "}
                </div>
                <div id="comments">
                  {" "}
                  <span className="comments" />{" "}
                </div>
                <div id="bookmark">
                  {" "}
                  <span className="bookmark" />{" "}
                </div>
              </div>
            </div>
            <div className="name">{data.Name}</div>
            <div className="description">{data.content}</div>
            <div className="timeStamp">{data.timeStamp} </div>
          </div>
        </div>
      </div>
    );
  }

  // define the array of Json
  let dataSource: any = [
    {
      Name: "IBM Open-Sources Web Sphere Liberty Code",
      content: "In September, IBM announced that it would be open-sourcing the code for WebSphere...",
      id: "1",
      image: "https://ej2.syncfusion.com/demos/src/listview/images/1.png",
      timeStamp: "Syncfusion Blog - October 19, 2017"
    },
    {
      Name: "Must Reads: 5 Big Data E-books to upend your development",
      content: "Our first e-book was published in May 2012-jQuery Succinctly was the start of over...",
      id: "2",
      image: "https://ej2.syncfusion.com/demos/src/listview/images/2.png",
      timeStamp: "Syncfusion Blog - October 18, 2017"
    },
    {
      Name: "The Syncfusion Global License: Your Questions, Answered ",
      content: "Syncfusion recently hosted a webinar to cover the ins and outs of the Syncfusion global...",
      id: "4",
      image: "https://ej2.syncfusion.com/demos/src/listview/images/3.png",
      timeStamp: "Syncfusion Blog - October 18, 2017"
    },
    {
      Name: "Know: What is Coming from Microsoft this Fall ",
      content: "On October 17, Microsoft will release its Fall Creators Update for the Windows 10 platform...",
      id: "5",
      image: "https://ej2.syncfusion.com/demos/src/listview/images/6.png",
      timeStamp: "Syncfusion Blog - October 17, 2017"
    }
  ];

  let fields = { text: "Name" };
  let wintemplate: any;
  let list: ListViewComponent | null = null;
  if (Browser.isDevice) {
    if (list) {
      list.element.style.width = "350px";
    }
    wintemplate = mobTemplate;
  } else {
    wintemplate = listTemplate;
  }

  return (
    <div>
      <ListViewComponent
        id="list"
        ref={l => { list = l; }}
        dataSource={dataSource}
        fields={fields}
        headerTitle="Syncfusion Blog"
        showHeader={true}
        template={wintemplate as any}
      />
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#list img {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid;
  border-color: #c3c3c3;
  border-color: rgba(0, 0, 0, 0.12);
}

#list .settings {
  height: 170px;
  line-height: 70px;
  margin-left: 16px;
  margin-right: 16px;
}

#list .e-list-item {
  height: 170px;
  line-height: 70px;
  padding: 0;
  cursor: pointer;
  border-bottom: 0.8px solid #ddd;
}

#time {
  line-height: 23px;
  margin-top: 13px;
  padding-left: 10px;
  width: 191px;
}

#img {
  float: left;
  padding-top: 6px;
  padding-left: 0;
  padding-right: 20px;
}

#info {
  padding-top: 3px;
}

#list .e-list-header {
  color: white;
  height: 57px;
  background-color: #56697f;
  padding-left: 15px;
  position: relative;
  top: -1px;
}

#list .e-list-header .e-text {
  line-height: 18px;
}

#list .e-list-header .e-text {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 26px;
}

#list .category {
  font-family: "serif";
  font-weight: 600;
  font-size: 19px;
}

#list .name {
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
}

#list .content {
  line-height: 19px;
  font-size: 13px;
  font-weight: 200;
}

#list .e-hover {
  transition: 0.5s;
}

.timeStamp {
  font-size: small;
  margin-bottom: 1px;
  margin-top: -17px;
}

.bookmark::before {
  color: grey;
  float: right;
  line-height: 0;
  margin-bottom: 1px;
  font-family: "Bookmarks";
  content: "\e700";
  margin-left: 3px;
  margin-right: 3px;
  font-size: 16px;
  padding-top: 19px;
  padding-bottom: 5px;
}

.share::before {
  color: grey;
  float: right;
  line-height: 0;
  margin-bottom: 1px;
  font-family: "Bookmarks";
  content: "\e701";
  margin-left: 3px;
  margin-right: 3px;
  font-size: 13px;
  padding-top: 19px;
  padding-bottom: 5px;
}

.comments::before {
  color: grey;
  float: right;
  line-height: 0;
  margin-bottom: 1px;
  font-family: "Bookmarks";
  content: "\e703";
  margin-left: 3px;
  margin-right: 3px;
  font-size: 15px;
  padding-top: 19px;
  padding-bottom: 5px;
}

.bookmark {
  cursor: pointer;
}

.share {
  cursor: pointer;
}

.comments {
  cursor: pointer;
}

.description {
  color: grey;
  line-height: 20px;
  font-size: 15px;
  font-weight: 200;
  text-align: justify;
}

/* csslint ignore:start */

@font-face {
  font-family: 'Bookmarks';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* csslint ignore:end */

#postImg {
  margin-right: 25px;
  margin-top: 30px;
}

#postContainer {
  width: inherit;
  margin-top: 10px;
  display: inline-flex;
}

#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
<!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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>