Getting Started

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.

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>
    <link href="[]("rel="stylesheet"/>
    <script src="[]("></script>
    <script src="[]("></script>
    <script src="[]("></script>
            <!-- Add Listview control template element here -->

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

  • HTML
  • <div id="listview">
                <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>

    Create the ListView control by adding script as follows.

  • $(function () {

    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.

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

    Run the above code to render the following output.