JSFiddle - React, Tailwind, and code Playground

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
    <div id="treeview" class="demo-section"></div>
    <div id="grid"></div>
</div>

JavaScript

var tree = $("#treeview").kendoTreeView({
     checkboxes: {
         checkChildren: true
     },

     dataSource: [{
         id: 1,
         text: "My Project",
         expanded: true,
         spriteCssClass: "rootfolder",
         items: [{
             id: 2,
             text: "OrderID",
             expanded: true,
             spriteCssClass: "folder",
             items: [{
                 id: 3,
                 text: "10248"
             }, {
                 id: 4,
                 text: "10249"
             }, {
                 id: 5,
                 text: "10250"
             }, {
                 id: 6,
                 text: "10251"
             }, {
                 id: 7,
                 text: "10252"
             }]
         }

         ]
     }]
 }).data("kendoTreeView");

 $("#treeview").on("change", function (e) {
    var selected = $('#treeview :checked').closest('li');
    var ds = grid.dataSource;
    var filter = {
        logic  : "or",
        filters: []
    };
    $.each(selected, function (idx, elem) {
        var item = tree.dataItem(elem);
        if (parseInt(item.text)) {
            filter.filters.push({
                field   : "OrderID",
                operator: "eq",
                value   : parseInt(item.text)
            });
        }
    });
    ds.filter(filter);
 });


 var grid = $("#grid").kendoGrid({
     dataSource: {
         type: "odata",
         transport: {
             read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
         },
         schema: {
             model: {
                 fields: {
                     OrderID: {
                         type: "number"
                     },
                     Freight: {
                         type: "number"
                     },
                     ShipName: {
                         type: "string"
                     },
                     OrderDate: {
                         type: "date"
                     },
              ...