Getting Started

14 Aug 20173 minutes to read

Using the following steps, you can create a Typescript ListView component. The basic rendering of Typescript ListView is achieved with default functionality.

Create a ListView

You can create a Typescript application with the help of the given Typescript Getting Started Documentation.

Within an index.html file and add the scripts references in the order mentioned in the following code example.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Typescript Application</title>
    <link href="http://cdn.syncfusion.com/**24.2.3**/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="http://cdn.syncfusion.com/**24.2.3**/js/web/ej.web.all.min.js" type="text/javascript"></script>

</head>
<body>
    <!--Add ListView here-->
</body>
</html>

Add a <div> element. It is a container for ListView control. To create the ListView, you should call the ejListView jQuery plug-in function.

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>
<script src="app.js"></script>

Initialize the ListView in app.ts file by using the ej.ListView method.

/// <reference path="jquery.d.ts" />  
/// <reference path="ej.web.all.d.ts" />

module ListComponent {
    $(function () {
        var sample = new ej.ListView($("#listview”"), {
            
    });
}

Now build your application, so that the app.js file is automatically generated and got added to your project (User have nothing to do with this file). Now, whatever code changes that you make in app.ts file will be reflected in app.js file automatically.

Run the above code to render the following output:

Add Header

You can add a header for ListView. Refer to the following script.

module ListComponent {
        $(function () {
            let sample = new ej.ListView($("#listview"),{showHeader: true, headerTitle: "Mailbox"});
            });
    }

Run the above code to render the following output:

Note: You can find the ListView properties from the API reference document