Adaptive Mode
The Telerik UI for ASP.NET Core MultiColumnComboBox supports an adaptive mode that provides a mobile-friendly rendering of its popup. Which will accommodate its content based on the current screen size.
To set the adaptive mode, use the AdaptiveMode() option.
@(Html.Kendo().MultiColumnComboBox()
.Name("products")
.DataTextField("ProductName")
.DataValueField("ProductID")
.AdaptiveMode(AdaptiveMode.Auto)
.Columns(columns =>
{
columns.Add().Field("ProductName").Title("Name");
columns.Add().Field("ProductID").Title("ID");
})
.HtmlAttributes(new { style = "width:100%;" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("AdaptiveMode_GetProducts", "MultiColumnComboBox");
});
})
)
<kendo-multicolumncombobox name="products"
datatextfield="ProductName"
datavaluefield="ProductID"
adaptive-mode="AdaptiveMode.Auto"
style="width:100%;">
<multicolumncombobox-columns>
<column field="ProductName" title="Name">
</column>
<column field="ProductID" title="ID">
</column>
</multicolumncombobox-columns>
<datasource>
<transport>
<read url="@Url.Action("AdaptiveMode_GetProducts", "MultiColumnComboBox")" />
</transport>
</datasource>
</kendo-multicolumncombobox>