Kendo dropdown width

Question

Hi can someone tell me how to set width for kendo dropdown? Here is my code sample and it is not working. Anything wrong in that?

$(\"#div1\").kendoDropDownList(         


        

Answer 1

You can try this as well;

<script type="text/javascript">
  $(document).ready(function() {
    var kendoDropDown = $('#div1').data('kendoDropDownList');
    kendoDropDown.list.width(250);
  });
</script>

Further documentation can be found here in Telerik's official API reference.

Answer 2

In case you have to give different width to different controls you can follow the below approach for giving the width to the specific control.

$("#div1").width(250).kendoDropDownList({
    dataSource: items,
    dataTextField: "Name",
    dataValueField: "Id",
})

Answer 3

This will work 100% as it has worked for me, I tried the above solution, it did not work for me so I found this on my own :), I hope you all benefit from this

#DivThatContainsTheDropdown .k-combobox{
width: 22em !important;
}

Answer 4

To keep the automatic width set by the browser:

$("select").each(function () {
    $(this)
        .width($(this).width())
        .kendoDropDownList();
});

Answer 5

Better to do it with CSS

#div1 {     
    width: 250px;
}

But will work with code

$("#div1").width(250).kendoDropDownList({
    dataSource: items,
    dataTextField: "Name",
   dataValueField: "Id",
})

Answer 6

The kendoDropDownList does not have a property width for it's configuration. See here: Kendo Docs

What you can do, is styling the correct class. Since you hopefully do know where your dropdown lies, you can specify the selector so it doesn't apply to all dropdowns.

#myContainer .k-dropdown {
     width: 250px;
}