Dynamic templates in listview based on device in EJ2 JavaScript Listview control

7 May 202518 minutes to read

The Syncfusion® Essential® JS 2 controls are both desktop and mobile-friendly, allowing the use of Syncfusion® controls in various environments. The control templates are flexible and can differ depending on the device being used.

Integration

In the ListView control, template support can be utilized to create responsive interfaces. While the control wrapper is responsive on all devices, sometimes template contents need to be dynamically adjusted with customizable dimensions on the sample side. To ensure the template content aligns responsively in both mobile and desktop modes, CSS customization on the sample side is essential. Two templates are provided for mobile and desktop modes, with device mode detection handled by the browser module imported from the ej2-base package.

var mob_template = '<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>'

var template = '<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
var 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' }
];
var wintemplate;
if (ej.base.Browser.isDevice) {
    document.getElementById('List').style.width = '350px';
    wintemplate = mob_template;
}
else {
    wintemplate = template;
}

// Initialize ListView control
var listObj = new ej.lists.ListView({

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

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

    //Set customized template
    template: wintemplate,

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

    //Set true to show header title
    showHeader: true

});

//Render 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="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div class="col-lg-12 control-section">

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

            </div>
        </div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <style>
        #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 {
            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;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}