RadPropertyGrid: Creating a single visual property from a combination of 3 propertis (name, type and value)

13 posts, 0 answers
  1. Maor
    Maor avatar
    6 posts
    Member since:
    Dec 2012

    Posted 26 Mar 2014 Link to this post

    Hi,

    I've created a demo project that will demonstrate my current situation and my goal.

    The code and XAML are attached below.

    As you could see in the picture marked as "Desired display" and in propertyGrid2 in the code I had to create a mockup classes that will display the properties.

    My goal is to get the "Desired display" look by using only the "MainObject" and "PropertiesObject".

    The main issues I have are:
    1. I need to translate the 3 properties from "PropertiesObject": "PropertyName", "PropertyType" and "PropertyValue" into a single property (without generating a new class on run time).
    2. I need to make the observable collection nested properties display the list of "PropertiesObject" (after my conversion to a single property) without the extra nested properties (like Count).
    3. I don't want to use or display the "CollectionEditor".

    The amount and variety of the properties in the "OtherProperties" observable collection are unknown during compile-time and change during run-time from another source.

    I do not require the ability to edit the properties so they can all be read-only.

    Do you have any hints on how I can accomplish my goal?

    This is the code I'm using:
    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
     
    namespace TelerikPropertyGrid
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                PropertiesObject property1 = new PropertiesObject() { PropertyName = "stringProperty1", PropertyType = typeof(string), PropertyValue="string 1" };
                PropertiesObject property2 = new PropertiesObject() { PropertyName = "stringProperty2", PropertyType = typeof(string), PropertyValue = "string 2" };
                PropertiesObject property3 = new PropertiesObject() { PropertyName = "boolProperty1", PropertyType = typeof(bool), PropertyValue= (Boolean)true };
                PropertiesObject property4 = new PropertiesObject() { PropertyName = "boolProperty2", PropertyType = typeof(bool), PropertyValue = (Boolean)false };
                PropertiesObject property5 = new PropertiesObject() { PropertyName = "intProperty1", PropertyType = typeof(int), PropertyValue=(Int32)10 };
                ObservableCollection<PropertiesObject> properties = new ObservableCollection<PropertiesObject>() { property1, property2, property3, property4, property5 };
                MainObject main = new MainObject() { Name = "john", Age = 25, OtherProperties = properties };
     
                //this is the property grid I have and want to modify using only MainObject and PropertiesObject classes
                PropertyGrid1.Item = main;
                PropertyGrid1.Visibility = System.Windows.Visibility.Visible;
     
                //this proeprty grid demonstrates how I want my grid to look like.
                //I created the "goal*" classes in order to populate it, I don't have those in the production system
                PropertyGrid2.Item = new GoalDisplayObject();
                PropertyGrid2.Visibility = System.Windows.Visibility.Hidden;
            }
        }
     
        public class MainObject //exist in production
        {
            public string Name { get; set; }
            public int Age { get; set; }
            public ObservableCollection<PropertiesObject> OtherProperties { get; set; }
        }
     
        public class PropertiesObject //exist in production
        {
            public string PropertyName { get; set; }
            public Type PropertyType { get; set; }
            public object PropertyValue { get; set; }
        }
     
        public class GoalDisplayObject  //doesn't exist in production
        {
            public string Name { get { return "john"; } set { } }
            public int Age { get { return 25; } set { } }
            public GoalNestedProperties OtherProperties { get { return new GoalNestedProperties(); } set { } }
             
        }
        public class GoalNestedProperties  //doesn't exist in production
        {
            public bool boolProperty1 { get { return true; } set { } }
            public bool boolProperty2 { get { return false; } set { } }
            public string stringProperty1 { get { return "string 1"; } set { } }
            public string stringProperty2 { get { return "string 2"; } set { } }
            public int intProperty1 { get { return 10; } set { } }
            public override string ToString() { return ""; }
        }
    }

    And this is the XAML:
    <Window x:Class="TelerikPropertyGrid.MainWindow"
        xmlns:local="clr-namespace:TelerikPropertyGrid"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadPropertyGrid x:Name="PropertyGrid1" Grid.Row="0" NestedPropertiesVisibility="Visible" SortAndGroupButtonsVisibility="Collapsed" SearchBoxVisibility="Collapsed" FieldIndicatorVisibility="Collapsed" DescriptionPanelVisibility="Collapsed"/>
            <telerik:RadPropertyGrid x:Name="PropertyGrid2" Grid.Row="0" AutoGeneratePropertyDefinitions="False" NestedPropertiesVisibility="Visible" SortAndGroupButtonsVisibility="Collapsed" SearchBoxVisibility="Collapsed" FieldIndicatorVisibility="Collapsed" DescriptionPanelVisibility="Collapsed">
                <telerik:RadPropertyGrid.PropertyDefinitions>
                    <telerik:PropertyDefinition Binding="{Binding Name}" DisplayName="Name"/>
                    <telerik:PropertyDefinition Binding="{Binding Age}" DisplayName="Age"/>
                    <telerik:PropertyDefinition Binding="{Binding OtherProperties}" DisplayName="Other Properties" IsExpanded="True">
                        <telerik:PropertyDefinition.NestedProperties>
                            <telerik:PropertyDefinition Binding="{Binding boolProperty1}" DisplayName="boolProperty1"/>
                            <telerik:PropertyDefinition Binding="{Binding boolProperty2}" DisplayName="boolProperty2"/>
                            <telerik:PropertyDefinition Binding="{Binding stringProperty1}" DisplayName="stringProperty1"/>
                            <telerik:PropertyDefinition Binding="{Binding stringProperty2}" DisplayName="stringProperty2"/>
                            <telerik:PropertyDefinition Binding="{Binding intProperty1}" DisplayName="intProperty1"/>
                        </telerik:PropertyDefinition.NestedProperties>
                    </telerik:PropertyDefinition>
                </telerik:RadPropertyGrid.PropertyDefinitions>
            </telerik:RadPropertyGrid>
        </Grid>
    </Window>

    Thanks in advance,
  2. Maor
    Maor avatar
    6 posts
    Member since:
    Dec 2012

    Posted 31 Mar 2014 in reply to Maor Link to this post

    Any comment on how this can be done will be greatly appreciated.

    If it can't be done please let me know that as well.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Vera
    Admin
    Vera avatar
    263 posts

    Posted 31 Mar 2014 Link to this post

    Hello Maor,

    I would suggest you to check RadPropertyGrid UnboundMode help article for a reference.

    Regards,
    Vera
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  5. Maor
    Maor avatar
    6 posts
    Member since:
    Dec 2012

    Posted 31 Mar 2014 in reply to Vera Link to this post

    Hi Vera,

    My main issue is #1 I need to display an object that has 3 properties like a single property without knowing how it looks like during the compilation-phase.

    I have an object with:
    public string PropertyName { get; set; }
    public object PropertyValue { get; set; }
    public Type PropertyType { get; set; }

    PropertyName is the name of the so-called "property" I want the grid to show (AKA the display name).
    PropertyValue is the value the property grid should display.
    PropertyType is the type of the property and should determine which control the property grid should use (like combo box for enum, date time picker for DateTime etc).

    I need the grid to display that object just like it would've displayed an object with only 1 property:
    public PropertyType PropertyName { get; set; } //the value is PropertyValue

    Please keep in mind that I have a collection of those object with an unknown size.
    I'm not sure how I can define a dynamic number of properties in the XAML (the number changes during run-time multiple times).

    From what I understand the Unbound mode (which I reviewed before posting the original question) requires me to know which nested properties I have while I'm coding and doesn't offer the ability to change it during run-time.
  6. Maor
    Maor avatar
    6 posts
    Member since:
    Dec 2012

    Posted 02 Apr 2014 in reply to Maor Link to this post

    Any comment on that?

    How can I display a list of the objects I described in my post above as a list of properties?

    Is this possible using your product?
  7. Vera
    Admin
    Vera avatar
    263 posts

    Posted 03 Apr 2014 Link to this post

    Hello Maor,

    Generally, you can use DataTemplateSelector for this purpose but this is not recommended since RadPropertyGrid determines the editor for each PropertyDefinition based on the type of the respective bound property.


    Regards,
    Vera
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Nir
    Nir avatar
    4 posts
    Member since:
    Apr 2014

    Posted 03 Apr 2014 in reply to Vera Link to this post

    Hi Vera,

    Thank you for your reply.

    After going through the DataTemplateSelector documentation and the demo once more we still don't see how our goal can be accomplished by it.

    When I use the DataTemplateSelector it works on a single property.

    Our goal is to transform 3 properties into a single property.

    We don't want to change the visual aspect of the RadPropertyGrid and we're happy with how it looks.

    We just need a way to tell the RadPropertyGrid to treat those 3 properties as a building block for a single property where one of our properties is the name, another is the type and the 3rd is the value of the new property we want to display.

    After we will be able to transform the 3 properties into a single property we'll need to transform an ObservableCollection of objects which contain those 3 properties into a list of single properties.

    If this gets too complicated for the forum we can move this discussion to a support ticket instead (our company has paid for support for "UI for WPF").

    Thanks in advance,
    Nir Moshe
  9. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 08 Apr 2014 Link to this post

    Hello Nir,

    As it turns out there is not an easy way to accomplish your exact requirement.

    I would suggest you to consider using RadPropertyGrid based on how it is designed to work as explained with our documentation and examples on different use cases.

    We apologize for the inconvenience.

    Regards,
    Didie
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Nir
    Nir avatar
    4 posts
    Member since:
    Apr 2014

    Posted 09 Apr 2014 in reply to Dimitrina Link to this post

    Thank you for your reply.
  11. De
    De avatar
    16 posts
    Member since:
    Aug 2011

    Posted 02 May 2014 Link to this post

    Just an idea.  One can always create a transient/proxy class that wraps around those the properties that want to be wrapped.  Then expose the transient/proxy as a property so the RadPropertyGrid can bind to.  Any properties that don't want to be shown on UI can be decorated using [Browsable(false)].
  12. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 05 May 2014 Link to this post

    Hello,

    This is indeed correct. When using the Browsable attribute and having it set to false, this would make RadPropertyGrid skip the respective property. 

    Regards,
    Didie
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  13. Nir
    Nir avatar
    4 posts
    Member since:
    Apr 2014

    Posted 12 May 2014 in reply to Dimitrina Link to this post

    Hi Didie,

    Can you elaborate a bit on that topic (an example will be great) please?

    If it'll be more convenient than we can communicate through support ticket ID:814112.

    Thanks,
    Nir
  14. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 13 May 2014 Link to this post

    Hello Nir,

    You can expose a new property instead of the existing three. This is not directly related to RadPropertyGrid but to your data representation.
    As to using the [Browsable(false)] attribute, please check the "DataAnnotations Support" WPF Demo. Using this specific attribute is not demonstrated, however, the approach would be similar.

    Regards,
    Didie
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
UI for WPF is Visual Studio 2017 Ready