app.component.html

<div class="control-section">
    <ejs-treegrid [dataSource]='data' allowPaging='true' childMapping='subtasks' height='350' [treeColumnIndex]='1'>
        <e-columns>
            <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='taskName' headerText='Task Name' width='200'></e-column>
            <e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
            <e-column field='endDate' headerText='End Date' width='90' format="yMd" textAlign='Right'></e-column>
            <e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
            <e-column field='progress' headerText='Progress' width='80' textAlign='Right'></e-column>
            <e-column field='priority' headerText='Priority' width='90'></e-column>
        </e-columns>
    </ejs-treegrid>
</div>