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 ComboBox 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().ComboBox()
            .Name("products")
            .Placeholder("Select product")
            .DataTextField("ProductName")
            .DataValueField("ProductID")
            .Label(label => {
                label.Content("Find a product...");
                label.Floating(true);
            })
            .HtmlAttributes(new { style = "width:100%;" })
            .Filter(FilterType.Contains)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("FloatingLabel_GetProducts", "ComboBox");
                });
            })
        )
    <kendo-combobox name="products"
                    datatextfield="ProductName"
                    datavaluefield="ProductID"
                    filter="FilterType.Contains"
                    placeholder="Select product"
                    style="width:100%;">
        <label content="Find a product..." floating="true"/>
        <datasource>
            <transport>
                    <read url="@Url.Action("FloatingLabel_GetProducts", "ComboBox") cache="true" />
            </transport>
        </datasource>
    </kendo-combobox>

The following example demonstrates how to set the floating label from a function handler:

        @(Html.Kendo().ComboBox()
            .Name("products")
            .Placeholder("Select product")
            .DataTextField("ProductName")
            .DataValueField("ProductID")
            .Label(label => {
                label.ContentHandler("contentHandler");
                label.Floating(true);
            })
            .HtmlAttributes(new { style = "width:100%;" })
            .Filter(FilterType.Contains)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("FloatingLabel_GetProducts", "ComboBox");
                });
            })
        )

        <script>
            function contentHandler(){
                return "Find a product...";
            }
        </script>
    <kendo-combobox name="products"
                    datatextfield="ProductName"
                    datavaluefield="ProductID"
                    filter="FilterType.Contains"
                    placeholder="Select product"
                    style="width:100%;">
        <label content-handler="contentHandler" floating="true"/>
        <datasource>
            <transport>
                    <read url="@Url.Action("FloatingLabel_GetProducts", "ComboBox") cache="true" />
            </transport>
        </datasource>
    </kendo-combobox>

    <script>
        function contentHandler(){
             return "Find a product...";
        }
    </script>

See Also

In this article