Change the DropDownList's list in a column template

[Peter]

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.

[Viktor Tachev]

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

[Peter]

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

[Viktor Tachev]

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