Grid ForeignKey Column Dropdown Filter Style

[Nils]

Hello everybody,

im trying to achieve that the dropdown filter list in my grid takes the size from it's biggest option.

I found other explanations for different situations and none of those worked for me.

 

I have a MVC Grid with a ForeignKey Column, that is filtered with a dropdown of enum values.

x.ForeignKey(b => b.Status, Model.OrderGapStatus).Filterable(f => f.Cell(c => c.Template("statusFilter"))).Title(Localizer.Lang_Status).ClientTemplate("#: StatusName #");

And a js handler trying to set the width to "auto". But it doesn't work :/

<script type="text/javascript">
    function statusFilter(element) {
       // what do i need to do here?
    }
</script>

Help would be really appreciated 😃

 

Have a good day & happy coding

Nils

[Eyup]

Hi Nils,

 

Thank you for writing to us.

Actually, you can achieve this requirement using just CSS. And usually, the dropdowns take the full width as demonstrated here:
https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

And even in Row mode it takes all the Width:

Could you elaborate what you are looking for exactly? If you are insisting on using a custom template, send us your entire Grid definition.

 

Regards,
Eyup
Progress Telerik

[Nils]

Hi Eyup,

that is correct, it takes the width of the column, but my columns are rather slim. I want the dropdown list to be wide enough that none of the points inside break into multiple rows. Like in your example, if the texts get to long.

Oh, and yes we use "GridFilterMode.Row".

How it's solved doesn't realy matter to me, as long as its working :)

I just thought JS was the way to go about this.

Regards,

Nils

[Eyup]

Hi Nils,

This is achievable using the autoWidth property provided by the widget:
https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/autowidth

You can access the Kendo instance of the dropdown and use the .setOptions() method do apply this property. If you prefer, I can also prepare a full sample with a grid.

[Nils]

Hey,

its working now.

Thank you very much :)