Geek Answers Handbook

How to set automatic width for combo box in Kendo user interface?

I want to set the width of the combo box automatically based on the longest text associated with the Combo field, so I tried as shown below, but I can see the automatic size (width) only for the drop-down list (drop-down when clicking on the combo) in the field with the list is still longer than expected, the total length should be reduced to hold only 3 characters, am I missing something?

enter image description 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/

0
source share
3 answers

I think you could determine the length in the data source itself, and then resize the drop down list. This works for a demo project, but I think, depending on the styles and indents you might need, to improve the calibration technique a bit more.

Determines the size of the elements (again, if you use objects instead of strings inside the array, you may need to modify it a bit (you can pass displayMember if you want)

 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 element 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");

the fiddle can be found here: http://jsfiddle.net/Icepickle/gLbLtjhf/

+3
source

I want to add, if you want to have a fixed width comboBox regardless of the length of the data item, then define the HtmlAttributes property "when 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);

Link Link

+2
source

Try adding this css.

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

and register an open event

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

Demo

Update

You might need to wrap a combobox and wrap it with a div .

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

then change jquery to

 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

0
source

More articles:


All Articles