Search results

How to use dynamic templates in listview based on device

The Syncfusion Essential JS2 controls are desktop and mobile-friendly. So, you can use Syncfusion controls in both modes. The control templates are not always fixed. Applications may need to load various templates depending upon the device.

Integration

In the ListView control, template support is being used. In some cases, the control wrapper is always responsive across all devices, but the template contents are dynamically changed with unspecified (sample side) dimensions. CSS customization is also needed in sample-side to align template content responsively in both mobile and desktop modes. Here, two templates have been loaded for mobile and desktop modes. To check the device mode, a browser module has been imported from the ej2-base package.

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

let mob_template: string = '<div class="settings">'
    + '<div id="postContainer"><div id="postImg">'
    + '<img src=${image} /></div>'
    + '<div id="content">'
    + '<div id="info">'
    + '<div id="logo"> <div id="share">'
    + '<span class="share"></span> </div> <div id="comments"> <span class="comments"></span> </div>'
    + '<div id="bookmark"> <span class="bookmark"></span> </div></div></div> '
    + '<div class="name">${Name}</div>'
    + '<div class="description">${content}</div>'
    + '<div class="timeStamp">${timeStamp} </div>'
    + '</div>'

let template: string = '<div class="settings">'
    + '<div id="postContainer"><div id="postImg">'
    + '<img src=${image} /></div>'
    + '<div id="content">'
    + '<div class="name">${Name}</div>'
    + '<div class="description">${content}</div>'
    + '<div id="info">'
    + '<div id="logo"> <div id="share">'
    + '<span class="share"></span> </div> <div id="comments"> <span class="comments"></span> </div>'
    + '<div id="bookmark"> <span class="bookmark"></span> </div></div> '
    + '<div class="timeStamp">${timeStamp} </div>'
    + '</div>'
    + '</div>'

//Define an array of JSON data
let dataSource: { [key: string]: Object }[] = [
    { 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 wintemplate: string;
if (Browser.isDevice) {
    document.getElementById('List').style.width = '350px';
    wintemplate = mob_template;
}
else {
    wintemplate = template;
}

// Initialize the ListView control
let listObj: ListView = new ListView({

    //Set the defined data to the dataSource property
    dataSource: dataSource,

    //Map the appropriate columns to the fields property
    fields: { text: 'Name', },

    //Set customized template
    template: wintemplate,

    //Set header title
    headerTitle: 'Syncfusion Blog',

    //Set the showHeader to true to show the header title
    showHeader: true

});

//Render the initialized ListView control
listObj.appendTo('#List');
<!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 class="col-lg-12 control-section">

        <!-- ListView element -->
        <div id="List" tabindex="1">
    
        </div>
    </div>
</div>
</body>

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

.bootstrap #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%;
}