Displaying Multiple Properties in a Single Cell

  • 4 min to read

In certain scenarios, you may need to display multiple properties of a bound object in the same property grid cell. You can accomplish this by overriding the content template of a property definition.

The following example demonstrates a custom template assigned to the PropertyDefinitionBase.ContentTemplate property. The template contains two CellEditorPresenter objects, each representing a property of a bound object. Cell editor presenters are linked to properties of the bound object using the CellEditorPresenter.Path property.

<dxprg:PropertyDefinition Path="Address">
    <dxprg:PropertyDefinition.ContentTemplate>
        <DataTemplate>
            <StackPanel>
                <!-- The Path property associates a cell editor presenter with the property of the bound object. -->
                <dxprg:CellEditorPresenter Path="AddressLine1"/>
                <dxprg:CellEditorPresenter Path="AddressLine2"/>
            </StackPanel>
        </DataTemplate>
    </dxprg:PropertyDefinition.ContentTemplate>
</dxprg:PropertyDefinition>
TIP

If a property grid contains a cell editor presenter and a property definition that have the same Path, the settings of the property definition are applied to the corresponding cell editor presenter.

For example, you can assign the required editor and/or make a cell value read-only.

The following example demonstrates a property grid that displays two properties of a composite Customer object in the same cell. The Email property is displayed by an in-place hyperlink editor.

CellEditorPresenter Example

<!-- -->
<dxprg:PropertyGridControl SelectedObject="{Binding Customer}"
       ShowProperties="WithPropertyDefinitions" >
    <dxprg:PropertyDefinition Path="Name" />
    <dxprg:PropertyDefinition Path="Phone">
        <dxprg:PropertyDefinition.ContentTemplate>
            <DataTemplate>
                <StackPanel>
                    <dxprg:CellEditorPresenter Path="Email" PathMode="Absolute" />
                    <dxprg:CellEditorPresenter Path="Phone" PathMode="Absolute" />
                </StackPanel>
            </DataTemplate>
        </dxprg:PropertyDefinition.ContentTemplate>
    </dxprg:PropertyDefinition>
    <!-- Settings for the cell editor presenter that displays the Email property -->
    <dxprg:PropertyDefinition Path="Email" Visibility="Collapsed">
        <dxprg:PropertyDefinition.EditSettings>
            <dxe:HyperlinkEditSettings AllowAutoNavigate="True" NavigationUrlFormat="mailto:{0}" />
        </dxprg:PropertyDefinition.EditSettings>
    </dxprg:PropertyDefinition>    
</dxprg:PropertyGridControl>
<!-- -->

Absolute and Relative Property Path

By default, the path specified by the CellEditorPresenter.Path property is relative to the parent PropertyDefinition. This behavior can be configured using the CellEditorPresenter.PathMode property. The following table describes the available options.

CellEditorPresenter.PathMode

property value

Description

Relative

The CellEditorPresenter.Path points to a property of an object associated with the parent PropertyDefinition.

Absolute

The CellEditorPresenter.Path points to a property of PropertyGridControl.SelectedObject.

This example demonstrates a custom template that displays multiple properties in a single PropertyGridControl cell.

Both the absolute and relative paths are specified for the cell editor presenter objects.

How To Edit Multiple Property Values in a Single PropertyGridControl Cell Example

using System;

namespace DXSample {
    public class CategoryAttributesViewModel {
        public virtual Person Person { get; protected set; }
        public CategoryAttributesViewModel() {
            Person = new Person {
                FirstName = "Anita",
                LastName = "Benson",
                Address = new Address {
                    AddressLine1 = "9602 South Main",
                    AddressLine2 = "Seattle, 77025, USA",
                },
                Phone = "7138638137",
            };
        }
    }
    public class Person {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Address Address { get; set; }
        public string Phone { get; set; }
    }
    public class Address {
        public string AddressLine1 { get; set; }
        public string AddressLine2 { get; set; }
    }
}