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

kendoDropDownList cell editor width

6 Answers 173 Views
Grid
This is a migrated thread and some comments may be shown as answers.
rafi
Top achievements
Rank 1
rafi asked on 28 May 2014, 02:35 PM
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.

6 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 30 May 2014, 07:03 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ruben
Top achievements
Rank 1
answered on 20 Jul 2015, 01:33 PM
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/
0
Iliana Nikolova
Telerik team
answered on 22 Jul 2015, 08:28 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ruben
Top achievements
Rank 1
answered on 22 Jul 2015, 03:00 PM
Thank you for your help.
0
Thomas
Top achievements
Rank 1
answered on 23 Jul 2015, 07:24 AM

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?​

0
Iliana Nikolova
Telerik team
answered on 24 Jul 2015, 11:11 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
rafi
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Ruben
Top achievements
Rank 1
Thomas
Top achievements
Rank 1
Share this question
or