Grouping Properties with [+] sign and "All"

[Roberta]

Hello!

I'm trying to insert into a RadPropertyGrid something like in the attached picture.

I'm using a store to populate the grid.

Now I have all the comboboxes which are correctly created (Left, top, Right, Bottom) with their extra button and so on.

The problem now is to group them up with an All property.

Could someone please point out documentation or an example on how to manage this feature? I wasn't able to find it...

Thank you very much!

[Hristo]

Hi Roberta,

Thank you for writing.

If you are using an enumeration to create the item and add it to the store you can consider having an additional member added to the enumeration: 

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        RadPropertyStore store = new RadPropertyStore();
        PropertyStoreItem enumItem0 = new PropertyStoreItem(typeof(TestEnum), "All", TestEnum.All, "Property containing TestEnum value", "Enum") ;
        store.Add(enumItem0);
        //...

        this.radPropertyGrid1.SelectedObject = store;
    }
}

public enum TestEnum
{
    All, Left, Top, Right, Bottom
}

If your scenario is different you can also check the following thread and the attached project there, demonstrating how a custom drop-down editor can be added to edit a list of strings: https://www.telerik.com/forums/radpropertygrid-custom-dropdown-editor-not-changing.

I hope this helps. Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik

[Roberta]

Thanks Hristo, but I'm still confused...

I express better my problem. My actual situation is as follow (code and screenshot)

As you can see I populate and edit all the single values.

What I need is to evolve my actual situation to the one shown in the screenshot of the original post.

I can't find a way to group different answers into a collapsable [+].

------
code:

01.public partial class Form1 : Form
02.    {
03.        private Dictionary<Guid, string> Materials;
04.
05.        public Form1()
06.        {
07.            InitializeComponent();
08.        }
09.
10.        private void Form1_Load(object sender, EventArgs e)
11.        {
12.            radPropertyGrid1.EditorRequired += RadPropertyGrid1OnEditorRequired;
13.
14.            // Material collection
15.            Materials = new Dictionary<Guid, string>();
16.            Materials.Add(Guid.Parse(@"970baebf-abbc-480c-af89-2e9c0dc0abe7"), @"Wood");
17.            Materials.Add(Guid.Parse(@"b46c5514-8077-4401-b44f-883cc471e548"), @"Stone");
18.            Materials.Add(Guid.Parse(@"d994af65-8185-4dbe-8784-37f52fc26fb6"), @"Iron");
19.            Materials.Add(Guid.Parse(@"df5c0f2f-b0eb-416e-b14b-0babc73dfc2b"), @"Silver");
20.            Materials.Add(Guid.Parse(@"c9a242fb-43b8-47a0-b482-f44dca24bc47"), @"Gold");
21.
22.            // Store
23.            RadPropertyStore store = new RadPropertyStore();
24.            store.Add(new PropertyStoreItem(typeof(string), @"All Materials", null, "Description", "Material", false));
25.            store.Add(new PropertyStoreItem(typeof(string), @"Material Top", null, "Description", "Material", false));
26.            store.Add(new PropertyStoreItem(typeof(string), @"Material Bottom", null, "Description", "Material", false));
27.            store.Add(new PropertyStoreItem(typeof(string), @"Material Left", null, "Description", "Material", false));
28.            store.Add(new PropertyStoreItem(typeof(string), @"Material Right", null, "Description", "Material", false));
29.
30.            radPropertyGrid1.SelectedObject = store;
31.        }
32.
33.        private void RadPropertyGrid1OnEditorRequired(object sender, PropertyGridEditorRequiredEventArgs e)
34.        {
35.            // Create the editor
36.            var editor = new PropertyGridDropDownListEditor();
37.            editor.DropDownStyle = RadDropDownStyle.DropDownList;
38.            var element = editor.EditorElement as BaseDropDownListEditorElement;
39.
40.            // Compile the values
41.            foreach (var material in Materials)
42.            {
43.                RadListDataItem dataItem = new RadListDataItem();
44.                dataItem.Text = material.Value;
45.                dataItem.Value = material.Key;
46.                element.Items.Add(dataItem);
47.            }
48.
49.            // Add the button
50.            var button = new RadButtonElement();
51.            button.Text = @"...";
52.            button.StretchHorizontally = false;
53.            element.Children[2].Children.Add(button);
54.
55.
56.            // Select the actual value by text (the guid part is lost outside of the editor)
57.            PropertyGridItem pgi = e.Item as PropertyGridItem;
58.            foreach (var item in element.Items)
59.            {
60.                if (item.Text.Equals(pgi.Value))
61.                {
62.                    item.Selected = true;
63.                    break;
64.                }
65.            }
66.            e.Editor = editor;
67.        }
68.    }

[Roberta]

"Before and after" 

[Hristo]

Hello Roberta,

Thank you for submitting your code snippet and the additional information. In order to achieve the desired result, you will need to create a complex object exposing the All, Left, Top, Right, and Bottom items as properties. Additionally, you will need to specify an ExpandableObjectConverter for the property store item. Please check my code snippet below: 

public partial class Form1 : Form
{
    private Dictionary<Guid, string> Materials;

    public Form1()
    {
        InitializeComponent();
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        this.radPropertyGrid1.EditorRequired += RadPropertyGrid1OnEditorRequired;
        this.radPropertyGrid1.ItemFormatting += radPropertyGrid1_ItemFormatting;

        // Material collection
        Materials = new Dictionary<Guid, string>();
        Materials.Add(Guid.Parse(@"970baebf-abbc-480c-af89-2e9c0dc0abe7"), @"Wood");
        Materials.Add(Guid.Parse(@"b46c5514-8077-4401-b44f-883cc471e548"), @"Stone");
        Materials.Add(Guid.Parse(@"d994af65-8185-4dbe-8784-37f52fc26fb6"), @"Iron");
        Materials.Add(Guid.Parse(@"df5c0f2f-b0eb-416e-b14b-0babc73dfc2b"), @"Silver");
        Materials.Add(Guid.Parse(@"c9a242fb-43b8-47a0-b482-f44dca24bc47"), @"Gold");

        // Store
        RadPropertyStore store = new RadPropertyStore();
        PropertyGridDataObject data = new PropertyGridDataObject();
        PropertyStoreItem item = new PropertyStoreItem(typeof(PropertyGridDataObject), @"All Materials", data, "Description", "Material", true);
        item.Attributes.Add(new TypeConverterAttribute(typeof(ExpandableObjectConverter)));
        store.Add(item);

        radPropertyGrid1.SelectedObject = store;
    }

    private void radPropertyGrid1_ItemFormatting(object sender, PropertyGridItemFormattingEventArgs e)
    {
        PropertyGridDataObject data = ((PropertyGridItem)e.Item).Value as PropertyGridDataObject;
        if (data != null)
        {
            ((PropertyGridItemElement)e.VisualElement).ValueElement.Text = data.All;
        }
    }

    private void RadPropertyGrid1OnEditorRequired(object sender, PropertyGridEditorRequiredEventArgs e)
    {
        // Create the editor
        var editor = new PropertyGridDropDownListEditor();
        editor.DropDownStyle = RadDropDownStyle.DropDownList;
        var element = editor.EditorElement as BaseDropDownListEditorElement;

        // Compile the values
        foreach (var material in Materials)
        {
            RadListDataItem dataItem = new RadListDataItem();
            dataItem.Text = material.Value;
            dataItem.Value = material.Key;
            element.Items.Add(dataItem);
        }

        // Add the button
        var button = new RadButtonElement();
        button.Text = @"...";
        button.StretchHorizontally = false;
        element.Children[2].Children.Add(button);


        // Select the actual value by text (the guid part is lost outside of the editor)
        PropertyGridItem pgi = e.Item as PropertyGridItem;
        foreach (var item in element.Items)
        {
            if (item.Text.Equals(pgi.Value))
            {
                item.Selected = true;
                break;
            }
        }
        e.Editor = editor;
    }
}

public class PropertyGridDataObject
{
    public string All { get; set; }

    public string Left { get; set; }

    public string Top { get; set; }

    public string Right { get; set; }

    public string Bottom { get; set; }
}

It is also possible to implement your own type converter if you need to perform modifications of the data objects other than setting the exposed properties. Please check the following documentation article: https://docs.telerik.com/devtools/winforms/propertygrid/type-converters#display-nested-properties-with-expandableobjectconverter. I am also attaching a short video demonstrating the result on my end.

I hope this helps. Let me know if you need further assistance.

Regards,
Hristo
Progress Telerik