MaskedTextBoxEditor

2 posts, 0 answers
  1. MaiK
    MaiK avatar
    23 posts
    Member since:
    Mar 2018

    Posted 16 May 2018 Link to this post

    Hi,

    Do you have an TextBoxEditor with masked input in RadPropertyGrid? Is there an example for do it?

     

    Thank you!

  2.
  3. Dimitar
    Admin
    Dimitar avatar
    2907 posts

    Posted 17 May 2018 Link to this post

    Hello Mikel,

    We do not provide such editor out of the box, but you can create one. Here is the code:
    class PropertyGridMaskedEditBoxEditor : BaseInputEditor
    {
        public override object Value
        {
            get
            {
                var element = ((RadMaskedEditBoxElement)this.EditorElement);
                return element.Value;
     
            }
            set
            {
                var element = ((RadMaskedEditBoxElement)this.EditorElement);
                element.Value = value;
            }
        }
     
        public override void BeginEdit()
        {
            base.BeginEdit();
            this.EditorElement.Focus();
            ((RadMaskedEditBoxElement)this.EditorElement).ValueChanged += new EventHandler(TrackBarEditor_ValueChanged);
        }
        void TrackBarEditor_ValueChanged(object sender, EventArgs e)
        {
            this.OnValueChanged();
        }
        public override bool EndEdit()
        {
            ((RadMaskedEditBoxElement)this.EditorElement).ValueChanged -= TrackBarEditor_ValueChanged;
            return base.EndEdit();
        }
        protected override RadElement CreateEditorElement()
        {
            return new RadMaskedEditBoxElement() { MaskType = MaskType.None };
        }
        public override Type DataType
        {
            get { return typeof(string); }
        }
    }

    To use the editor you need to handle the EditorRequired and EditorInitialized events:
    private void RadPropertyGrid1_EditorInitialized(object sender, PropertyGridItemEditorInitializedEventArgs e)
    {
        var editor = e.Editor as PropertyGridMaskedEditBoxEditor;
        if (editor != null && e.Item.Name == "Phone")
        {
            var element = editor.EditorElement as RadMaskedEditBoxElement;
            element.MaskType = MaskType.Standard;
            element.Mask = "(000) 000-000";
     
        }
    }
     
    private void RadPropertyGrid1_EditorRequired(object sender, Telerik.WinControls.UI.PropertyGridEditorRequiredEventArgs e)
    {
        if (e.EditorType == typeof(PropertyGridTextBoxEditor))
        {
            e.EditorType = typeof(PropertyGridMaskedEditBoxEditor);
        }
    }

    Detailed inforation about creating custom editor is available here: Using custom editor.

    I hope this will be useful. Let me know if you have additional questions.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top