JSFiddle - React, Tailwind, and code Playground

by ravisingh

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<!DOCTYPE html >
<html>
<head>
    <title></title>
     <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" type="text/css"/>
    <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" type="text/css" />
    <style type="text/css">
        .multiSelect
        {
            width: 95px;
        }
        .text
        {
            width: 124px;
            height: 20px;
        }
    </style>
</head>
<body>
   <div id="view">
        <table>
            <tr>
                <td>
                    <dl>
                        <dt>
                            <label>
                                Select</label>
                        </dt>
                        <dd id="todrop">
                          <select multiple data-bind="source: UncheckedItems,value:SelectedValues" data-text-field="text" class="multiSelect" id="listbox1">
                </select>
                        </dd>
                    </dl>
                </td>
                <td>
                    <dl>
                        <dd>
                            <button data-bind="event{click: Add}">
                                &gt;&gt;</button></dd>
                        <dd>
                            <button data-bind="event{click: Remove}">
                                &lt;&lt;</button></dd>
                    </dl>
                </td>
                <td>
                    <dl>
                        <dt>
                            <label>
                                Select</label>
                        </dt>
                        <dd id="drop">
                            <select multiple class="multiSelect" data-bind="source:...

JavaScript

$(document).ready(function () {
    // View-Model
    var viewModel = kendo.observable({
        allItems: [],
        itemText: "Item 1",        
        SelectedValues: [],
        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
            });
        },
        Add: function (e) {
            DoCheckUncheck('checked');
        },
        Remove: function (e) {
            DoCheckUncheck(null);
        },
        // This event is bound to the check event
        CheckedEvent: function (e) {
            if (e.target.checked) {
                DoCheckUncheckOnCheckboxClick(e, 'checked');               
            }
            else {
                DoCheckUncheckOnCheckboxClick(e, null);
            }
        }
    });
    // Bind the View to the View-Model
    kendo.bind($("#view"), viewModel);

    //Registering kendo drag-drop events to controls
    $("#todrop").kendoDraggable({

    });

    $("#drop").kendoDropTarget({

        drop: checkedDroptargetOnDrop
    });

    $("#drop").kendoDraggable({

    });

    $("#todrop").kendoDropTarget({

        drop: unCheckedDroptargetOnDrop
    });


    function checkedDroptargetOnDrop(e) {
        DoCheckUncheck('checked');
    }

    function unCheckedDroptargetOnDrop(e) {
        DoCheckUncheck(null);
    }

    // check and uncheck the elements in 'allItems' depending on...