nested-list.html

<style>
    .e-listview .e-list-icon {
        height: 24px;
        width: 30px;
    }

    .folder {
        background-repeat: no-repeat;
        background-image: url('./src/listview/images/file_icons.png');
        background-position: -5px -466px;
        background-size: 302%;
    }

    .file {
        background-repeat: no-repeat;
        background-image: url('./src/listview/images/file_icons.png');
        background-position: -5px -151px;
        background-size: 302%;
    }
    #listview {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>
<div class="col-lg-12 control-section">

    <!-- ListView element -->
    <div id="listview" tabindex="1"></div>
</div>

<div id="action-description">
        <p>This sample demonstrates the nested list functionalities, which allows to navigate
        to the sub list-items by clicking on any item and navigate back to list-item by using top left back icon.
        </p>
</div>

<div id="description">
    <p>ListView component supports Nested list. To achieve list navigation, the <code>child</code> property should be defined for the nested list in the array of JSON.</p>

    <p>This sample have Nested folder with the sub folders/files.</p>
</div>