kendoDropDownList cell editor width

[rafi]

hi,

I use  kendoDropDownList as editor in few cells in kendo grid  .

How can I define the width of the list to be depended on the list items length (auto) and not on the containing cell width?

The issues for this question are: 

     • I don’t want to change the columns width, just the popup list, so that the list will be wider than the cell.
     • I support in my grid few languages, so I don’t know on the grid loading – what items are going to be in the list.

thanks.

[Iliana Dyankova]

Hi Rafi,

To achieve the expected result you can set width auto to the DropDownList editor: 

#ddlId-list{
    width: auto !important;
}

Regards,
Iliana Nikolova
Telerik

 

 

[Ruben]

Hello,

I have similar question. I need to have dropdown wider than a column, because dropdown should provide more item information than in a column. When I use suggested width: auto !important; dropdown stays inside of column and not even expands down. Please help. Thank you.
http://jsfiddle.net/gdouauyw/3/

[Iliana Dyankova]

Hi Ruben,

In order to make the DropDown wider that the column you should set overflow: visible to that column. For your convenience here is the updated example.

Regards,
Iliana Nikolova
Telerik

 

 

[Ruben]

Thank you for your help.

[Thomas]

Hi, 

In Similar issue, I ahve a kendo grid which has two dropdown list in it. How to set different width for it.
Consider grid is having two drop down list.
 @(Html.Kendo().Grid<​Sample.Web.Models.​Employee>()
                                .Name("grid")
                            .Columns(columns =>
                            {
                                columns.Bound(m => m.Employee).ClientTemplate("#:​EmployeeName#");                             
                                columns.Bound(m => m.​BirthPlace).ClientTemplate("#:​BirthPlaceName#");
                                columns.Command(comm =>
                                {
                                    comm.Edit();
                                    comm.Custom(Resources.Delete).Click("DeleteItem");
                                }).HeaderTemplate("");

                            })

 

In Css, if i declare it as 

  #grid  span.k-dropdown 
   {
    width : 100px !important ;
   }

 

The size is set for both the columns(dropdown). I need width 50px to EmployeeName and width 100px to Birthplace. Is it possible?​

[Iliana Dyankova]

Hi Thomas,

For this you could set different class names to Employee and BirthPlace columns and use these classes in the CSS selectors. For example: 

//....
.Columns(columns =>
  {
  columns.Bound(m => m.Employee).ClientTemplate("#:​EmployeeName#").HtmlAttributes(new { @class="EmployeeNameClass"});
  columns.Bound(m => m.​BirthPlace).ClientTemplate("#:​BirthPlaceName#").HtmlAttributes(new { @class="BirthPlaceName"});
})

<style>
#grid .EmployeeName span.k-dropdown {
   width : 50px;
}

#grid .BirthPlaceName span.k-dropdown {
   width : 100px;
}
</style>

Regards,
Iliana Nikolova
Telerik