New to Telerik UI for ASP.NET MVC? 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 DropDownList for ASP.NET MVC, 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().DropDownList()
        .Name("products")
        .HtmlAttributes(new {style = "width:300px"})
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .AutoBind(false)
        .Label(label =>
        {
            label.Content("Find a product...");
            label.Floating(true);
        })
        .Filter(FilterType.Contains)
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("RemoteDataSource_GetProducts", "DropDownList");
            });
        })
    )

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

    @(Html.Kendo().DropDownList()
        .Name("products")
        .HtmlAttributes(new {style = "width:300px"})
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .AutoBind(false)
        .Label(label =>
        {
            label.ContentHandler("contentHandler");
            label.Floating(true);
        })
        .Filter(FilterType.Contains)
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("RemoteDataSource_GetProducts", "DropDownList");
            });
        })
    )

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

See Also

In this article