JSFiddle - React, Tailwind, and code Playground

by umeshkrishna

HTML

<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.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="view">
        <dl>
            <dt>
                <label>
                    ListBox 1</label>
            </dt>
            <dd>
                <select multiple data-bind="source: UncheckedItems" data-text-field="text"
                
                    class="multiSelect">
                </select>
            </dd>
                        <dt>
                <label>
                    ListBox 2</label>
            </dt>
            <dd>
                <select multiple class="multiSelect" data-bind="source: CheckedItems" data-text-field="text">
                </select>
            </dd>
            <dt>
                <label>
                    Item Text:</label>
            </dt>
            <dd>
                <input id="txtItemText" data-bind="value: itemText" class="text" /></dd>
            <dd>
                <button data-bind="event{click: addItem}">
                    Add Item
                </button>
            </dd>
            <dt>Items Added:</dt>
            <dd>
                <ul data-template="checkbox-template" data-bind="source: allItems"></ul>
            </dd>
        </dl>
</div>
<script id="checkbox-template" type="text/x-kendo-template">
    <li> 
        <input type="checkbox" data-bind="value: text, event{click: CheckedEvent}" #= checked # />
        <span data-bind="text: text"></span> 
    </li> 

    </script>

CSS

.multiSelect
        {
            width: 95px;
        }
        .text
        {
            width: 124px;
            height: 20px;
        }

JavaScript

$(document).ready(function() {
    // View-Model
    var viewModel = kendo.observable({

        allItems: [],
        itemText: "Item 1",
        //    leftItems:[],
        //    rightItems:[],
        leftSelectValue: [],
        rightSelectValue: [],

        CheckedItems: function(e) {
            var chkItems = [];
            $.map(this.get("allItems"), function(elem, idx) {

                if (elem.checked) chkItems.push(elem);
            });

            return chkItems;

        },

        UncheckedItems: function(e) {

            var unchkItems = [];
            $.map(this.get("allItems"), function(elem, idx) {

                if (!(elem.checked)) unchkItems.push(elem);
            });
            return unchkItems;
        },


        // This is bound to Add Item click event.
        addItem: function(e) {

            this.get("allItems").push({
                text: this.get("itemText"),
                checked: null
            });
        },


        // This event is bound to the check event
        CheckedEvent: function(e) {

            if (e.target.checked) {
                e.data.checked = "checked";

            }
            else {
                e.data.checked = null;
            }

            this.set("allItems[" + $(e.target).parent().index() + "]", e.data);

        }

    });

    // Bind the View to the View-Model
    kendo.bind($("#view"), viewModel);
});