Getting started

21 Feb 20175 minutes to read

This section explains briefly on how to create a ListView control in your application.

Create your first ListView in JavaScript

Essential JavaScript Mobile ListView widget builds an interactive listview interface. This control allows you to select an item from a list-like interface and provides the infrastructure to display a set of data items in different layouts or views. Lists display data, data navigation, result lists, and data entry.

The following steps help you to add a ListView control for a mobile application that views a list of items such as images, text and navigates to the child item when you click a list item.

Create a basic mobile layout

Essential JavaScript Mobile ListView widget is rendered, either by specifying static content on a list. The following steps help you create a basic ListView for your application.

  1. Create an HTML file and add the following template to the HTML file.
  • HTML
  • <html>
        <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
        <link href="" rel="stylesheet" />
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
            <!--- Add Header Element Here-->
            <!--Add Listview Element Here-->

    Add the following code to render ListView

  • HTML
  • <!--Add Header Element Here-->
         <div id="header" data-role="ejmnavigationbar" data-ej-title="Mailbox" data-ej-isrelative="true">
        <!--Add ListView Element Here-->
            <ul id="listview" data-role="ejmlistview" data-ej-datasource="window.listData" data-ej-fields-groupby="group" data-ej-fields-text="text" data-ej-fields-image="image"></ul>
            window.listData = [{ text: "Inbox", image: "", group: "MailBoxes" },
                               { text: "VIP", image: "", group: "MailBoxes" },
                               { text: "Draft", image: "", group: "MailBoxes" },
                               { text: "Sent", image: "", group: "MailBoxes" },
                               { text: "Junk", image: "", group: "MailBoxes" },
                               { text: "Trash", image: "", group: "MailBoxes" }];

    Add the below style for images

  • CSS
  • .e-m-lv-item .e-m-lv-image {
                background-size: 26px 375px;
            .e-m-lv-item:nth-child(2) .e-m-lv-image {
                background-position: 8px -87px;            
            .e-m-lv-item:nth-child(3) .e-m-lv-image {
                background-position: 7px -337px;
            .e-m-lv-item:nth-child(4) .e-m-lv-image {
                background-position: 11px -40px;
            .e-m-lv-item:nth-child(5) .e-m-lv-image {
                background-position: 8px -229px;
            .e-m-lv-item:nth-child(6) .e-m-lv-image {
                background-position: 8px 12px;
            .e-m-lv-item:nth-child(7) .e-m-lv-image {
                background-position: 12px -286px;