How to change the way data is shown in WPF GridControl?

Question

I'm trying to use GridControl from DevExpress but I can't do the same thing I usually do in ListView with a GridView View.

I did both aproach. Using DisplayMemberBinding and CellTemplate. Both show nothing. Code below (I removed some columns):

<dxg:GridControl ItemsSource="{Binding}" Name="gridControl1">
    <dxg:GridControl.Columns>
        <dxg:GridColumn Header="Teste" DisplayMemberBinding="{Binding DataNascimento}"/>
        <dxg:GridColumn Header="Nome">
            <dxg:GridColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Nome}"/>
                </DataTemplate>
            </dxg:GridColumn.CellTemplate>
        </dxg:GridColumn>
    </dxg:GridControl.Columns>
    <dxg:GridControl.View>
        <dxg:TableView Name="tableView1" AutoWidth="True" />
    </dxg:GridControl.View>
</dxg:GridControl>

It is shown like this image:

You can see my columns but no data. I bound 3 items and it shows 3 rows. The data itself is bound but looks like the template was not shown.

I tried the same aproach of this question but not work for me. My class have INotifyPropertyChanged and I used an ObservableCollection<T> before bindind to the GridControl. The only way it works is if I remove almost all code and change the AutoPopulateColumns to True. But in some cases I want a custom format and cannot achieve with this option.

Edit1: I did this in Design mode and works:

            <dxg:GridColumn FieldName="DataNascimento" Name="gridColumn3">
                <dxg:GridColumn.EditSettings>
                    <dxe:TextEditSettings DisplayFormat="{}{0:dd/MM/yyyy HH:mm:ss}" />
                </dxg:GridColumn.EditSettings>
            </dxg:GridColumn>

Edit2: Tried the same aproach @blindmeis suggests with grid and it works like I spected:

<DataGrid AutoGenerateColumns="False" Grid.Row="2" ItemsSource="{Binding}">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding DataNascimento}" Header="Nascimento" />
        <DataGridTextColumn Binding="{Binding Nome}" Header="Header" />
        <DataGridTemplateColumn Header="Teste">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Nome}"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Looks like this aproach works in both ListView and DataGrid. Unfortunately GridControl behaves different.

Using <dxg:GridColumn.EditSettings> is the correct way?

Answer 1

It end up in a more complicated problem.

As I had mention above in my edit TextEditSettings did what I wanted in that particularly case. But as soon as I improved the code some bugs started to appear.

The problem I faced after that is mentioned here at the official DevExpress forum and I'm summarizing below:

The real problem

I was using a base class for some reports and in those grids I was using theirs derivated classes.

The solution I had mention in my question works in a regular nom derivated class but I soon as I started to use properties from the base class and the derivated class some strange behavior started to happen.

By using the TextEditSettings with FieldName I could format the data and show its summary for properties in the derivated class but for properties in the base class it did not work.

So I changed to DisplayMemberBinding and it worked with all properties but the summary stopped work.

The solution

To make format option available for properties from your class and properties inherited and to make summary work properly you must use like this:

Side Note: Don't know if all those properties in the TableView are really necessary but since this control is very sensitive to changes with them I keep them all just to make clear what worked for me.

<dxg:GridControl ItemsSource="{Binding MyObservableCollection}">
    <dxg:GridControl.Columns>
        <dxg:GridColumn DisplayMemberBinding="{Binding Percent}"
                        FieldName="Percent"
                        Header="%">
            <dxg:GridColumn.EditSettings>
                <dxe:TextEditSettings DisplayFormat="F2" />
            </dxg:GridColumn.EditSettings>
        </dxg:GridColumn>
    </dxg:GridControl.Columns>
    <dxg:GridControl.View>
        <dxg:TableView AllowSorting="False"
                       ShowTotalSummary="True"
                       FilterEditorShowOperandTypeIcon="True"
                       NavigationStyle="Row"
                       MultiSelectMode="None"
                       AllowColumnFiltering="False"
                       AllowDateTimeGroupIntervalMenu="False"
                       AllowEditing="False"
                       AllowFilterEditor="False"
                       AllowGrouping="False"
                       ClipboardCopyAllowed="False"
                       ShowGroupPanel="False" />
    </dxg:GridControl.View>
    <dxg:GridControl.TotalSummary>
        <dxg:GridSummaryItem FieldName="Percent"
                             DisplayFormat="F2"
                             SummaryType="Sum" />
    </dxg:GridControl.TotalSummary>
</dxg:GridControl>

In this case it will work in the Percentproperty that was inherited. The DisplayMemberBinding will make it work for the TextEditSettings and the FieldName in the GridColumn is used to make summary get that property in GridSummaryItem.