JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css">
<div id="ebstreeview" style="width:300px; position:relative; overflow-x:hidden"></div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    position: absolute;
}
body {
    background-color: Black;
}

JavaScript

var localdataSource = [];

var ebsHierarchicalDataSource = new kendo.data.HierarchicalDataSource({
    data: [],
    transport: {
        read: function (options) {
            options.success(localdataSource);
        }
    },
    schema: {
        model: {
            id: "id",
            hasChildren: true,
            children: "items"
        }
    }
});

var ebstreeView;

$(function () {

    $("#ebstreeview").kendoTreeView({
        template: '<span style="#= (item.islocation === false) ? "font-weight: bold; color: \\#00FF00" : "font-weight: normal; color: \\#FFFFFF" #">#: item.text#</span>',
        checkboxes: {
            checkChildren: true
        },
        animation: {
            expand: {
                effects: "fadeIn expandVertical"
            }
        },
        autoBind: false,
        loadOnDemand: false,
        dataSource: ebsHierarchicalDataSource
    });

    for (var i = 1; i <= 10; i++) {
        localdataSource[localdataSource.length] = {
            id: i,
            text: 'Parent node ' + i,
            items: []
        };

        for (var j = 1; j <= 100; j++) {
            localdataSource[localdataSource.length - 1].items[localdataSource[localdataSource.length - 1].items.length] = {
                id: j,
                text: 'Child node ' + j
            };
        }
    };

    localdataSource[0].checked = true;
    localdataSource[4].items[8].checked = true;
    ebsHierarchicalDataSource.read(); //this command takes browser to be frozen for few seconds and it is only 1000 nodes

});