JSFiddle - React, Tailwind, and code Playground

by nayanakalkur

HTML

<script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller='tester'>
        <tree-grid columns='columns' source='source'></tree-grid>
    </div>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('treeGrid', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            source: '=source',
            columns: '=columns'
        },
        template: '<kendo-treelist k-options="gridOptions"></kendo-treelist>',
        link: function (scope, element, attrs) {
            scope.gridOptions = {};
            scope.gridOptions.columns = scope.columns;
            scope.gridOptions.columnMenu = true;

            scope.gridOptions.dataSource = new kendo.data.TreeListDataSource({
                
                data: scope.source,
            });


        }
    };
});


function Tester($scope) {

    $scope.columns = [{
        field: 'ExamStart',
        title: 'Date/Time'
    }, {
        field: 'ProtocolName',
        title: 'Protocol names',
        sortable: false,
    }, {
        field: 'SeriesDescription',
        title: 'Series descriptions',
        sortable: false
    }];

    $scope.source = [{
        "id": 61,
        "parentId": 1,
        "ProtocolName": "P2",
        "SeriesDescription": "P2  "
    }, {
        "ExamStart": "9/19/2015 8:00 AM",
        "id": 1,
        "ProtocolName": "P2",
        "SeriesDescription": "P2  ",
        "parentId": null
    }, {
        "id": 62,
        "parentId": 2,
        "ProtocolName": "P1",
        "SeriesDescription": "P1 "
    }, {
        "id": 63,
        "parentId": 2,
        "ProtocolName": "P2",
        "SeriesDescription": "P2 ",
    }, {
        "ExamStart": "9/19/2015 8:13 AM",
        "id": 2,
        "ProtocolName": "P1, P2",
        "SeriesDescription": "P1 , P2 ",
        "parentId": null
    }];

}