Getting Started with JQuery ListView widget

15 Dec 20172 minutes to read

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.

Getting-Started_img1

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/19.3.0.43/js/web/flat-azure/ej.web.all.min.css](http://cdn.syncfusion.com/19.3.0.43/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/19.3.0.43/js/web/ej.web.all.min.js](http://cdn.syncfusion.com/19.3.0.43/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.

    Getting-Started_img2

    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.

    Getting-Started_img3