WPF XCEED DataGrid multiple property in one column

Question

I have a class which has two level of collections. The software is about salaries payment. The idea is a payment action consists of multiple paid employees. And each employees could have multiple salaries cuts. The Object would look like:

Payment -->Payment Object
  Date
  ID
  Employees: -->ObservableCollection of EmpPayment Objects
     Emp A   -->And EmpPayment Object
        Name
        TotalCut --> An Integer Readonly Property that sums the Cuts.
        Cuts   --> Collection of Cut object
           Cut1  --> Cut object 1
           Cut2  --> Cut object 2
     Emp B
        Name
        TotalCuts
        Cuts
           Cut1
           Cut2

I am using a exceed DataGrid. So far so good except I want to display two values in one column using CellContentTemplate, that is the Cuts and the TotalCut. So the datagrid will look like:

Employee | Cuts
Emp A    | [The Total Cut]
           Cut 1
           Cut 2
Emp B    | [The Total Cut]
           Cut 1
           Cut 2

At the cuts column, i want to use a Xceed DropDownButton to show the total, and user can edit the cuts by editting the dropdowncontent. So far the XAML i made for the Employees ObservableCollection:

<xcdg:DataGridControl x:Name="GridEmployees" ItemsSource="{Binding Employees}" AutoCreateColumns="False">
    <xcdg:DataGridControl.Columns>
        <xcdg:Column FieldName="Name" Title="Employee"/>

        <xcdg:Column FieldName="Cuts" Title="Cuts">
            <xcdg:Column.CellContentTemplate>
                <DataTemplate>
                    <xctk:DropDownButton Content="{Binding Path=TOTALCUT}">
                        <xctk:DropDownButton.DropDownContent>
                            <ListBox ItemsSource="{Binding}">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <TextBox Text="{Binding CutDescription}"/>
                                            <TextBox Text="{Binding Amount}"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </xctk:DropDownButton.DropDownContent>
                    </xctk:DropDownButton>
                </DataTemplate>
            </xcdg:Column.CellContentTemplate>
        </xcdg:Column>

    </xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>

Binding to the Cuts ObservableCollection works well, but not the TotalCut. How do I bind the TotalCut [Intentionally written in all caps above] to that same column? Using two columns is possible, but will not be pretty.

Answer 1

Forget the XCeed DataGridControl and welcome to standard DataGrid. Just use the DataGridTemplateColumn there.

The other alternative is just to use two columns in XCeed DataGridControl which is not preety.

Answer 2

All you have to do - provide your own cell editor and CellTemplate, which will bind to corresponding properties. Here's my working solution:

    <xcdg:DataGridControl AutoCreateColumns="False" ItemsSource="{Binding Items}">
    <xcdg:DataGridControl.View>
        <xcdg:TableflowView ScrollingAnimationDuration="0" ContainerHeight="44"/>
    </xcdg:DataGridControl.View>
    <xcdg:DataGridControl.Resources>
        <DataTemplate x:Key="EditDataTemplate"  DataType="wpfApplication1:State">
            <StackPanel>
                <TextBox Text="{Binding Path=Name}"/>
                <TextBox Text="{Binding Path=Post}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="ReadDataTemplate"  DataType="wpfApplication1:State">
            <StackPanel>
                <TextBlock HorizontalAlignment="Right" Text="{Binding Path=Name}"/>
                <TextBlock HorizontalAlignment="Right" Text="{Binding Path=Post}"/>
            </StackPanel>
        </DataTemplate>
    </xcdg:DataGridControl.Resources>
    <xcdg:DataGridControl.Columns>
        <xcdg:Column FieldName="Zip" Title="Zip"/>
        <xcdg:Column FieldName="Stat" Title="Zip2"
                     CellContentTemplate="{StaticResource ReadDataTemplate}">
            <xcdg:Column.CellEditor>
                <xcdg:CellEditor EditTemplate="{StaticResource EditDataTemplate}"/>
            </xcdg:Column.CellEditor>
        </xcdg:Column>    
    </xcdg:DataGridControl.Columns>
</xcdg:DataGridControl>

and codebehind of "data object":

public class User
{
    private string _zip;

    public string Zip
    {
        get { return _zip; }
        set
        {
            _zip = value;
            Stat = new State();
            Stat.Name = "stat: " + value;
        }
    }

    public State Stat { get; set; }
}

public class State
{
    public string Name { get; set; }
    public string Post { get; set; }
}

Entire solution code