JSFiddle - React, Tailwind, and code Playground

HTML

<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.rtl.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">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
    <input id="datetimepicker1" />
    <input id="datetimepicker2" />
    <p> 
        <span for="categories">Categories</span>
        <input id="categories" />
    </p>
    <p>
        <label for="products">Products:</label>
        <input id="products" />
    </p>
    <p>
        <label for="orders">Orders:</label>
        <input id="orders" />
    </p>
    <input type="button" id="filter" value="filter">
        
        <input id="reset" type="button" value="reset"/>
    <div id="grid"></div>
    <div id="filter-msg">Please wait while loading</div>

JavaScript

// Set up information window
$("#filter-msg").kendoWindow({
    modal: true,
    visible: false
});
 $("#reset").click(function () {
   $("#datetimepicker1").val('');
     $("#datetimepicker2").val('');
});
// Set up date pickers
$("#datetimepicker1").kendoDatePicker({});
$("#datetimepicker2").kendoDatePicker({});

// Set up DDL
var categories = $("#categories").kendoDropDownList({
    optionLabel: "Select category...",
    dataTextField: "CategoryName",
    dataValueField: "CategoryID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
        }
    }
}).data("kendoDropDownList");

var products = $("#products").kendoDropDownList({
    autoBind: false,
    cascadeFrom: "categories",
    optionLabel: "Select product...",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        }
    }
}).data("kendoDropDownList");

var orders = $("#orders").kendoDropDownList({
    autoBind: false,
    cascadeFrom: "products",
    optionLabel: "Select order...",
    dataTextField: "Order.ShipCity",
    dataValueField: "OrderID",
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
        }
    }
}).data("kendoDropDownList");


// Bind "click" event on button "Filter"
$("#filter").on("click", function () {
    var mindate = $('#datetimepicker1').val();
    var maxdate = $('#datetimepicker2').val();
    
    var product = $("#products").data("kendoDropDownList").value();
    var order = $("#orders").data("kendoDropDownList").value();

    if (!mindate || !maxdate || !product || !order) {
        var content = "";
        if (!mindate) 
           ...