DeDup Window

by JQ Purfect

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css">
<div id="example"> <span id="undo" style="display:none"><i class="fa fa-filter"></i></span>

    <div id="window">
        <div id="container">
            <div id="content">
                <div style="width:480px; height: 300px;">
                    <p style="text-align: right;">Query Count: 89,876</p>
                    <div>
                        <select data-placeholder="Choose data fields..." id="chosen-select" class="chosen-select" multiple tabindex="4" style="width:450px;">
                            <option value="value 1">Field 1</option>
                            <option value="value 2">Field 2</option>
                            <option value="value 3">Field 3</option>
                            <option value="value 4">Field 4</option>
                            <option value="value 5">Field 5</option>
                            <option value="value 6">Field 6</option>
                            <option value="value 7">Field 7</option>
                            <option value="value 8">Field 8</option>
                        </select>
                        &nbsp;<i id="filter" class="fa fa-filter fa-lg"></i>
                    </div>
                    <div>
                        <p class="font10 primary">Selected De-Dups Fields:

                        </p>
                        <div id="results" class="font10"></div>
                    </div>
                </div>
            </div>
        </div>
   ...

CSS

body {
    font-family: arial;
}
.font10 {
    font-size: 10.5pt;
}
.primary {
    color: #428BCA;
}
#example {
    min-height:550px;
}
#undo {
    text-align: center;
    position: absolute;
    white-space: nowrap;
    padding: 1em;
    cursor: pointer;
}
.hr {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #E6E6E6;
}

JavaScript

$(document).ready(function () {
     var window = $("#window"),
         undo = $("#undo")
             .bind("click", function () {
             window.data("kendoWindow").open();
             undo.hide();
         });

     var onClose = function () {
         undo.show();
     }

     if (!window.data("kendoWindow")) {
         window.kendoWindow({
             width: "500px",
             title: "DeDups Window Title",
             actions: [
                 "Pin",
                 "Refresh",
                 "Close"],
             close: onClose
         });
     }
 });

 $("#chosen-select").chosen({
     no_results_text: "Oops, nothing found!"
 });

 $('#chosen-select').on('change', function () {
     var textToAppend = "";
     var selMulti = $("#chosen-select option:selected").each(function () {
         textToAppend += (textToAppend == "") ? "" : "<hr class='hr'>";
         textToAppend += "<i class='fa fa-filter'></i>&nbsp;&nbsp;" + $(this).text() + "<span style='padding-right:100px;'>&nbsp;</span>" + $(this).val();
     });
     $("#results").html(textToAppend);

 });

$("#filter").click(function() {
  alert("Apply button click here..");  
})