RadPropertyGrid - Custom Editor with RadPopupEditor

[Zaven Alexander]

I'm trying to extend the default capabilities of Telerik's PropertyGrid with some custom editors. However, I'm a little perplexed as to how to get the RadPopupEditor to work.

Looking at the Telerik Theme Viewer tool, there is a rough example of what I'm trying to achieve with the TextAlignment setting (Although I intend to fill the PopupContainer with other components).

Has anyone managed to replicate this and can point me in the right direction?

Thanks!

 

[Dess | Tech Support Engineer, Principal]

Hi, Zaven,

RadPropertyGrid allows you to replace the default editor with a custom one. A sample approach is demonstrated here:

https://docs.telerik.com/devtools/winforms/controls/propertygrid/editors/using-custom-editor 

As to the question about using a RadPopupEditor (hosting a control) as an editor, the following KB article is quite useful:

https://docs.telerik.com/devtools/winforms/knowledge-base/use-popup-editor-as-gridview-editor 

Even though it shows how to use it as an editor in RadGridView, not RadPropertyGrid, the approach is pretty much similar. I have prepared a sample code snippet for your reference: 

        public RadForm1()
        {
            InitializeComponent();

            this.radPropertyGrid1.ToolbarVisible = true;
            this.radPropertyGrid1.SelectedObject = this;
            this.radPropertyGrid1.EditorRequired += radPropertyGrid1_EditorRequired;
        }

        private void radPropertyGrid1_EditorRequired(object sender, PropertyGridEditorRequiredEventArgs e)
        {
            if (e.Item.Label == "Text")
            {
                e.EditorType = typeof(MyEditor);
 
                MyEditor editor = new MyEditor();
                DataTable dt = new DataTable();
                dt.Columns.Add("id", typeof(int));
                dt.Columns.Add("name", typeof(string));
                dt.Rows.Add(1, "Monday");
                dt.Rows.Add(2, "Wednesday");
                dt.Rows.Add(3, "Friday");
                editor.DataSource = dt;
                editor.DisplayMember = "name";
              
                e.Editor = editor; 
            }
        }

        public class MyEditor : BaseGridEditor
        {
            public string DisplayMember { get; set; }
            
            public object DataSource
            {
                get
                {
                    {
                        return this.grid.DataSource;
                    }
                }
                set
                {
                    this.grid.DataSource = value;
                }
            }

            public override void BeginEdit()
            {
                base.BeginEdit();
                this.popupEditor.TextBoxElement.TextBoxItem.TextBoxControl.Focus();
            }

            public override object Value
            {
                get
                {
                    if (grid.CurrentRow != null)
                    {
                        return this.grid.CurrentRow.Cells[this.DisplayMember].Value;
                    }
                    return null;
                }
                set
                {
                    if (value != null)
                    {
                        foreach (GridViewRowInfo row in grid.Rows)
                        {
                            if (row.Cells[this.DisplayMember].Value == value)
                            {
                                grid.CurrentRow = row;
                                break;
                            }
                        }
                    }
                }
            }

            RadGridView grid = new RadGridView();
            RadPopupEditor popupEditor = new RadPopupEditor();
            RadPopupContainer container = new RadPopupContainer();

            protected override RadElement CreateEditorElement()
            {
                popupEditor.AssociatedControl = container;
                popupEditor.DropDownStyle = RadDropDownStyle.DropDown;
                container.Controls.Add(grid);
                grid.Dock = DockStyle.Fill;
                grid.EnableFiltering = true;
                grid.ShowFilteringRow = false;
                grid.ReadOnly = true;
                grid.EnableCustomFiltering = true;
                grid.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
                grid.CustomFiltering += grid_CustomFiltering;
                this.popupEditor.TextBoxElement.TextChanged += popupEditor_TextChanged;

                RadHostItem item = new RadHostItem(popupEditor);
                return item;
            }

            private void popupEditor_TextChanged(object sender, EventArgs e)
            {
                grid.MasterTemplate.Refresh();
                popupEditor.PopupEditorElement.ShowPopup();
                this.popupEditor.PopupEditorElement.TextBoxElement.TextBoxItem.TextBoxControl.Focus();
            }

            private void grid_CustomFiltering(object sender, GridViewCustomFilteringEventArgs e)
            {
                string searchText = popupEditor.Text;
                if (searchText != null && searchText != string.Empty)
                {
                    DataRowView rowView = e.Row.DataBoundItem as DataRowView;
                    e.Handled = true;
                    e.Visible = rowView.Row[this.DisplayMember].ToString().Contains(searchText);
                }
                else
                {
                    e.Handled = false;
                }
            }
        }

Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify and further extend it in a way which suits your requirements best.

Regards,
Dess | Tech Support Engineer, Principal
Progress Telerik