Ändern der Größe eines Kendo-Drop-downs

Question

Ich habe ein Kendo-Dropdown, das ich anpassen muss, aber aus irgendeinem Grund funktioniert es nicht. Es zeigt das Symbol an, ändert jedoch nicht die Größe des Containers.

Html:

<select id="dropdownlist"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 

Javascript

$("#dropdownlist").kendoDropDownList(); 

CSS

.k-list-container { 
    resize: both; 
    overflow: auto; 
} 

Es funktioniert für jede andere Steuerung außer Dropdown. Kann mir bitte jemand in die richtige Richtung zeigen?

http://jsfiddle.net/bWs9j/389/

Answer 1

Check this out:

$("#dropdownlist").kendoDropDownList().data("kendoDropDownList"); 

    var dragging = false, 
    currentX = null, 
    currentW = null; 

    $("body") 
    .on("mousedown", ".k-dropdown-wrap", function(e) { 
     dragging = true; 
     currentX = e.clientX; 
     currentW = $(this).width(); 
    }) 
    .on("mouseup", ".k-dropdown-wrap", function() { 
     dragging = false; 
    }) 
    .on("mousemove", function(e) { 
     if (dragging) { 
     var diff = currentX - e.clientX, 
       wrapper = $($("#dropdownlist").data("kendoDropDownList").wrapper); 

     wrapper.width((currentW - diff) + 20); 
     } 
    }) 
    .on("mouseup blur focusout", function() { 
     dragging = false; 
    }); 

Working Demo

Es gibt ein paar kleine gliches noch nicht, aber ich denke, man kann sie arbeiten, wie Sie wollen, aber auch wickeln Sie es in ein jQuery-Komponente, wenn Sie möchten.