RadMasked with Floating Label same as a RadWatermarkTextBox?

1 Answer 36 Views
MaskedInput (Numeric, DateTime, Text, Currency) WatermarkTextBox
Evangelista
Top achievements
Rank 1
Iron
Evangelista asked on 30 Oct 2023, 08:37 PM

Hi,

Would it be possible to have an editable RadMasked Part to mimic the RadWatermarkTextBox with floating Label?

1 Answer, 1 is accepted

Sort by
1
Accepted
Stenly
Telerik team
answered on 31 Oct 2023, 04:54 PM

Hello Evangelista,

Currently, the RadMaskedInput control does not provide out-of-the-box support for this requirement. However, you could still achieve the desired result, by writing some custom code. 

For example, you could subscribe to the Loaded event of the control, and using the ChildrenOfType extension method, retrieve the PreviewInputTextBox elements with x:Name="DisplayText" and x:Name="EditorSite". After that, you could include, for example, a TextBlock control inside the ScrollContentPresenter element (an instance of it is present inside each of the mentioned PreviewInputTextBox elements).

The following code snippet shows a sample implementation of this suggestion (in this case, I used a RadMaskedDateTimeInput):

private void RadMaskedDateTimeInput_Loaded(object sender, RoutedEventArgs e)
{
    var maskedInput = (RadMaskedDateTimeInput)sender;

    var displayTextPreviewTextBox = maskedInput.ChildrenOfType<PreviewInputTextBox>().FirstOrDefault(x => x.Name == "DisplayText");
    var editorSitePreviewTextBox = maskedInput.ChildrenOfType<PreviewInputTextBox>().FirstOrDefault(x => x.Name == "EditorSite");

    if (displayTextPreviewTextBox != null && editorSitePreviewTextBox != null)
    {
        this.SetTextBlock(displayTextPreviewTextBox);
        this.SetTextBlock(editorSitePreviewTextBox);
    }
}

public void SetTextBlock(PreviewInputTextBox previewInputTextBox)
{
    var contentHostScrollViewer = previewInputTextBox.ChildrenOfType<ScrollViewer>().FirstOrDefault(x => x.Name == "PART_ContentHost");

    if (contentHostScrollViewer != null)
    {
        var gridLayout = contentHostScrollViewer.ChildrenOfType<Grid>().FirstOrDefault();
        var textblock = new TextBlock() { Text = "Hi", FontSize = 10, Padding = new Thickness(5, 5, 5, 2) };
        Grid.SetRow(textblock, 0);

        for (int i = 0; i < gridLayout.Children.Count; i++)
        {
            var currentChild = gridLayout.Children[i];

            Grid.SetRow(currentChild, i + 1);
        }

        gridLayout.Children.Add(textblock);
    }
}

The produced result is as follows:

Alternatively, you can extract the default control template of the used RadMaskedInput control and introduce additional elements, in order to produce a result similar to the one in the RadWatermarkTextBox control.

I hope this information will be of help to you.

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Evangelista
Top achievements
Rank 1
Iron
commented on 01 Nov 2023, 10:35 AM

Very good. Thanks
Tags
MaskedInput (Numeric, DateTime, Text, Currency) WatermarkTextBox
Asked by
Evangelista
Top achievements
Rank 1
Iron
Answers by
Stenly
Telerik team
Share this question
or