Label Overview
The Label enables you to associate the label HTML element with the NumericTextBox.
Basic Usage
To associate a NumericTextBox with a Label, set the content property of the label.
Initializing the Label for NumericTextBox
The Label exposes a content property that sets the inner HTML of the label.
The below example demonstrates how to create a Label from a string.
@(Html.Kendo().NumericTextBox()
.Name("NumericTextBox")
.Label(l => l.Content("Price"))
)
<kendo-numerictextbox name="Price">
<numerictextbox-label content="Price" />
</kendo-numerictextbox>
The below example demonstrates how to create a Label from a function. The function context (available via the this keyword) will be set to the widget instance.
@(Html.Kendo().NumericTextBox()
.Name("NumericTextBox")
.Label(l => l.ContentHandler("labelContentHandler"))
)
<script>
function labelContentHandler() {
return "Price"
}
</script>
<kendo-numerictextbox name="Price">
<numerictextbox-label content-handler="labelContentHandler" />
</kendo-numerictextbox>
<script>
function labelContentHandler() {
return "Price"
}
</script>
Floating Label
The Floating Label enables you to provide a floating label functionality to the NumericTextBox.
The following example demonstrates how to set a Floating Label for a NumericTextBox.
@(Html.Kendo().NumericTextBox()
.Name("NumericTextBox")
.Label(label =>
{
label.Content("Price");
label.Floating(true);
})
)
<kendo-numerictextbox name="Price">
<numerictextbox-label content="Price" floating="true" />
</kendo-numerictextbox
If set to true, the component will be wrapped in a container that will allow the floating label functionality.
Important: The value client-side method does not trigger the
focusoutevent of the input. This could affect the floating label functionality. You can overcome this behavior by manually invoking therefreshmethod of the Floating Label:$("#numerictextbox").data("kendoNumericTextBox").floatingLabel.refresh();