Floating Label
A floating label is a placeholder text for form or input fields, which floats above that field and remains visible once the user starts interacting with that field.
To implement a floating label in the Telerik UI MultiColumnComboBox for ASP.NET Core, define it either as a string or from a function handler.
The following example demonstrates how to set the floating label as a string:
@(Html.Kendo().MultiColumnComboBox()
.Name("products")
.DataTextField("ProductName")
.DataValueField("ProductID")
.Label(label => {
label.Content("Select a product...");
label.Floating(true);
})
.Columns(columns =>
{
columns.Add().Field("ProductName").Title("Name");
columns.Add().Field("ProductID").Title("ID");
})
.HtmlAttributes(new { style = "width:100%;" })
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("ServerFiltering_GetProducts", "MultiColumnComboBox");
});
})
)
<kendo-multicolumncombobox name="products"
datatextfield="ProductName"
datavaluefield="ProductID"
filter="FilterType.Contains" style="width:100%;">
<label content="Select a product..." floating="true" />
<multicolumncombobox-columns>
<column field="ProductName" title="Name">
</column>
<column field="ProductID" title="ID">
</column>
</multicolumncombobox-columns>
<datasource>
<transport>
<read url="@Url.Action("ServerFiltering_GetProducts", "MultiColumnComboBox")" />
</transport>
</datasource>
</kendo-multicolumncombobox>
The following example demonstrates how to set the floating label from a function handler:
@(Html.Kendo().MultiColumnComboBox()
.Name("products")
.DataTextField("ProductName")
.DataValueField("ProductID")
.Label(label => {
label.ContentHandler("contentHandler");
label.Floating(true);
})
.Columns(columns =>
{
columns.Add().Field("ProductName").Title("Name");
columns.Add().Field("ProductID").Title("ID");
})
.HtmlAttributes(new { style = "width:100%;" })
.Filter(FilterType.Contains)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("ServerFiltering_GetProducts", "MultiColumnComboBox");
});
})
)
<script>
function contentHandler(){
return "Select a product...";
}
</script>
<kendo-multicolumncombobox name="products"
datatextfield="ProductName"
datavaluefield="ProductID"
filter="FilterType.Contains" style="width:100%;">
<label content-handler="contentHandler" floating="true" />
<multicolumncombobox-columns>
<column field="ProductName" title="Name">
</column>
<column field="ProductID" title="ID">
</column>
</multicolumncombobox-columns>
<datasource>
<transport>
<read url="@Url.Action("ServerFiltering_GetProducts", "MultiColumnComboBox")" />
</transport>
</datasource>
</kendo-multicolumncombobox>
<script>
function contentHandler(){
return "Select a product...";
}
</script>