JSFiddle - React, Tailwind, and code Playground

by ingeo

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container">
        <script type="text/x-kendo-tmpl" id="listViewTpl">
            <li data-uid="#= uid #"><img src="#= BoxArt.SmallUrl #" alt="" /></li>
        </script>
        
        <script type="text/x-kendo-tmpl" id="imagesTpl">
            <img id="move-#= id #" src="#= url #" alt="" />
        </script>
        
        <script type="text/x-kendo-tmpl" id="imageSetTpl">
            <div id="#= id #" class="imageSet">
                <div class="control-group">
                    <label class="control-label" for="imgSetName-#= id #">Image Set Name:</label>
                    <div class="controls">
                        <input id="imgSetName-#= id #" type="text" class="k-textbox" style="width:200px" data-bind="value: name" required="true" />
                    </div>
                </div>
    
                <div class="images" data-bind="source: images" data-template="imagesTpl"></div>
            </div>
        </script>
        
        <div class="row">
            <div class="span2">
                <div id="source">
                    <ul id="listView"></ul>
                    
                    <div class="controls">
                        <a href="#" id="addBtn" class="btn btn-primary">Add Image</a>
                    </div>
                </div>
            </div>
            <div class="span10">
            
                <div id="editView">
                
                    <div data-bind="source: imageSets" data-template="imageSetTpl"></div>    
              ...

CSS

#source .controls { 
            margin-top: 8px; 
            text-align: center;
        }
        
        #listView {
            height: 400px;
            overflow: scroll;
            list-style: none;
        }
        
        #listView li { 
            text-align: center;
            cursor: pointer;
        }
        
        #editView img {
            padding: 2px;
        }

JavaScript

var LIST_VIEW = '#listView',
    LIST_VIEW_TPL = '#listViewTpl',
    EDIT_VIEW = '#editView',
    ADD_BUTTON = '#addBtn',
    SELECTED_STATE = 'k-state-selected',
    listView, editView, dataSet = kendo.observable({
        imageSets: [{
            id: 'a',
            name: 'Image Set 1',
            images: [{
                id: '8ENtE',
                url: 'http://cdn-0.nflximg.com/en_us/boxshots/small/21639116.jpg'}]}]
    });

listView = $(LIST_VIEW).kendoListView({
    dataSource: {
        type: "odata",
        serverFiltering: true,
        filter: [{
            field: "Name",
            operator: "contains",
            value: "Star Wars"},
        {
            field: "BoxArt.SmallUrl",
            operator: "neq",
            value: null}],

        transport: {
            read: "http://odata.netflix.com/Catalog/Titles",
            contentType: "application/json; charset=utf-8",
            type: "GET",
            dataType: "jsonp"
        }
    },

    selectable: 'multiple',

    template: kendo.template($(LIST_VIEW_TPL).html())
}).data('kendoListView');

kendo.bind($(EDIT_VIEW), dataSet);

$(ADD_BUTTON).click(function(e) {
    e.preventDefault();

    $(LIST_VIEW).find('li.' + SELECTED_STATE).each(function() {

        //for each image selected add it to the images collection
        var record = listView.dataSource.getByUid($(this).attr('data-uid')),
            id = record.get('Id');

        //First make sure we have not already added this image
        if ($(EDIT_VIEW).find('img#move-' + id).length > 0) {
            return; //skip
        }

        dataSet.imageSets[0].images.push({
            id: record.get('Id'),
            url: record.get('BoxArt.SmallUrl')
        });

    });
});