CODEWITHSUNDEEP
jquerykendo-uikendo-asp.net-mvckendo-combobox
Josh
Josh

Reputation: 2006

Is it possible to change Kendo ComboBox option items' width on event?

I've got a limited display width for a Kendo ComboBox, so in it's normal state, I need to to be fairly narrow. The option items take advantage of a "template" and are much wider that the ComboBox. I'd like to update the width when the ComboBox is clicked/engaged by the user, and while the js/css changes I've been making seem to work, the option items do not display in the correct width until the 2nd time the combobox is clicked - the the actual combox box width changes.

@Html.Kendo().ComboBox()
             .Name("Type")
             .BindTo(Model.Types)
             .Events(e => { e.Open("TypeOpen"); })
             .Template("<div style='width: 300px'>${ data.Text }</div>")

// js

function TypeOpen() {
  $("#Type").closest(".k-widget").css("width", "300px");
}

// after first click; it looks good after the 2nd click

after first click

Upvotes: 1

Views: 2217

Answers (1)

Ross Bush
Ross Bush

Reputation: 15185

If you put your DropDownList in a div you can control the drop down list size using a css:

    <div id="myCombo">
        @Html.Kendo().ComboBox().HtmlAttributes(new { style = "width:50px" }) 
                     .Name("Type")
                     .BindTo(Model.Types)
                     .Events(e => { e.Open("TypeOpen"); })
                     .Template("<div style='width: 300px'>${ data.Text }</div>")
    </div>

   <style>
     #myCombo-list
        {
            width: 100px !important;
        }    
   </style>

Upvotes: 6

Related Questions