Using complex object bindings in XamWebGrid

Added in the 9.2 is the ability to use the XAML ‘dot’ notation for binding to complex objects.

That means if you have a class that includes properties that expose complex objects, you can use dot notation to bind columns in the grid to properties of the complex object.  For example, lets assume you have a Customer class that stores the Address as a complex type like the sample shown below:

namespace DotNotationDemo
{
    public class Customer
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Company { get; set; }
        public string Title { get; set; }
        public Address Address { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }
    }

    public class Address
    {
        public string Street1 { get; set; }
        public string Street2 { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Postal { get; set; }
    }
}

Previously, in order to display the properties of the Address object, you had to use the grids TemplateColumn and create your own binding statement:

<igGrid:TemplateColumn Key="Address">
    <igGrid:TemplateColumn.ItemTemplate>
        <DataTemplate> 
            <Grid> 
                <TextBlock Text="{Binding Path=Address.Street1}" /> 
            </Grid>
        </DataTemplate>
    </igGrid:TemplateColumn.ItemTemplate>
</igGrid:TemplateColumn>

This is difficult because not only did you have to define a template foe the cells display state, but also one for its edit state and the column header did not properly reflect the data bound in the template.

Starting in 2009.2, to bind to complex objects you can simply use the dot notation in the columns Key property:

<igGrid:XamWebGrid x:Name="xamWebGrid1" AutoGenerateColumns="False">
    <igGrid:XamWebGrid.Columns>
        <igGrid:TextColumn Key="FirstName" />
        <igGrid:TextColumn Key="LastName" />
        <igGrid:TextColumn Key="Company" />
        <igGrid:TextColumn Key="Title" />
        <igGrid:TextColumn Key="Address.Street1" />
        <igGrid:TextColumn Key="Address.Street2" />
        <igGrid:TextColumn Key="Address.City" />
        <igGrid:TextColumn Key="Address.State" />
        <igGrid:TextColumn Key="Address.Postal" />
        <igGrid:TextColumn Key="Phone" />
        <igGrid:TextColumn Key="Fax" />
    </igGrid:XamWebGrid.Columns>            
</igGrid:XamWebGrid>

The grid will properly resolve the key to create the proper binding.

As you can see the column provides all of its normal behaviors including proper column header text and editing abilities for the sub properties.

Finally, if you have not yet upgraded to 2009.2, we are also adding this feature to 2009.1 in the next Service Release.