Label Overview
The Label enables you to associate the label HTML element with the MaskedTextBox.
Basic Usage
To associate a MaskedTextBox with a Label, set the content property of the label.
Initializing the Label for MaskedTextBox
The Label exposes a content property that sets the inner HTML of the label.
The below example shows how to create a Label from a string.
@(Html.Kendo().MaskedTextBox()
.Name("MaskedTextBox")
.Label(l => l.Content("Phone number"))
)
<kendo-maskedtextbox name="PhoneNumber">
<maskedtextbox-label content="Phone Number" />
</kendo-maskedtextbox>
The below example shows 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().MaskedTextBox()
.Name("MaskedTextBox")
.Label(l => l.ContentHandler("labelContentHandler"))
)
<script>
function labelContentHandler() {
return "Phone number"
}
</script>
<kendo-maskedtextbox name="PhoneNumber">
<maskedtextbox-label content-handler="labelContentHandler" />
</kendo-maskedtextbox>
<script>
function labelContentHandler() {
return "Phone Number"
}
</script>
Floating Label
The Floating Label enables you to provide a floating label functionality to the MaskedTextBox.
The following example demonstrates how to set a Floating Label for a MaskedTextBox.
@(Html.Kendo().MaskedTextBox()
.Name("MaskedTextBox")
.Label(label =>
{
label.Content("Phone number");
label.Floating(true);
})
)
<kendo-maskedtextbox name="PhoneNumber">
<maskedtextbox-label content="Phone Number" floating="true" />
</kendo-maskedtextbox
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:$("#maskedtextbox").data("kendoMaskedTextBox").floatingLabel.refresh();