Setting the width of the dropdown list of a MultiColumnComboBox

[Richard]

Hello support,

I am using a MultiColumnComboBox widget in this way

 

01.@(Html.Kendo().MultiColumnComboBoxFor(x => x.PostBack.Expediente.IdCliente)
02.    .DataValueField("ID")
03.    .DataTextField("Nombre")
04.    .Columns(columns =>
05.    {
06.        columns.Add().Field("Nombre").Title("Cliente").Width("200px");
07.        columns.Add().Field("Mercado").Width("200px");
08.        columns.Add().Field("Subgrupo").Width("200px");
09.    })
10.    .Filter(FilterType.StartsWith)
11.    .BindTo(Model.Clientes)
12.    .HtmlAttributes(new { data_bind = "value: Expediente.Cliente" })
13.)

 

So far so good.

The question is: How can I specify the width of the whole dropdown list and in case the sum of the width of each column is greater than the width of the whole dropdown list then show a horizontal scroll bar (like the grid widget does) ?

Attached is a screenshot of the current widget rendered and below it the scrollbar I want to show (if necessary)

Thank you.

PD: I’ve tried with this post but it didn’t work https://www.telerik.com/forums/dropdownlist-should-take-size-of-biggest-option

[Marin Bratanov]

Hi Richard,

The following article explains how to set the dropdown width of the widget and how it behaves depending on the columns width settings: https://docs.telerik.com/kendo-ui/controls/editors/multicolumncombobox/overview#columns.

For MVC, you can use the .DropDownWidth() configuration method.

If you don't set a value, it will be as wide as the input, you can see that in action in the following demo: https://demos.telerik.com/aspnet-mvc/multicolumncombobox/serverfiltering.

There is no official feature that puts a horizontal scrollbar on the dropdown, as its purpose is to make the columns visible (as per the first documentation link). If you would like to see different behavior or a new setting, I suggest you file the feature request in our feedback portal together with a description of the goal and how you expect it to be controlled, so the community can vote and comment on it (which will, in turn, let management prioritize it): https://feedback.telerik.com/kendo-jquery-ui/.

Regards,
Marin Bratanov
Progress Telerik