This is a migrated thread and some comments may be shown as answers.

Change the DropDownList's list in a column template

3 Answers 242 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 06 Jul 2017, 12:59 PM

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.

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 10 Jul 2017, 10:45 AM
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.
0
Peter
Top achievements
Rank 1
answered on 11 Jul 2017, 12:14 PM

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

0
Viktor Tachev
Telerik team
answered on 13 Jul 2017, 09:12 AM
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.
Tags
Grid
Asked by
Peter
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Peter
Top achievements
Rank 1
Share this question
or