Getting Started

The Essential JavaScript ListView widget builds an interactive list view 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.

Create a simple ListView

The following steps guide you to add a ListView control.

Create a HTML file and add the following references to the required libraries.

  • html
  • <html>
    <head>
    <link href="[http://cdn.syncfusion.com/18.3.0.35/js/web/flat-azure/ej.web.all.min.css](http://cdn.syncfusion.com/18.3.0.35/js/web/flat-azure/ej.web.all.min.css)"rel="stylesheet"/>
    <script src="[http://code.jquery.com/jquery-2.0.0.min.js](http://code.jquery.com/jquery-2.0.0.min.js)"></script>
    <script src="[http://borismoore.github.io/jsrender/jsrender.min.js](http://borismoore.github.io/jsrender/jsrender.min.js)"></script>
    <script src="[http://cdn.syncfusion.com/18.3.0.35/js/web/ej.web.all.min.js](http://cdn.syncfusion.com/18.3.0.35/js/web/ej.web.all.min.js)"></script>
    
    </head>
    <body>
            <!-- Add Listview control template element here -->
    
    </body>
    </html>

    Add a <div> element. It is a container for ListView control.

  • html
  • <div id="listview">
            <ul>
                <li data-ej-text="Inbox"></li>
                <li data-ej-text="VIP"></li>
                <li data-ej-text="Drafts"></li>
                <li data-ej-text="Sent"></li>
                <li data-ej-text="Junk"></li>
                <li data-ej-text="All mails"></li>
                <li data-ej-text="Mail"></li>
            </ul>
        </div>

    Create the ListView control by adding script as follows.

  • javascript
  • $(function () {
                    $("#listview").ejListView();
                });

    Run the above code to render the following output.

    Add Header

    You can add a header for ListView using showHeader property and change the title content using headerTitle property. Refer to the following script.

  • javascript
  • $(function () {
            $("#listview").ejListView({ showHeader: true, headerTitle: "Mailbox"});
        });

    Run the above code to render the following output.