TreeList Load On Demand

KendoUI TreeList with lazy loading

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
<div id="treelist">

</div>

JavaScript

var employees = [{
    employeeId: 1,
    name: 'Montgomery Burns',
    reportsTo: null,
    hasChildren: true
}, {
    employeeId: 2,
    name: 'Whelan Smitters',
    reportsTo: 1,
    hasChildren: true
}, {
    employeeId: 3,
    name: 'Homer Simpson',
    reportsTo: 2,
    hasChildren: false
}, {
    employeeId: 4,
    name: 'Lenford Leonard',
    reportsTo: 1,
    hasChildren: false
}];

function getTopLevelEmployees() {
    return employees.filter(x => !x.reportsTo);
}

function getSubordinatesOf(parentId) {
    return employees.filter(x => x.reportsTo === parentId);
}

var dataSource = new kendo.data.TreeListDataSource({
    transport: {
        read: function(options) {
            // mock an async remote API call
            setTimeout(function() {
                // the query params are provided in options.data
                if (options.data.id) {
                    options.success(getSubordinatesOf(options.data.id));
                } else {
                    options.success(getTopLevelEmployees());
                }
            }, 500);
        }
    },
    schema: {
        model: {
            id: 'employeeId',
            parentId: 'reportsTo',
            hasChildren: 'hasChildren',
            fields: {
                employeeId: {
                    type: 'number',
                    nullable: false
                },
                name: {
                    type: 'string',
                    nullable: false
                },
                reportsTo: {
                    type: 'number',
                    nullable: true
                },
                hasChildren: {
                    type: 'boolean',
                    nullable: false
                }
            }
        }
    }
});

$(function() {
    $('#treelist').kendoTreeList({
        dataSource: dataSource,
        columns: [{
            field: 'employeeId',
            title: 'Id',
            width: 100
        }, {
            field: 'name'
        }]
    });
});