JSFiddle - React, Tailwind, and code Playground

by kashyapa

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="container" style="margin:10px">
        <fieldset style="width:90%">
            <legend><b>Optional Data Filters</b></legend>
            <button data-bind="click:onAdd">Add</button>
            <div data-role="grid"
                 data-columns='[{title:"",width:"50px"},{title:"Logic",width:"150px"}, {title:"Field"}, {title:"Operator"},{title:"Value"}]'
                 data-bind="source: items"
                 data-row-template="rowTemplate"></div>
            
        </fieldset>
        <fieldset style="width:800px">
            <legend><b>Grouping</b></legend>
            <div data-role="listview"
                 data-template="groupingTemplate"
                 data-bind="source: items"
                 ></div>
        </fieldset>
            <script id="groupingTemplate" type="text/x-kendo-tmpl">
                <div>
                     (#if(Logic){# #= Logic#  #}#  #= Field # #= Operator # #= Value # )
                </div>
            </script>
            <script id="rowTemplate" type="text/x-kendo-tmpl">
                <tr >
                    <td style="height:25px;border-bottom:1px solid lightgrey">
                        #if(Logic){#
                        <span data-bind="click: onRemove">&\#10008;</span>
                        #}#
                    </td>
                    <td style="height: 25px; border-bottom: 1px solid lightgrey">
                        #if(Logic){#
                        <select style="width:100px" data-role="dropdownlist" data-bind="value: Logic">
                            <option>And</option>
                            <option>Or</option>
                        </select>
                        #}#

                   ...

CSS

body{
            font-family:'Segoe UI'
        }

JavaScript

var Repository = function ($, kendo)
                {
                    var that = this,
                        repoData = null,
                        _data = [{ Logic: null, Field: "Field 1", Operator: "Equals", Value: "266366" }];
                        
                    this.getData = function ()
                    {
                        if (!repoData) {
                            repoData = new kendo.data.DataSource({
                                data: _data //For DEMO using Array. This can be controller returning JSON
                            });
                        }
                        return repoData;
                    };

                    this.addData = function (logic, field, operator, value)
                    {
                        that.getData().add({
                            Logic: logic,
                            Field: field,
                            Operator: operator,
                            Value: value
                        });
                    };
                }

                var repository = new Repository($, kendo);

                viewModel = kendo.observable({
                    items: repository.getData(),
                    onAdd: function ()
                    {
                        repository.addData("And", "Field " + Math.floor((Math.random() * 10) + 1), "Equals", "Value " + new Date().getMilliseconds())
                    },
                    onRemove:function(e)
                    {
                        this.items.remove(e.data);
                    }
                });

                $(document).ready(function ()
                {
                    kendo.bind($("#container"), viewModel)
                });