JSFiddle - React, Tailwind, and code Playground

by CuinnWylie

HTML

<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<button type="button" id="refreshButton">Create Grid</button>  

<div id="gridWrapper">
    <div id="demoGrid">
    </div>
</div>

JavaScript

function createGrid() {

    var dataSource = {
        data: [
            {
            FirstName: "Harold",
            LastName: "Kumar",
            City: "London",
            Title: "Mr",
            Age: 63}
              ]
    };

    kg = $('#demoGrid').data('kendoGrid');
    if (kg !== undefined) {
        $('#demoGrid').data('kendoGrid').thead.find('.k-filterable').each(function(i, HeadEl) {
            var HEForm = $(HeadEl).data('kendoFilterMenu').form;
            HEForm.find('select').each(function(i, el) {
                var SelectList = $(el).data('kendoDropDownList');
                $(SelectList.list[0]).remove();
            })
            $(HEForm).remove();
        });
    }

    $('#gridWrapper').empty().html('<div id="demoGrid"></div>')
    $("#demoGrid").kendoGrid({
        height: 250,
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: true,
        groupable: true,
        dataSource: dataSource,
        columns: [
            {
            field: "FirstName",
            title: "First Name"},
        {
            field: "LastName",
            title: "Last Name"},
        {
            field: "City"},
        {
            field: "Title"},
        {
            field: "Age"}
        ]
    });
    $("#refreshButton").text("Refresh Grid");
};

// createGrid();
$("#refreshButton").click(function() {
    createGrid();
});