WpfRadPropertyGrid binding

4 posts, 0 answers
  1. Ivan
    Ivan avatar
    5 posts
    Member since:
    Jun 2013

    Posted 14 Mar 2014 Link to this post


    I have a RadDiagram and RadPropertyGrid on a WPF form. I have the property grid defined as follows:

    <telerik:RadPropertyGrid DockPanel.Dock="Right" LabelColumnWidth="100" HorizontalAlignment="Right" Width="250" 
                                     AutoGeneratePropertyDefinitions="True" PropertySetMode="Intersection"
                                     Item="{Binding ElementName=Diagram, Path=SelectedItems, UpdateSourceTrigger=PropertyChanged}">

    The diagram's GraphSource property is bound to a view model of type "ObservableGraphSourceBase<ZoneDiagramItemViewModel, LinkViewModelBase<NodeViewModelBase>>".

    The binding works in the sense that the property grid shows the selected item in the diagram with its original properties as they were in when the item was created. Whenever the item in the diagram is moved for example, the property grid is not updated. Neither does the item in the grid move after the respective property in the property grid is modified.

    The ZoneDiagramItemViewModel initially inherited the NodeViewModelBase class. I then tried by re-implementing it using my own Height, Width, Position etc. properties that all fired the NotifyPropertychanged event. This did not work either.

    How do I set up the binding so that properties are updated in both directions?

    Thank you.

  2. Zarko
    Zarko avatar
    755 posts

    Posted 17 Mar 2014 Link to this post

    Hello Ivan,
    There are two ways to fix this problem:
    - you could bind the RadPropertyGrid directly to the SelectedItem not the SelectedItems collection
    <telerik:RadPropertyGrid Width="250"
                      Item="{Binding ElementName=diagram,
            <telerik:PropertyDefinition Binding="{Binding Position, Mode=TwoWay}" DisplayName="Position">
                        <TextBox Text="{Binding Position, Mode=TwoWay}" />
    - you'll have to use EditorTemplate with converter:
    private void OnAutoGeneratingPropertyDefinition(object sender, AutoGeneratingPropertyDefinitionEventArgs e)
        if (e.PropertyDefinition.DisplayName == "Position")
            e.PropertyDefinition.EditorTemplate = this.Resources["positionTemplate"] as DataTemplate;
        else if (e.PropertyDefinition.DisplayName == "Content")
            e.PropertyDefinition.EditorTemplate = this.Resources["myContentTemplate"] as DataTemplate;
    <local:PointToStringConv x:Key="converter" />
    <DataTemplate x:Key="myContentTemplate">
        <TextBox Text="{Binding Path=CurrentPropertySet[Content], Mode=TwoWay}" />
    <DataTemplate x:Key="positionTemplate">
        <TextBox Text="{Binding Path=CurrentPropertySet[Position], Mode=TwoWay, Converter={StaticResource converter}}" />
    Note: Unfortunately this way the position again won't be dynamically updated when you drag a shape.
    I've attached a sample project demonstrating this so could you please examine it and if you have more questions feel free to ask.


    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

  3. Ivan
    Ivan avatar
    5 posts
    Member since:
    Jun 2013

    Posted 18 Mar 2014 in reply to Zarko Link to this post

    Hi Zarko,

    Thank you for the reply.

    I have looked at the solutions you offered but neither provides the complete solution I am after (that I can see). I am not sure if the requirement of the real time updating of the property values complicates matters. If it does I will drop that requirement.

    What is important to me though are the following:

    1. I should be able to edit multiple selected shapes' properties through the property grid.
    2. When a shape(s) properties are modified e.g. position on the diagram, the property grid should update - if not real time then after the modification has completed. This does not happen with the second option you provided - I have to un-select and re-select the shape to have the property grid updated.
    3. Position's X and Y coordinates should be represented separately in the property grid.
    4. The behavior/function of the PropertySetMode="Intersection" on the property grid should be maintained.

    I want to achieve the same functionality/interaction as Visual Studio's Xaml designer and the property editor.

    If I can't achieve it through direct binding with the diagram's SelectedItems collection, I can do it manually by keeping my own list of selected items and syncing it via the diagram's SelectionChanged event. I have in fact tried this, but once a shape has been created its properties don't update - even if they are modified via the diagram. I can move the shapes around but their properties don't change.


  4. Maya
    Maya avatar
    4062 posts

    Posted 19 Mar 2014 Link to this post

    Hello Ivan,

    Generally, you can bind RadPropertyGrid to multiple items and edit the values displayed in it - as it is in the example you attached, you can modify the Width property for example and both shapes will be updated. However, displaying separate property definitions of each item - as in your case X and Y coordinates  - is not possible since it contradicts to the idea of PropertySets.
    Nevertheless, in order to maintain a consistent conversation, I would recommend you to open a new ticket for RadPropertyGrid and ask the questions in its related forum. 


    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

Back to Top