Change the DropDownList's list in a column template

4 posts, 0 answers
  1. Peter
    Peter avatar
    3 posts
    Member since:
    Jun 2017

    Posted 06 Jul Link to this post

    Hi there,

    I’ve a grid with a column that is using a DropDownList as the template. It works as expected but I need to change the width of the dropDownList’s list.
    How can I do that?

     

    Here's the grid's code

    01.@(Html.Kendo().Grid(Model)
    02.    .Name("grid")
    03.    .Columns(columns =>
    04.    {
    05.        columns.Command(command =>
    06.        {
    07.            command.Destroy().Text("Eliminar");
    08.        }).Width(100).Title("Comandos");
    09.        columns.Bound(c => c.Empleado)
    10.            .ClientTemplate("#=Empleado.NumeroExpediente# - #=Empleado.Nombre#"
    11.                + " #=Empleado.Apellido1# #=Empleado.Apellido2#")
    12.            .Title("Empleado")
    13.            .Width(190);
    14.    })
    15.    .Editable(x => x.Mode(GridEditMode.InCell))
    16.    .DataSource(dataSource => dataSource
    17.        .Ajax()
    18.        .ServerOperation(false)
    19.        .Batch(true)
    20.        .Destroy("DeleteSubContrato", "Crear")
    21.        .Model(model =>
    22.        {
    23.            model.Id(p => p.ID);
    24.            model.Field(p => p.ID).DefaultValue(0);
    25.            model.Field(p => p.Empleado).DefaultValue(
    26.                ViewData["defaultEmpleado"] as Personal);
    27.        })
    28.    )
    29.    .Scrollable(x => x.Height(300))
    30.)

     

    and here's the DropDownList template

    1.@(Html.Kendo().DropDownListFor(m => m)
    2.    .DataValueField("ID")
    3.    .DataTextField("NumeroExpediente")
    4.    .ValueTemplate("<span> #:data.NumeroExpediente# - #:data.Nombre# #:data.Apellido1# #:data.Apellido2#</span>")
    5.    .Template("<span> #:data.NumeroExpediente# - #:data.Nombre# #:data.Apellido1# #:data.Apellido2#</span>")
    6.    .BindTo((System.Collections.IEnumerable)ViewData["empleados"])
    7.    .Filter(FilterType.StartsWith)
    8.)

     

    Here's a screenshot with the dropdownlist

    https://www.dropbox.com/s/wddlfekt28ss8zg/dropDownList.png?dl=0

     

    Thank you.

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1742 posts

    Posted 10 Jul Link to this post

    Hello Peter,

    By default the DropDownList will take the whole width of the grid column. If you would like to change that behavior you can explicitly specify the width of the DropDownList editor. The highlighted code below illustrates the approach.


    @(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("ID")
        .DataTextField("NumeroExpediente")
        .ValueTemplate("<span> #:data.NumeroExpediente# - #:data.Nombre# #:data.Apellido1# #:data.Apellido2#</span>")
        .Template("<span> #:data.NumeroExpediente# - #:data.Nombre# #:data.Apellido1# #:data.Apellido2#</span>")
        .BindTo((System.Collections.IEnumerable)ViewData["empleados"])
        .Filter(FilterType.StartsWith)
        .HtmlAttributes(new {style = "width: 180px;" })
    )



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Peter
    Peter avatar
    3 posts
    Member since:
    Jun 2017

    Posted 11 Jul in reply to Viktor Tachev Link to this post

    Hello Viktor,

     

    I tried your approach and it changes the column's width too.

    Here's a screenshot without using .HtmlAttributes

    https://www.dropbox.com/s/g555khmu3lwr502/before.png?dl=0

    and here's a screenshot using .HtmlAttributes

    https://www.dropbox.com/s/wmts6d9bg2v33ez/after.png?dl=0

    Thank you for your time

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1742 posts

    Posted 13 Jul Link to this post

    Hello Peter,

    When you set width for the DropDownList editor that is wider than the width of the column the editor would be partially hidden. This seems to be the behavior from the screenshot and it is expected. 

    If you would like the popup of the dropdown to expand in order to accomodate items with longer test you can enable the autoWidth property:


    @(Html.Kendo().DropDownListFor(m => m)
            .DataValueField("CategoryID")
            .DataTextField("CategoryName")
            .BindTo((System.Collections.IEnumerable)ViewData["categories"])
              
            .AutoWidth(true)
    )


    If you would like the popup to also shrink when items are not as wide you can apply the CSS below:


    .k-list-container.k-popup {
        min-width: initial !important;
    }



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top