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 DropDownTree 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().DropDownTree()
        .Name("dropdowntree")
        .DataTextField("Name")
        .Label(label =>
        {
            label.Content("Select an employee...");
            label.Floating(true);
        })
        .HtmlAttributes(new { style = "width: 100%" })
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("Remote_Data_Binding_Get_Employees", "DropDownTree")
            )
        )
    )
    <kendo-dropdowntree name="dropdowntree" datatextfield="Name" style="width: 100%">
        <label content="Select an employee..." floating="true" />
        <hierarchical-datasource>
            <schema>
                <hierarchical-model id="id"></hierarchical-model>
            </schema>
            <transport>
                <read url="@Url.Action("Remote_Data_Binding_Get_Employees", "DropDownTree")" />
            </transport>
        </hierarchical-datasource>
    </kendo-dropdowntree>

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

    @(Html.Kendo().DropDownTree()
        .Name("dropdowntree")
        .DataTextField("Name")
        .Label(label =>
        {
            label.ContentHandler("contentHandler");
            label.Floating(true);
        })
        .HtmlAttributes(new { style = "width: 100%" })
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("Remote_Data_Binding_Get_Employees", "DropDownTree")
            )
        )
    )

    <script>
        function contentHandler(){
            return "Select an employee...";
        }
    </script>
    <kendo-dropdowntree name="dropdowntree" datatextfield="Name" style="width: 100%">
        <label content-handler="contentHandler" floating="true" />
        <hierarchical-datasource>
            <schema>
                <hierarchical-model id="id"></hierarchical-model>
            </schema>
            <transport>
                <read url="@Url.Action("Remote_Data_Binding_Get_Employees", "DropDownTree")" />
            </transport>
        </hierarchical-datasource>
    </kendo-dropdowntree>

    <script>
        function contentHandler(){
            return "Select an employee...";
        }
    </script>

See Also

In this article