Kendo UI OrderedMultiSelect

by kturner75

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div style="font-size: 10px;">Drag &amp; Drop to reorder the items in the list. Click x to remove the item.</div>
<div id="list-container"></div>
<div id="available-container">
    <input id="available-items" style="width: 400px;" />
</div>    

<script type="text/x-kendo-template" id="template">
    <div id="item-#:value#" class="item">
        <i class="fa fa-bars item-handle"></i>
        <span class="item-name">#:name#</span>
        <i id="close-#:value#" class="fa fa-close item-close" title="click to remove"></i>
    </div>
</script>

CSS

#available-container {
    padding-top: 10px;
}
#list-container {
    width: 400px;
}
.item {
    padding: 10px;
    border: 1px black solid;
    width: 380px;
}
.item:hover {
    background-color: #8EBC00;
    cursor: move;
}
.item-name {
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
}
.item-name:hover {
    cursor: move;
}
.item-handle {
    padding-left: 5px;
    padding-right: 5px;
}
.item-close {
    float: right;
    padding-right: 10px;
}
.item-close:hover {
    cursor: pointer;
}

JavaScript

var availableDataList = [
        { name: "Item Two", value: 2 },
        { name: "Item Four", value: 4 }
    ];
var selectedDataList = [
        { name: "Item One", value: 1 },
        { name: "Item Three", value: 3 }
    ];

var availableDataSource = new kendo.data.DataSource({
    data: availableDataList,
    schema: {
        model: {
            id: "value"
        }
    }
});

var selectedDataSource = new kendo.data.DataSource({
    data: selectedDataList,
    schema: {
        model: {
            id: "value"
        }
    }
});

function refreshClickHandler() {
    jQuery('.item-close').click(function(e) {
        var itemId = this.id.substring(6);
        var dataItem = selectedDataSource.get(itemId);
        selectedDataSource.remove(dataItem);
        availableDataSource.add(dataItem);
        refreshClickHandler();
    });
}

function addItem() {
    var selectedId = jQuery('#available-items').data("kendoDropDownList").value();
    if (selectedId) {
        var dataItem = availableDataSource.get(selectedId);
        availableDataSource.remove(dataItem);
        selectedDataSource.add(dataItem);
        refreshClickHandler();
    }
}

jQuery(document).ready(function() {
    availableDataSource.read();
    selectedDataSource.read();
    jQuery('#available-items').kendoDropDownList({
        optionLabel: "Choose an item to add to the list above.",
        dataSource: availableDataSource,
        dataTextField: "name",
        dataValueField: "value",
        filter: "contains",
        change: function() {
            addItem();
        }
    });
    jQuery('#list-container').kendoListView({
        dataSource: selectedDataSource,
        template: kendo.template(jQuery("#template").html())
    });
    
	jQuery("#list-container").kendoSortable({
        filter: ">div.item",
        cursor: "move",
        placeholder: function(element) {
            return element.clone().css("opacity", 0.1);
        },
        hint: function(element) {
           ...