MaskedEditBox button

5 posts, 1 answers
  1. Jeff
    Jeff avatar
    12 posts
    Member since:
    Oct 2016

    Posted 17 Sep 2018 Link to this post

    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

  2. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 18 Sep 2018 Link to this post

    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.
  3. Jeff
    Jeff avatar
    12 posts
    Member since:
    Oct 2016

    Posted 18 Sep 2018 in reply to Hristo Link to this post

    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

     

     

  4. Answer
    Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 18 Sep 2018 Link to this post

    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.
  5. Jeff
    Jeff avatar
    12 posts
    Member since:
    Oct 2016

    Posted 18 Sep 2018 in reply to Hristo Link to this post

    Million of thanks !

    :)

Back to Top