Listbox Move Demo

Proof that it is possible to move massive amounts of selected item from one list box to another with acceptable performance.

by Jimmy Chandra

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div class="container">
    <div class="row">
        <div class="page-header">
    <h1>Listbox Move Demo</h1>
            <p>This should be able to handle quite large amount of data.  Testing <span id="spnTotalGenerated"></span> options...</p>
</div>
    </div>
    <form role="form">
        <div class="row">
            <div class="col-xs-5">
                <div class="form-group">
                    <label for="selSource">Source</label>
                    <select id="selSource" class="form-control" size="10" multiple="multiple">
                    </select>
                </div>
            </div>
            <div class="col-xs-2">
                <div class="form-group" style="margin-top:80px">
                    <button id="btnMoveRight" type="button" class="btn btn-btndefault btn-block">&raquo;</button>
                </div>
                <div class="form-group">
                    <button id="btnResetDest" type="button" class="btn btn-default btn-block">Reset</button>
                </div>
            </div>
            <div class="col-xs-5">
                <div class="form-group">
                    <label for="selDestination">Destination</label>
                    <select id="selDestination" class="form-control" size="10" multiple="multiple">
                    </select>
                </div>
            </div>
        </div>
    </form>
    
    <div class="row">
        <div class="col-xs-12">
            <div class="well" id="well">&nbsp;</div>
        </div>
    </div>
</div>

<script id="tmplMove" type="text/x-handlebars-template">{{moved}} of {{all}} item(s)...

JavaScript

(function(global) {
    var 
        totalItemsToGenerate = 10000,    //Change this to generate more or less...
        moveTemplate = Handlebars.compile($('#tmplMove').html()),
        generateOptions = function(count) {
            var i, o = '';
            for (i = 1; i <= count; i += 1) {
                o = o + '<option value="' + i + '">item '+ i + '</option>';
            }
            return o;
        },
        main = function() {
            var cachedSourceItems = generateOptions(totalItemsToGenerate);
            
            $('#spnTotalGenerated').html(totalItemsToGenerate);
            $('#selSource').html(cachedSourceItems);
            
            $('#btnResetDest').on('click', function() {
                    $('#selSource').html(cachedSourceItems);
                    $('#selDestination').html('');
                    $('#well').html('&nbsp;');
                });
            
            $('#btnMoveRight').on('click', function() {
                var startTime = new Date().getTime(),
                    endTime,
                    $allSource = $("#selSource option"),
                    $selectedItems = $("#selSource option:selected"),
                    sourceCount = $allSource.length,
                    moveCount = $selectedItems.length,
                    htmlFragment = '';
                
                    $selectedItems.each(function(){
                        htmlFragment += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
                    });
                    
                    $(htmlFragment).appendTo($('#selDestination'));
                    $selectedItems.remove();                    
                    
                endTime = new Date().getTime();
                
                $("#well").html(moveTemplate({
                    moved: moveCount,
                    all: sourceCount,
                    ellapsed: endTime - startTime
                }));
           });
        };
    
 ...