MaskedEditBox button

[Jeff]

Hello Telerik Team !

I currently try to achieve something similar to the attached picture.

Maybe I took the wrong direction, by using a MaskedEditBox with a DateTime MaskType, I am trying to add an adjacent button picture to open a calendar, and also a drop down button with several standard choice.

By editing UI Elements I notice the presence of a StackLayoutPanel with LightVisualButtonElement, I put both Visibility to Visible and add a little calendar icon image.

I can see It on Visual Studio, but the icon does not appear when I launch the program, and also I don't have any idea what kind of event I need to add if I succeed in showing the icon to open a calendar control to select my date.

So maybe I took a wrong direction by using this controls ?

Any help or suggestion would be highly welcome

 

Thanks in adavnce

 

Jeff

[Hristo]

Hi Jeff,

Adding inner elements using the Edit UI Elements dialog in the designer of Visual Studio is not recommended as they might not be persisted in the serialized designer file. As I understand you would like to create a custom RadMaskedEditBox is a couple of buttons added to it. Please check the following KB article demonstrating how the RadTextBox can be extended in a similar way. You can follow the same approach with the masked edit box: https://www.telerik.com/support/kb/winforms/details/search-box. 

I hope this helps. Let me know if you have other questions.

Regards,
Hristo
Progress Telerik

[Jeff]

Hi Hristo,

thanks for your time and for the solution direction. I am currently trying toi build a Control following your example,using the RadMaskedEditBox, RadMaskedEditBox contain a RadTextBox but I cannot find equivalent function :  InitializeTextElement() in any children of the RadMaskedEditBox.

Would you be kind to detail an exemple using RadMaskedEditBox ?

That would help me tremendously.

Jeff

 

 

[Hristo]

Hello Jeff,

The main element of the RadMaskedEditBox is initialized in the CreateElement method of the control. The logic for adding the custom elements can be moved there. Please check my code snippet below: 

public class CustomMaskedEditBox : RadMaskedEditBox
{
    public override string ThemeClassName
    {
        get
        {
            return typeof(RadMaskedEditBox).FullName;
        }
    }
    protected override void OnLoad(Size desiredSize)
    {
        base.OnLoad(desiredSize);
        searchButton.ButtonFillElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        searchButton.ShowBorder = false;
    }
    RadButtonElement searchButton = new RadButtonElement();
    protected override RadMaskedEditBoxElement CreateElement()
    {
        RadMaskedEditBoxElement baseElement = base.CreateElement();

        baseElement.TextBoxItem.NullText = "Custom Mask";
        searchButton.Click += new EventHandler(button_Click);
        searchButton.Margin = new Padding(0, 0, 0, 0);
        searchButton.Text = "Btn";
        StackLayoutElement stackPanel = new StackLayoutElement();
        stackPanel.Orientation = Orientation.Horizontal;
        stackPanel.Margin = new Padding(1, 0, 1, 0);
        stackPanel.Children.Add(searchButton);
        RadTextBoxItem tbItem = baseElement.TextBoxItem;
        baseElement.Children.Remove(tbItem);
        DockLayoutPanel dockPanel = new DockLayoutPanel();
        dockPanel.Children.Add(stackPanel);
        dockPanel.Children.Add(tbItem);
        DockLayoutPanel.SetDock(tbItem, Telerik.WinControls.Layouts.Dock.Left);
        DockLayoutPanel.SetDock(stackPanel, Telerik.WinControls.Layouts.Dock.Right);
        baseElement.Children.Add(dockPanel);

        return baseElement;
    }
    public class SearchBoxEventArgs : EventArgs
    {
        private string searchText;
        public string SearchText
        {
            get
            {
                return searchText;
            }
            set
            {
                searchText = value;
            }
        }
    }
    public event EventHandler<SearchBoxEventArgs> Search;
    private void button_Click(object sender, EventArgs e)
    {
        SearchBoxEventArgs newEvent = new SearchBoxEventArgs();
        newEvent.SearchText = this.Text;
        SearchEventRaiser(newEvent);
    }
    private void SearchEventRaiser(SearchBoxEventArgs e)
    {
        if (Search != null)
            Search(this, e);
    }
}

Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Progress Telerik

[Jeff]

Million of thanks !

:)