Grouping Properties with [+] sign and "All"

5 posts, 0 answers
  1. Roberta
    Roberta avatar
    7 posts
    Member since:
    Dec 2017

    Posted 09 Feb 2018 Link to this post

    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!

  2.
  3. Hristo
    Admin
    Hristo avatar
    1517 posts

    Posted 09 Feb 2018 Link to this post

    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
    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.
  5. Roberta
    Roberta avatar
    7 posts
    Member since:
    Dec 2017

    Posted 09 Feb 2018 in reply to Hristo Link to this post

    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.    }
  7. Roberta
    Roberta avatar
    7 posts
    Member since:
    Dec 2017

    Posted 09 Feb 2018 in reply to Roberta Link to this post

    "Before and after" 
  8.
  9. Hristo
    Admin
    Hristo avatar
    1517 posts

    Posted 14 Feb 2018 Link to this post

    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
    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