I want to set the bo 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 bo) of the bo 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="bobox" />

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

/

I want to set the bo 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 bo) of the bo 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="bobox" />

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

http://jsfiddle/KendoDev/Z4rwQ/

• javascript
• jquery
• css
• kendo-ui
• kendo-bobox

• Possible duplicate of How to resize a kendo ui bobox? – user4103496 Commented Nov 10, 2015 at 19:01

3 Answers 3

I guess you could determine the length in the datasource itself, and then resize the bobox. 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 bobox, you can bind to the dataBound event, determine the size of the elements, and update the container and parent to match the actual size

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

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

I will like to add, if you want to have a fixed width of boBox irrespective of the data item length then define the "HtmlAttributes" property while defining the bo 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 bobox = $("#bobox").data("kendoComboBox");
bobox.list.width(200);

Reference Link

Try adding this css.

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

and register open event

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

DEMO

update

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

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

then change the jquery into

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

UPDATED DEMO