如何在DevExpress中的主从网格控件上更改列标题？

Question

I was wondering how to change the column header's name in a Master-Detail Grid Control. I've managed to change the name of the Master's header using the code:

<dxg:GridColumn FieldName="SaleID" DisplayMemberBinding="{Binding SaleID}" Visible="False"/>

However, when I try to apply the same to my Detail:

<dxg:GridColumn FieldName="Item Name" DisplayMemberBinding="{Binding SaleItemMainName}" HorizontalHeaderContentAlignment="Center"/>

It adds another column instead of renaming the header so I get two columns that has the SaleItemMainName's value, their headers are called:

1. Item Name
2. Sale Item Main Name

For reference, here's my Grid Control's XAML Code:

<dxg:GridControl Grid.Row="1" x:Name="salePendingGC" AutoGenerateColumns="AddNew" Margin="20" Grid.ColumnSpan="2" Visibility="Hidden" >
    <dxg:GridControl.View>
        <dxg:TableView x:Name="salePendingTable" DetailHeaderContent="Sales" AutoWidth="True" ShowGroupPanel="False" RowMinHeight="40">
            <dxg:TableView.RowStyle>
                <Style TargetType="{x:Type dxg:RowControl}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding SelectionState}" Value="None">
                            <Setter Property="Background" Value="#FFF2DEDE"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </dxg:TableView.RowStyle>
        </dxg:TableView>
    </dxg:GridControl.View>
    <dxg:GridControl.DetailDescriptor>
        <dxg:DataControlDetailDescriptor ItemsSourcePath="SaleItemMain">
            <dxg:GridControl AutoGenerateColumns="AddNew">
                <dxg:GridControl.View>
                    <dxg:TableView DetailHeaderContent="SaleItemMain" AutoWidth="True" ShowGroupPanel="False" ShowColumnHeaders="True" RowMinHeight="35" ShowVerticalLines="False" ShowHorizontalLines="False">
                        <dxg:TableView.RowStyle>
                            <Style TargetType="{x:Type dxg:RowControl}">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding SelectionState}" Value="None">
                                        <Setter Property="Background" Value="#FFD9EDF7"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </dxg:TableView.RowStyle>
                    </dxg:TableView>
                </dxg:GridControl.View>
                <dxg:GridControl.DetailDescriptor>
                    <dxg:DataControlDetailDescriptor ItemsSourcePath="SaleItemSub">
                        <dxg:GridControl AutoGenerateColumns="AddNew">
                            <dxg:GridControl.View>
                                <dxg:TableView DetailHeaderContent="SaleItemSub" AutoWidth="True" ShowGroupPanel="False" ShowColumnHeaders="False" RowMinHeight="35" ShowVerticalLines="False" ShowHorizontalLines="False">
                                    <dxg:TableView.RowStyle>
                                        <Style TargetType="{x:Type dxg:RowControl}">
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding SelectionState}" Value="None">
                                                    <Setter Property="Background" Value="#FFFCF8E3"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </dxg:TableView.RowStyle>
                                </dxg:TableView>
                            </dxg:GridControl.View>
                        <dxg:GridColumn FieldName="Item Name" DisplayMemberBinding="{Binding SaleItemMainName}" HorizontalHeaderContentAlignment="Center"/>
                        </dxg:GridControl>
                    </dxg:DataControlDetailDescriptor>
                </dxg:GridControl.DetailDescriptor>
                <dxg:GridColumn FieldName="Item Name" DisplayMemberBinding="{Binding SaleItemMainName}" HorizontalHeaderContentAlignment="Center"/>
                <dxg:GridColumn FieldName="Quantity" DisplayMemberBinding="{Binding SaleItemMainQuantity}" HorizontalHeaderContentAlignment="Center"/>
                <dxg:GridColumn FieldName="Unit Price" DisplayMemberBinding="{Binding SaleItemMainUnitPrice}" HorizontalHeaderContentAlignment="Center"/>
            </dxg:GridControl>
        </dxg:DataControlDetailDescriptor>
    </dxg:GridControl.DetailDescriptor>
    <dxg:GridColumn FieldName="SaleID" DisplayMemberBinding="{Binding SaleID}" Visible="False"/>
    <dxg:GridColumn FieldName="Date" DisplayMemberBinding="{Binding SaleDate}" HorizontalHeaderContentAlignment="Center">
        <dxg:GridColumn.EditSettings>
            <dxe:DateEditSettings Mask="D" MaskUseAsDisplayFormat="True" />
        </dxg:GridColumn.EditSettings>
    </dxg:GridColumn>
    <dxg:GridColumn FieldName="Time" DisplayMemberBinding="{Binding SaleDate}" HorizontalHeaderContentAlignment="Center">
        <dxg:GridColumn.EditSettings>
            <dxe:DateEditSettings Mask="t" MaskUseAsDisplayFormat="True" />
        </dxg:GridColumn.EditSettings>
    </dxg:GridColumn>
    <dxg:GridColumn FieldName="Total" DisplayMemberBinding="{Binding SaleTotal}" HorizontalHeaderContentAlignment="Center"/>
    <dxg:GridColumn FieldName="Customer" DisplayMemberBinding="{Binding SaleCustomer}" HorizontalHeaderContentAlignment="Center"/>
    <dxg:GridColumn FieldName="Employee" DisplayMemberBinding="{Binding SaleEmployee}" HorizontalHeaderContentAlignment="Center"/>
    <dxg:GridColumn FieldName="Status" DisplayMemberBinding="{Binding SaleStatus}" Visible="False" />
</dxg:GridControl>

And my C# Class:

public class SaleClass
{
    private int saleID;
    private DateTime saleDate;
    private decimal saleTotal;
    private string saleCustomer;
    private string saleEmployee;
    private string saleStatus;
    private ObservableCollection<SaleItemMainClass> saleItemMain;

    public SaleClass(int saleID, DateTime saleDate, decimal saleTotal, string saleCustomer, string saleEmployee, string saleStatus)
    {
        this.saleID = saleID;
        this.saleDate = saleDate;
        this.saleTotal = saleTotal;
        this.saleCustomer = saleCustomer;
        this.saleEmployee = saleEmployee;
        this.saleStatus = saleStatus;
        this.saleItemMain = new ObservableCollection<SaleItemMainClass>();
    }
    public SaleClass() { }
    public int SaleID { get { return saleID; } set { saleID = value; } }
    public DateTime SaleDate { get { return saleDate; } set { saleDate = value; } }
    public decimal SaleTotal { get { return saleTotal; } set { saleTotal = value; } }
    public string SaleCustomer { get { return saleCustomer; } set { saleCustomer = value; } }
    public string SaleEmployee { get { return saleEmployee; } set { saleEmployee = value; } }
    public string SaleStatus { get { return saleStatus; } set { saleStatus = value; } }
    public ObservableCollection<SaleItemMainClass> SaleItemMain { get { return saleItemMain; } }
}
public class SaleItemMainClass
{
    private int saleItemMainNumber;
    private string saleItemMainName;
    private int saleItemMainQuantity;
    private decimal saleItemMainUnitPrice;
    private decimal saleItemMainTotalPrice;
    private int saleItemMainID;
    private ObservableCollection<SaleItemSubClass> saleItemSub;
    public SaleItemMainClass(int saleItemMainNumber, string saleItemMainName, int saleItemMainQuantity, decimal saleItemMainUnitPrice, decimal saleItemMainTotalPrice, int saleItemMainID)
    {
        this.saleItemMainNumber = saleItemMainNumber;
        this.saleItemMainName = saleItemMainName;
        this.saleItemMainQuantity = saleItemMainQuantity;
        this.saleItemMainUnitPrice = saleItemMainUnitPrice;
        this.saleItemMainTotalPrice = saleItemMainTotalPrice;
        this.saleItemMainID = saleItemMainID;
        this.saleItemSub = new ObservableCollection<SaleItemSubClass>();
    }
    public int SaleItemMainNumber { get { return saleItemMainNumber; } set { saleItemMainNumber = value; } }
    public string SaleItemMainName { get { return saleItemMainName; } set { saleItemMainName = value; } }
    public int SaleItemMainQuantity { get { return saleItemMainQuantity; } set { saleItemMainQuantity = value; } }
    public decimal SaleItemMainUnitPrice { get { return saleItemMainUnitPrice; } set { saleItemMainUnitPrice = value; } }
    public decimal SaleItemMainTotalPrice { get { return saleItemMainTotalPrice; } set { saleItemMainTotalPrice = value; } }
    public int SaleItemMainID { get { return saleItemMainID; } set { saleItemMainID = value; } }
    public ObservableCollection<SaleItemSubClass> SaleItemSub { get { return saleItemSub; } }
}
public class SaleItemSubClass
{
    private int saleItemSubNumber;
    private string saleItemSubName;
    private int saleItemSubQuantity;
    private decimal saleItemSubUnitPrice;
    private decimal saleItemSubTotalPrice;
    private int saleItemSubID;
    public SaleItemSubClass(int saleItemSubNumber, string saleItemSubName, int saleItemSubQuantity, decimal saleItemSubUnitPrice, decimal saleItemSubTotalPrice, int saleItemSubID)
    {
        this.saleItemSubNumber = saleItemSubNumber;
        this.saleItemSubName = saleItemSubName;
        this.saleItemSubQuantity = saleItemSubQuantity;
        this.saleItemSubUnitPrice = saleItemSubUnitPrice;
        this.saleItemSubTotalPrice = saleItemSubTotalPrice;
        this.saleItemSubID = saleItemSubID;
    }
    public int SaleItemSubNumber { get { return saleItemSubNumber; } set { saleItemSubNumber = value; } }
    public string SaleItemSubName { get { return saleItemSubName; } set { saleItemSubName = value; } }
    public int SaleItemSubQuantity { get { return saleItemSubQuantity; } set { saleItemSubQuantity = value; } }
    public decimal SaleItemSubUnitPrice { get { return saleItemSubUnitPrice; } set { saleItemSubUnitPrice = value; } }
    public decimal SaleItemSubTotalPrice { get { return saleItemSubTotalPrice; } set { saleItemSubTotalPrice = value; } }
    public int SaleItemSubID { get { return saleItemSubID; } set { saleItemSubID = value; } }
}

Answer 1

The FieldName property of a column has to be a path to the property you want to display: ItemName or SaleTotal or SaleItemMainName etc.

You can define the header with the Header property like this:

<dxg:GridControl AutoGenerateColumns="None" EnableSmartColumnsGeneration="False" ItemsSource="{Binding Persons}">
<dxg:GridControl.View>
    <dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummary="True" EditorShowMode="MouseUp"/>
</dxg:GridControl.View>
<dxg:GridControl.Columns>
    <dxg:GridColumn FieldName="ForeName" Header="Vorname" />
    <dxg:GridColumn FieldName="LastName" Header="Nachname" />
</dxg:GridControl.Columns>
</dxg:GridControl>

Normally, if I define my columns manually, I turn AutoGenerateColumns to None, otherwise some unexpected columns may be added.

You need DisplayMemberBinding only in special cases, if your cell should be diplayed in a special way.