How to set the auto width for combo box in Kendo UI?

Question

I want to set the combo box width automatically based on the lengthiest text which is bound to the Combo box, so I tried like below, but I am able to see the auto size (width) only for drop down (drop down when clicking the combo) of the combo box, still the length is greater than expected, the overall length should be reduced to hold only 3 characters, am I missing something here?

<input id="combobox" />

$("#combobox").kendoComboBox({
  index: 0,
  dataSource: {
    data: ["One", "Two"]
  }
});
var comboBox = $("#combobox").data("kendoComboBox");
comboBox.list.width("auto");
$("#combobox").width(parseInt($("#combobox").css("width")));

http://jsfiddle.net/KendoDev/Z4rwQ/

Answer 1

I guess you could determine the length in the datasource itself, and then resize the combobox. This works for a demo project, but i guess depending on styles and padding that you might need to to some more refining to the sizing technique.

This determines the size of the elements (again, in case you are using objects instead of strings inside the array, you might need to refine it a bit (you could pass the displayMember if you'd like)

function determineWidth(ds) {
    var l = ds.length, selement = document.createElement('span'), maxwidth = 0, curwidth = 0;
    selement.style = 'position: fixed; left: -500px; top: -500px;';
    document.body.appendChild(selement);
    for (var i = 0; i < l; i++) {
        $(selement).html(ds[i]);
        curwidth = $(selement).width();
        if (curwidth < maxwidth) {
            continue;
        }
        maxwidth = curwidth;
    }
    document.body.removeChild(selement);
    return curwidth + 24;
}

inside the combobox, you can bind to the dataBound event, determine the size of the elements, and update the container and parent to match the actual size

$("#combobox").kendoComboBox({
    index: 0,
    dataSource: {
        data: ["One", "Two", "Hundred"]
    },
    dataBound: function() {
        var width = determineWidth(this.dataSource.data());
        $('#combobox-container').find('span>.k-dropdown-wrap').width(width).parent().width(width);
    }
});
var comboBox = $("#combobox").data("kendoComboBox");

fiddle you can find here: http://jsfiddle.net/Icepickle/gLbLtjhf/

Answer 2

I will like to add, if you want to have a fixed width of comboBox irrespective of the data item length then define the "HtmlAttributes" property while defining the combo box:

 @(Html.Kendo().ComboBox().Name("myCombo")
   .DataTextField("Text")
   .DataValueField("Value")
   .Placeholder("--- Select ---")
   .DataSource(src => src.Read(read => read.Action("ActionMethod", "Controller")))
   .HtmlAttributes(new { style = "width: 200px;"})
   )

Or from javascript:

var combobox = $("#combobox").data("kendoComboBox");
combobox.list.width(200);

Reference Link

Answer 3

Try adding this css.

.k-combobox
{
    display: inline !important;
}

and register open event

open: function(e) {
    var width = $(".k-combobox").width();
    $(".k-animation-container").width(width);
    $(".k-list-container").width(width - 4);
}

DEMO

update

Perhaps you need to wrap the combobox and wrap it with div.

<div id="combobox-container">
   <input id="combobox" />
</div>

then change the jquery into

open: function(e) {
    var width = $("#combobox-container").width();
    $("#combobox-container").parent().find(".k-animation-container").width(width);
    $("#combobox-container").parent().find(".k-list-container").width(width - 4);
}

UPDATED DEMO