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>