Initialize DropDownLists using .dropdown

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<button id="create">Add</button>
<input class="dropdown" />
<input class="dropdown" />
<input class="dropdown" />

CSS

.focused
{
   border-color: red;
   border-width: 2px;
}

JavaScript

$(".dropdown").each(function() {
    $(this).kendoDropDownList([
        {text: "Item1", value: 1},                    
        {text: "Item2", value: 2}
    ]);
});

$(".k-dropdown").bind({
    blur: function() {
        $(this).removeClass("focused");    
    },
    focus: function() {
        $(this).addClass("focused");            
    }
});

$("#create").click(function() {
    var lastInput = $(".k-dropdown:last input"),
        clone = $(".k-dropdown:last input").clone();
    
    clone.show()
         .insertAfter(lastInput.closest(".k-dropdown"))
         .kendoDropDownList([
            {text: "Item1", value: 1},                    
            {text: "Item2", value: 2}
         ]);
});