Appearance
The ComboBox provides options for setting the widths of its list and popup, accessing its list
elements, providing support for label
elements, and removing its input value.
Setting the List Width
To customize the width of the ComboBox list and change its dimensions, use the jQuery width()
method.
<input id="comboBox" />
<script>
var combobox = $("#combobox").data("kendoComboBox");
// Set the width of the drop-down list.
combobox.list.width(400);
</script>
Setting the Popup Width
You can enable the popup
element to automatically adjust its width according to the length of the item label it displays. When the autoWidth
option is set to true
, the popup will display the content on a single line and will not wrap it up.
Virtualized lists do not support the auto-width functionality.
<input id="combobox" style="width: 100px;" />
<script>
$("#combobox").kendoComboBox({
autoWidth: true,
dataSource: {
data: ["Short item", "An item with really, really long text"]
}
});
</script>
Accessing list Elements
The ComboBox list renders an ID
attribute which is generated from the ID of the widget and the -list
suffix. You can use the ID
to style the element or to access a specific element inside the popup element.
If the ComboBox has no ID, the
list
element will have noID
either.
<input id="combobox">
<script>
$(document).ready(function() {
$("#combobox").kendoComboBox({
dataSource: ["Item1", "Item2"]
});
// The DIV popup element that holds header and footer templates and the suggestion options.
var popupElement = $("#combobox-list");
console.log(popupElement);
});
</script>
Supporting label Elements
Because of its complex rendering, the focusing of the widget by using a label
element requires additional implementation. For a runnable example, refer to this Kendo UI Dojo demo.
Removing Input Values
The ComboBox enables you to remove the values from its input area by using the clearButton
configuration option. As a result, an X button appears in the input area on hover and when clicked, it resets the value of the widget and triggers the change
event. By default, clearButton
is enabled and is set to true
.