JSFiddle - React, Tailwind, and code Playground

by Thomas Jackson

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.dataviz.min.css">
<div id="grid"></div>
<div class="chart-wrapper">
     <div id="chart"></div>
</div>


 <script type="text/x-kendo-template" id="template">
    <div class="toolbar">
        <label class="category-label" for="Last name"> by last name:</label>
        <input type="search" id="LastName" style="width: 230px"></input>
    </div>
</script>

JavaScript

var data = [
    {
    "percentage": 22,
    "source": "Hydro"},

{
    "percentage": 2,
    "source": "Solar"

    },
{
    "percentage": 49,
    "source": "Nuclear"

    },
{
    "percentage": 27,
    "source": "Wind"

    }
];
var dataSource = new kendo.data.DataSource({
    data: data
});

function createGrid() {
    $("#grid").kendoGrid({
        dataSource: dataSource,
        toolbar: kendo.template($("#template").html()),
        columns: [
            {
            field: "source",
            title: "Source"},
        {
            field: "percentage",
            title: "Percentage"}

        ],
        filterable: true,
        selectable: true
    });
}

$(document).ready(function() {
    createGrid();
    var dropDown = $("#LastName").kendoDropDownList({
        dataTextField: "LastName",
        dataValueField: "Id",
        autoBind: false,
        optionLabel: "All",
        dataSource: {

            data:[{LastName:"test",Id:"2"},{LastName:"test2",Id:"49"}]
        },
        change: function() {
            var value = this.value();
            if (value) {
                $('#grid').data("kendoGrid").dataSource.filter({
                    field: "percentage",
                    operator: "eq",
                    value: parseInt(value)
                });
            } else {
                           $('#grid').data("kendoGrid").dataSource.filter({});
            }
        }
    });
});