Combobox virtual and autowidth alternative?

[Dan]

I have a combobox that has to display very many rows so I have decided to use virtual. Now I have to display for each row 6 fields in a table and I saw there was an example https://docs.telerik.com/kendo-ui/knowledge-base/dropdownlist-with-embedded-table. After playing around and trying to make it work I saw in the documentation that Combobox auto-width does not work with virtual.

Is there an alternative to this?

I tried to set myself the width of the popup but for some reason the kendo ui code changes it back or the display ignores the value.

[Aleksandar]

Hello Dan,

For the described scenario, I would suggest using the Kendo MultiColumnComboBox. Besides the standard Kendo UI ComboBox functionality, the MultiColumnComboBox enables you to define columns that will be rendered in the drop-down and specify against which fields from the data source the filter will apply. The option to set each column's width is available via the .Width() property. 

A runnable demo of a MulticolumnComboBox with virtualization implemented is available if you would like to review whether the widget will meet the requirements of the application.

Let me know if this suggestion works for you.

Regards,
Aleksandar
Progress Telerik

[Dan]

Hi Aleksandar,

Thank you for reminding me that telerik introduced a multicolumn combobox. But now I have a follow up question: Does it support not to display the column title or it can be solved only through css?

[Aleksandar]

Hi Dan,

You could use an empty string as a template for the column header, however this will not hide the headers completely. You can check this approach in this dojo and use it if this suits your application layout.

If you would like to hide the column headers completely you would need to use a CSS rule for this. The popup is rendered in a container with an id generated based on the id of the MultiColumnComboBox in the following manner: MultiColumnComboBoxId-list. The data is displayed is rendered as a grid, so the headers could be hidden using the following:

#MultiColumnComboBoxId-list .k-grid-header{
   display:none;
}

A demo for this approach is available in this dojo.

I hope this helps.

Regards,
Aleksandar
Progress Telerik