This is a migrated thread and some comments may be shown as answers.

MaskedEditBox button

4 Answers 157 Views
Calendar, DateTimePicker, TimePicker and Clock
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 17 Sep 2018, 08:56 AM

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

4 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 18 Sep 2018, 08:20 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jeff
Top achievements
Rank 1
answered on 18 Sep 2018, 10:22 AM

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

 

 

0
Accepted
Hristo
Telerik team
answered on 18 Sep 2018, 12:55 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jeff
Top achievements
Rank 1
answered on 18 Sep 2018, 02:18 PM

Million of thanks !

:)

Tags
Calendar, DateTimePicker, TimePicker and Clock
Asked by
Jeff
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Jeff
Top achievements
Rank 1
Share this question
or