JSFiddle - React, Tailwind, and code Playground

by doriansao

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.blueopal.min.css">
<div id="grid0"></div>
<br/>  
<span style="float: right"><a id="search" class="k-button">Search</a> <a id="saveQuery" class="k-button">Save Query</a> <a id="clear" class="k-button">Clear</a></span>

JavaScript

var universalSearchViewModel = universalSearchViewModel || {}; 
initializeViewModel();
initializeGrid($('#grid' + 0), 0, 'AND', universalSearchViewModel.gridItems);

function initializeViewModel() {
      universalSearchViewModel = kendo.observable({        
        gridItems: [],
        gridIds: 1,           
        getFieldDataSource: function (joinOperator) {
          var displayName = joinOperator == 'AND' ? 'Any of the following...' : 'All of the following...';
          var data = [];
          data.push({ DisplayName: "", Type: null });
          data.push({ DisplayName: displayName, Type: null });
          data.push({ DisplayName: "Field1", Type: "Boolean" });
          data.push({ DisplayName: "Field2", Type: "DateTime" });
          data.push({ DisplayName: "Field3", Type: "Integer 16" });
          data.push({ DisplayName: "Field4", Type: "Integer 32" });
          data.push({ DisplayName: "Field5", Type: "Integer 64" });
          data.push({ DisplayName: "Field6", Type: "String" });
          return new kendo.data.DataSource({
            type: "json",
            data: data
          });
        },
        operatorDataSource: new kendo.data.DataSource({
          type: "json",
          transport: {
            read: function (options) {
              var data = [
                { Descr: "", OpCode: "", DataTypeBinding: "Boolean,DateTime,Decimal,Integer 16,Integer 32,Integer 64,String" },
                { Descr: "Equals", OpCode: "==", DataTypeBinding: "Boolean,DateTime,Decimal,Integer 16,Integer 32,Integer 64,String" },
                { Descr: "Not Equals", OpCode: "!=", DataTypeBinding: "Boolean,DateTime,Decimal,Integer 16,Integer 32,Integer 64,String" },
                { Descr: "Contains", OpCode: "**", DataTypeBinding: "String" },
                { Descr: "Not Contains", OpCode: "!*", DataTypeBinding: "String" },
                { Descr: "Less Than", OpCode: "<", DataTypeBinding: "DateTime,Decimal,Integer 16,Integer 32,Integer 64,String"...