New to Telerik UI for ASP.NET Core? Download free 30-day trial

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>

See Also

In this article