Set Search/Filter drop down width

[Daniel]

Using the Kendo Grid javascript, how do I set the width of the filter drop down in the grid header when there are long texts in the drop down?  Basically I do not want wrapping, but at the same time, I do not want to increase the column width.

The length needs to approximately match the length of the longest text.

 

[Stefan]

Hello, Daniel,

Could you please specify which is the mentioned filter DropDown?

If this is the row filter input I can suggest using the autoFitColumn method of the Kendo UI Grid which will set the width of the column based on the text length which will affect the filter in the header as well:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-autoFitColumn

If this is a different filter, please provide a screenshot demonstrating which DropDown width have to be made based on the longest text. 

Regards,
Stefan
Progress Telerik

[Daniel]

Stefan,

I've attached a screenshot.  See "Information Technology Region"; it should not wrap in the drop down.

Thanks

[Stefan]

Hello, Daniel,

Thank you for the provided details.

The desired result can be achieved by programmatically setting the autoWidth property of the AutoComplete when the Grid is initialized:

https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete#configuration-autoWidth

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

dataBound:function(e){
  $(e.sender.element).find('[data-role="autocomplete"]').each(function(){
    $(this).data("kendoAutoComplete").setOptions({autoWidth:true})
  })
},

I made an example demonstrating this:

http://dojo.telerik.com/OgUTA

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[S.Ahmadi]

hello.

I hope that this work for you:

.k-rtl .k-filtercell > span {
    padding-right: 0;
    padding-left: 0;
}