Setting the width of the dropdown list of a MultiColumnComboBox

2 posts, 0 answers
  1. Richard
    Richard avatar
    7 posts
    Member since:
    Jan 2019

    Posted 19 Feb Link to this post

    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" })


    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

  2. Marin Bratanov
    Marin Bratanov avatar
    4930 posts

    Posted 20 Feb Link to this post

    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:

    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:

    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):

    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top