Vincent Sibal's Blog : DataGrid Samples

Launching a custom Dialog to edit items in a DataGrid (with MVVM)

vinsibal — Fri, 10 Apr 2009 16:53:00 GMT

Launching a custom dialog for editing on the DataGrid is another somewhat common request that I see from the discussion list. I thought I would provide a sample but at the same time implement it with the MVVM pattern. The requirement that I will use on the sample is that the editing mechanism can only come from the editing dialog that I provide.

I decided that the way to launch the custom dialog will be through double-clicking on the row. To get that behavior, I will use the attached behavior pattern on DataGridRow. The behavior is defined like so:

public class DataGridRowBehavior

{

public static DependencyProperty OnDoubleClickProperty = DependencyProperty.RegisterAttached(

"OnDoubleClick",

typeof(ICommand),

typeof(DataGridRowBehavior),

new UIPropertyMetadata(DataGridRowBehavior.OnDoubleClick));

public static void SetOnDoubleClick(DependencyObject target, ICommand value)

{

target.SetValue(DataGridRowBehavior.OnDoubleClickProperty, value);

}

private static void OnDoubleClick(DependencyObject target, DependencyPropertyChangedEventArgs e)

{

var element = target as DataGridRow;

if ((e.NewValue != null) && (e.OldValue == null))

{

element.PreviewMouseDoubleClick += OnPreviewMouseDoubleClick;

}

else if ((e.NewValue == null) && (e.OldValue != null))

{

element.PreviewMouseDoubleClick -= OnPreviewMouseDoubleClick;

}

private static void OnPreviewMouseDoubleClick(object sender, MouseButtonEventArgs e)

{

UIElement element = (UIElement)sender;

ICommand command = (ICommand)element.GetValue(DataGridRowBehavior.OnDoubleClickProperty);

command.Execute(e);

}

The behavior is then used on the DataGridRow like this:

<Setter Property="local:DataGridRowBehavior.OnDoubleClick"

Value="{Binding ShowEditItemDialogCommand}" />

</Style>

What’s happening is the OnDoubleClick attached property listens for a property change on itself. I define an ICommand, ShowEditItemDialogCommand, on OnDoubleClick which then hooks up the actual event handler, PreviewMouseDoubleClick, on the target element. In that event handler, OnPreviewMouseDoubleClick, I retrieve the value of OnDoubleClick which is my ICommand and execute it. So now we have the behavior to launch a dialog through a double-click action. The next thing is to define the ICommand ShowEditItemDialogCommand.

I have defined a DataGridRow ViewModel which hosts the actual item data as well as any properties that will drive the view (the DataGridRow). It also will host any commands on a DataGridRow which for our purposes will be the ShowEditItemDialogCommand. My commands are also implemented using the RelayCommand mechanism that is discussed on this MSDN article. So here is the basic implementation:

public class ItemViewModel : ViewModelBase

{

private ICommand _editItemCommand;

public ICommand ShowEditItemDialogCommand

{

get

{

if (_editItemCommand == null)

{

_editItemCommand = new RelayCommand(

() =>

{

// pass the item to the dialog

var dlg = new EditItemDialog(Item);

if (dlg.ShowDialog() == true)

{

// retrieve the updated item from the dialog

Item = dlg.Result.Item;

}

});

}

return _editItemCommand;
}

}

So when DataGridRowBehavior.OnPreviewMouseDoubleClick executes the command, my ShowEditItemDialogCommand will initiate the launch of the new dialog. The dialog that is being launched is basically a new Window which is considered a View. From a MVVM purist perspective this does not belong in a ViewModel. To handle this you can use the mediator design pattern to host the communication between the ViewModel and the View. There are a couple ways to implement this pattern which include implementing it as an observer pattern or using a specialized communication mechanism through interfaces and references. I’ve chosen the latter and in the sample code you can see I’ve named it EditDialogDirector to be clear on its behavior. I won’t show all the details here.

Now, I said earlier that I set a requirement that editing can only come from the dialog that I provide. While there are a lot of ways to customize the editing behavior, I decided to keep it really simple and set DataGrid.IsReadOnly to true. It does mean that I will lose the default editing capabilities that DataGrid provides, but I won’t have to keep state on DataGrid begin and commit edits. There are some other details that I’m leaving out but the full sample code below will give you a good idea of how everything is pieced together. Also, there is a lot of great reference material and samples on MVVM to further enhance your knowledge on the subject.

http://blogs.msdn.com/johngossman/archive/2005/10/08/478683.aspx

http://karlshifflett.wordpress.com/mvvm/

http://www.codeproject.com/KB/WPF/InternationalizedWizard.aspx

Download the full sample here.

Exploring MVVM: Grouping with the DataGrid

vinsibal — Wed, 21 Jan 2009 16:46:00 GMT

Model-View-ViewModel (MVVM) is one of those really interesting design patterns that are used in WPF. It provides a separation between the UI and business logic and uses data binding techniques to connect them together. Karl Shifflett has some great material on MVVM that you can read about here.

Anyway, I thought I’d dig into some of the details starting with grouping items in a DataGrid. I was originally building a test app for modeling animations of DependencyProperties and ended up using a DataGrid to show the DPs, their current values, and animation properties. I found that I really needed all the sorting, grouping, and filtering capabilities to analyze test values so I wanted to update the DataGrid and use the MVVM pattern (as much as possible).

Grouping by column

To group by column I decided to use a context menu on the column header. In the context menu, the MenuItems are hooked up to commands on my ViewModel like so:

<MenuItem Name="mi_group"

Header="Group by this column"

Command="{Binding RelativeSource={RelativeSource FindAncestor,

AncestorType={x:Type local:Window1}},

Path=DataContext.GroupColumn}"

CommandParameter="{Binding RelativeSource={RelativeSource Self},

Path=DataContext}"/>

<MenuItem Name="mi_clearGroups"

Header="Clear grouping"

Command="{Binding RelativeSource={RelativeSource FindAncestor,

AncestorType={x:Type local:Window1}},

Path=DataContext.UngroupColumns}" />

</ContextMenu>

My ViewModel is the DataContext for the main window and implements these commands with a MVVM commanding style introduced by Josh Smith called RelayCommand. You can find it in his Crack.NET solution as well as other MVVM samples here and here. Here is the code for grouping:

public ICommand GroupColumn

{

get

{

if (_groupColumn == null)

{

_groupColumn = new RelayCommand<object>(

(param) =>

{

string header = param as string;

DPCollection.GroupDescriptions.Add(new PropertyGroupDescription("TargetProperty." + header));

DPCollection.SortDescriptions.Add(new SortDescription("TargetProperty.Name", ListSortDirection.Ascending));

});

}

return _groupColumn;
}

}

DPCollection is the CollectionView that I set on the DataGrid.ItemsSource. So triggering this command will set a group on a particular property and sort by its name. The important part is really how the command is being implemented in the ViewModel and through a delegate style of commanding such as RelayCommand.

Expanding and Collapsing Groups

I really wanted to follow a pattern similar to Josh’s and Bea’s TreeView examples but unfortunately the grouping implementation is not so extensible. When you setup GroupDescriptions, the ItemContainerGenerator of the ItemsControl will create these GroupItem visuals and will set the DataContext of each GroupItem to a CollectionViewGroupInternal object. This CollectionViewGroupInternal object holds information about the items in the group, its name, count, etc. The xaml for my GroupStyle without custom expanding or collapsing looks like this:

<GroupStyle.HeaderTemplate>

</StackPanel>

</DataTemplate>

</GroupStyle.HeaderTemplate>

<GroupStyle.ContainerStyle>

<Setter.Value>

<Expander.Header>

</DockPanel>

</Expander.Header>

</Expander>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</GroupStyle.ContainerStyle>

</GroupStyle>

Notice the properties “Name” and “ItemCount” which are properties on the CollectionViewGroup which is a base class of CollectionViewGroupInternal. Also notice the Expander.IsExpanded property. I needed some way to bind some kind of ViewModel property to Expander.IsExpanded.

The problem is that CollectionViewGroupInternal is Internal as you might have suspected and I was unsuccessful in applying a class adaptor to the base class object without affecting the grouping functionality. So I decided to put an IsExpanded property directly on each of the items instead. While this is more of a hack as IsExpanded means nothing to the item by itself, it is relatively cheaper and really may be a more realistic solution than re-implementing grouping on a custom CollectionView. Here is the updated xaml:

<GroupStyle.HeaderTemplate>

</StackPanel>

</DataTemplate>

</GroupStyle.HeaderTemplate>

<GroupStyle.ContainerStyle>

<Setter.Value>

<Expander.Header>

</DockPanel>

</Expander.Header>

</Expander>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</GroupStyle.ContainerStyle>

</GroupStyle>

I have made the assumption that it will check the first item in the group but that is ok as I only care able expanding or collapsing all groups. When I clear grouping or group a different column, all IsExpanded properties are reset so there are no side effects on the next group.

Finally, the command for expanding looks like this:

public ICommand ExpandAllGroups

{

get

{

if (_expandAllGroups == null)

_expandAllGroups = new RelayCommand(

() =>

{

if (DPCollection.Groups != null)

{

foreach (object groupItem in DPCollection.Groups)

{

var group = groupItem as CollectionViewGroup;

group.Items[0] as ElementViewModel).IsExpanded = true;

}
}

});

return _expandAllGroups;

}

I have attached a full sample here, which is a stripped down version of the test app I was building.

WPF DataGrid Sample: Locking input to the row being edited

vinsibal — Thu, 18 Dec 2008 19:45:00 GMT

Scenario

By default the WPF DataGrid will commit a row when focus is lost on the row, the ‘Enter’ key is pressed, tabbing to the next row, or programmatically calling commit on the row. Let’s say I want to control how the user commits a row edit by locking input to just that row being edited and having a filtered set of input or a single input of my choosing that will commit that row.

Implementation

There are no configuration APIs on the DataGrid that allow you to tell it what input will commit a row, but there are events that allow you to cancel editing operations as you so choose. So we can work around that. Another thing we will have to do is keep track of the editing state of the DataGrid. With this extra flag, we can also use it to disable other rows while the current row is being edited.

You can subclass DataGrid and add functionality that may be more generalized but for this sample I’m just going to use a UserControl. Here is the flag that I will use which is a DP so it can be used in the DataGridRow style.

public partial class CustomDataGrid : UserControl

{

public bool IsEditingRow

{

get { return (bool)GetValue(EditingRowProperty); }

set { SetValue(EditingRowProperty, value); }

}

public static readonly DependencyProperty EditingRowProperty =

DependencyProperty.Register(

"IsEditingRow",

typeof(bool),

typeof(CustomDataGrid),

new FrameworkPropertyMetadata(false, null, null));

}

This flag is going to be used such that anytime a row is being edited, other rows will be disabled and you can only commit through an input that I choose. To disable the rows we can add something like this in the row’s style:

<Style.Triggers>

<MultiDataTrigger.Conditions>

</MultiDataTrigger.Conditions>

</MultiDataTrigger>

</Style.Triggers>

</Style>

For naming purposes I probably should have called it IsInEditMode to differentiate but please indulge me for now. So anyway, if the DataGrid is editing a row and the particular row is not in edit mode it will be disabled.

Now, for the logic, two important events for this scenario are:

· DataGrid.BeginningEdit

· DataGrid.RowEditEnding

BeginninigEdit will be used to set the IsEditingRow flag as well as cancel a BeginEdit operation when trying to open a different row for edit while still editing the current row.

private void DataGrid_Standard_BeginningEdit(object sender, DataGridBeginningEditEventArgs e)

{

if (!IsEditingRow)

{
// set edit mode state

IsEditingRow = true;

_currentEditingRow = e.Row;
}

else if (e.Row != _currentEditingRow)

{

// cancel all new edits for different rows

e.Cancel = true;

}

RowEditEnding will be used to cancel a commit if IsEditingRow is true. It also resets when the row edit is cancelled.

private void DataGrid_Standard_RowEditEnding(object sender, DataGridRowEditEndingEventArgs e)

{

if (e.EditAction == DataGridEditAction.Cancel)

{

// cancelling the entire row will reset the state

IsEditingRow = false;

}

else if (e.EditAction == DataGridEditAction.Commit)

{

e.Cancel = IsEditingRow;

}

So for this workaround, it is really based on how you want to manipulate IsEditingRow. For this sample, I want to commit a row only when the ‘Enter’ key is pressed. I can do that by listening to the PreviewKeyDown event and setting IsEditingRow to false for the ‘Enter’ key.

private void DataGrid_Standard_PreviewKeyDown(object sender, KeyEventArgs e)

{

DataGridRow row = GetRow(DataGrid_Standard, DataGrid_Standard.Items.IndexOf(DataGrid_Standard.CurrentItem));

if (row.IsEditing && e.Key == Key.Enter)

{

// only 'Enter' key on an editing row will allow a commit to occur

IsEditingRow = false;

}

That’s basically it. If you try out the sample you will see that when you open a row for edit, the rest of the rows will be disabled and the only way to commit is through the ‘Enter’ key.

Let’s say ‘Enter’ to commit is not the functionality you want. Instead you want to commit using a specific button. In that case you can listen to the click event or setup a command and set IsEditingRow accordingly based on your specific conditions.

You can download the full sample here.

WPF DataGrid – Dynamically updating DataGridComboBoxColumn

vinsibal — Wed, 17 Dec 2008 19:07:00 GMT

The Scenario

I want to do a master detail like scenario where the selection in one ComboBox cell will update the list of items in the next ComboBox cell and so on.

Setting up the DataSource and ViewModel

I will use the Northwind database for this example and will use the first column to select a Category within the Categories table.

The second column will have a ComboBox to select all the Products within the selected Category.

And the third column will have a ComboBox to select all the orders that were placed on the selected Product.

The ViewModel that I will use on each DataGrid item will have the properties:

· CurrentCategory

· CurrentProduct

· CurrentOrder

· ProductsInCategory

· OrdersFromProduct

Each time CurrentCategory is updated, ProductsInCategory will be updated as well to create the new list of products. When CurrentProduct is updated, OrdersFromProduct will be updated in a similar fashion. So for example, CurrentCategory will look like this:

public int CurrentCategory

{

get { return _currentCategory; }

set

{

_currentCategory = value;

ProductsInCategory = DBAccess.GetProductsInCategory(_currentCategory).Tables["Products"].DefaultView;

OnPropertyChanged("CurrentCategory");

}

GetProductsInCategory() does a query on the database passing in the category id. I will not go over the database querying implementation here.

Hooking up to the UI

For the first DataGridComboBoxColumn, the ComboBox.ItemsSource will bind to the Categories DataTable through a StaticResource. The binding on the column will be set to the CurrentCategory.

<dg:DataGridComboBoxColumn Header="Current Category"

SelectedValueBinding="{Binding Path=CurrentCategory}"

SelectedValuePath="CategoryID"

DisplayMemberPath="CategoryName"

ItemsSource="{Binding Source={StaticResource categoriesDataProvider}}">

</dg:DataGridComboBoxColumn>

The other DataGridComboBoxColumns will have to take a slightly different approach. Let’s say we do something like this:

<dg:DataGridComboBoxColumn Header="Current Product"

SelectedValueBinding="{Binding Path=CurrentProduct}"

SelectedValuePath="ProductID"

DisplayMemberPath="ProductName"

ItemsSource="{Binding Path=ProductsInCategory}">

</dg:DataGridComboBoxColumn>

It does seem more intuitive to take this approach however DataGridColumns are not actually part of the visual tree and only the Binding DPs will actually be set on generated cell elements to inherit DataGrid’s DataContext. That means that the binding for ItemsSource will fail as it won’t be able to find path, ProductsInCategory, that it is current set.

Aside: Jaime wrote this nice post on how to set the DataContext for the columns to DataGrid’s DataContext, but I’m going to show an implementation here with just the default implementation.

So what we want is for the ItemsSource to bind to the DataContext of the row on the DataGrid. We can do that by setting the binding on the actual generated element of the column through ElementStyle and EditingElementStyle.

<!—now itemssource will find the correct DataContext-->

<dg:DataGridComboBoxColumn Header="Current Product"

SelectedValueBinding="{Binding Path=CurrentProduct}"

SelectedValuePath="ProductID"

DisplayMemberPath="ProductName">

<dg:DataGridComboBoxColumn.ElementStyle>

</Style>

</dg:DataGridComboBoxColumn.ElementStyle>

<dg:DataGridComboBoxColumn.EditingElementStyle>

</Style>

</dg:DataGridComboBoxColumn.EditingElementStyle>

</dg:DataGridComboBoxColumn>

This works because internally when the cell is being generated, the Content of the cell will have its layout updated which will make it part of the visual tree and it will have access to the correct DataContext. Now the ItemsSource for the ComboBox will dynamically update each time CurrentCategory is changed. The DataGridComboBoxColumn for the CurrentOrder is similar to CurrentProduct so I will not show that here.

You can download the sample here.

WPF TestApi and DataGrid Sample

vinsibal — Wed, 10 Dec 2008 19:33:00 GMT

Our WPF Test team has just released a library of tools that can be leveraged to test WPF applications. What's really cool is that these are utilities that we use internally and now we can push them out to external customers for feedback and usage. The library currently lives here on codeplex, http://www.codeplex.com/TestApi. There are a couple more blog posts where you can get more information about it.

http://blogs.msdn.com/llobo/archive/2008/12/08/wpf-test-helper-library.aspx

http://blogs.msdn.com/wpfsdk/archive/2008/12/09/testapi-released.aspx

The download contains some samples but I thought I would show a sample with one of the DataGrid applications instead.

I made some small modifications to the SampleTestApp to get it working with one of my DataGrid samples. In this sample, I am doing a visual verification test to check that the rows and cells update to the correct visual state when in edit mode. I am using the in-proc, out of thread strategy which is similar to the strategy used in the visual verification in the SampleTestApp.

To get the tests to work with the DataGridSample application, I needed to add automation id’s to some of the elements. In particular, the Window and the DataGrid:

<Window x:Class="DataGridSample.DataGridBasicSample"

AutomationProperties.AutomationId="DataGridBasicSample">

…

<dg:DataGrid x:Name="DataGrid_Standard"

AutomationProperties.AutomationId="DataGrid_Standard">

</dg:DataGrid>

…

</Window>

These IDs will be queried by my test in order to find the correct AutomationElements. And here is what the test will basically look like (left out logging and some error checking to make it more concise):

// retrieve the necessary AutomationElements

AutomationElement window = AutomationUtilities.FindElementsById(AutomationElement.RootElement, "DataGridBasicSample")[0];

AutomationElement dataGrid = AutomationUtilities.FindElementsById(window, "DataGrid_Standard")[0];

GridPattern grid = dataGrid.GetCurrentPattern(GridPattern.Pattern) as GridPattern;

AutomationElement cell = grid.GetItem(0, 0);

// do action for making cell editable

AutomationHelpers.MoveToAndDoubleClick(cell);

// Capture the actual pixels from the bounds of the screen rectangle

Snapshot actual = Snapshot.FromRectangle(AutomationHelpers.GetElementSize(dataGrid));

// Load the reference/master data from a previously saved file

Snapshot master = Snapshot.FromFile(Path.Combine(TestContext.TestDeploymentDir, "Master_EditTest1.png"));

if (CompareImages(actual, master) == VerificationResult.Fail)

{

Assert.Fail("Initial State test failed. Actual should look like Master image. Refer to logged images under:" + TestContext.TestLogsDir);

}

Download the full sample here. We would love to hear your feedback.

WPF DataGrid – New Item Template Sample

vinsibal — Wed, 05 Nov 2008 18:33:00 GMT

This sample shows how to create a template for the NewItemPlaceholder to indicate that you can add a new item. This is what it will look like:

First I will need to create a new template specifically for the NewItemPlaceholder row. I’ve followed the general outline of the original DataGridRow control template but I’ve only included the pieces I needed and I’ve also added an element for the “Click here to add new item.” text. My template looks something like this:

<dg:SelectiveScrollingGrid>

…

…

</dg:SelectiveScrollingGrid>

</ControlTemplate>

Then I’m going to need to attach to several events. In particular, I need to hook up to the DataGrid.LoadingRow, DataGrid.UnloadingRow, DataGrid.RowEditEnding, and DataGridRow.MouseLeftButtonDown events.

I attach to the LoadingRow and UnloadingRow events so I can set either the default or new item control template when the row is created. These event handlers will look like this:

private void DataGrid_Standard_LoadingRow(object sender, DataGridRowEventArgs e)

{

if (_defaultRowControlTemplate == null)

{

_defaultRowControlTemplate = e.Row.Template;

}

if (e.Row.Item == CollectionView.NewItemPlaceholder)

{

e.Row.Template = _newRowControlTemplate;

e.Row.UpdateLayout();

}

private void DataGrid_Standard_UnloadingRow(object sender, DataGridRowEventArgs e)

{

if (e.Row.Item == CollectionView.NewItemPlaceholder && e.Row.Template != _defaultRowControlTemplate)

{

e.Row.Template = _defaultRowControlTemplate;

e.Row.UpdateLayout();

}

I attach to the DataGridRow.MouseLeftButtonDown event so that I can change the template of the NewItemPlaceholder on the first click. For this sample, when first clicking the row of the NewItemPlaceholder it immediate enters edit mode. Here is the handler:

private void Row_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

DataGridRow row = sender as DataGridRow;

if (row.Item == CollectionView.NewItemPlaceholder && row.Template == _newRowControlTemplate)

{

// for a new row update the template and open for edit

row.Template = _defaultRowControlTemplate;

row.UpdateLayout();

DataGrid_Standard.CurrentItem = row.Item;

DataGridCell cell = Helper.GetCell(DataGrid_Standard, DataGrid_Standard.Items.IndexOf(row.Item), 0);

cell.Focus();

DataGrid_Standard.BeginEdit();

}

The last event is necessary so that the template is updated back to the new item template after a row is either committed or cancelled. It is a little tricky because what I really want is to perform my operation when the row is already committed or cancelled but the only event available, RowEditEnding, fires while the row is committing or being cancelled. What I can do is use the Dispatcher to make my operation take place after the RowEditEnding event. My handler looks like this:

private void DataGrid_Standard_RowEditEnding(object sender, DataGridRowEditEndingEventArgs e)

{

IEditableCollectionView iecv = CollectionViewSource.GetDefaultView((sender as DataGrid).ItemsSource) as IEditableCollectionView;

if (iecv.IsAddingNew)

{

// need to wait till after the operation as the NewItemPlaceHolder is added after

Dispatcher.Invoke(new DispatcherOperationCallback(ResetNewItemTemplate), DispatcherPriority.ApplicationIdle, DataGrid_Standard);

}

private object ResetNewItemTemplate(object arg)

{

DataGridRow row = Helper.GetRow(DataGrid_Standard, DataGrid_Standard.Items.Count - 1);

if (row.Template != _newRowControlTemplate)

{

row.Template = _newRowControlTemplate;

row.UpdateLayout();

}

return null;

}

So when I cancel or commit the edit on the new item, the new item template will be added back to the last row.

You can download the full sample here.

WPF VSM and DataGrid Sample

vinsibal — Wed, 05 Nov 2008 03:34:00 GMT

Now that the Visual State Manager (VSM) is part of the WPFToolKit, I thought I’d show a basic example of how to utilize VSM with the DataGrid. Some prereq’s and resources:

· You can download the toolkit here

· Info on getting VSM for WPF to work in Blend

· General VSM resource links

So, what I thought I would show is how to get it working with DataGridRows. The toolkit currently uses this VisualStateBehavior pattern to hook up the VisualStateManager to the control. If you take a look in the toolkit, you’ll find behavior classes for Button, Control, ListBoxItem, TextBoxBase, etc. They basically attach listeners of particular DPs and call VisualStateManager.GoToState as necessary.

The Functionality

In this sample I will create a DataGridRowBehavior class that will create visual states for:

· MouseOver

· Selected

· Editing

In the MouseOver state I want to make a somewhat subtle change to the background and for the Selected state I want to use the same background color but make it more illuminated. Here is what it will look like,

For the Editing state, I will use the same background color as the Selected state but I want it to pulse to signify this editable state. Unfortunately a picture will not be able to describe this behavior so you’ll have to download the sample to see it.

Implementation Details

First I’ll start with the DataGridRowBehavior class. This class derives from ControlBehavior and basically attaches to DPs to be notified on value changed. When it is notified, it calls VisualStateManager.GoToState on the particular state that it should be in. This is very similar to the standard way of creating a control with VSM behavior except it is using the attached behavior pattern instead. More on attached behavior’s here on John Gossman’s blog. So here is what my class will look like:

public class DataGridRowBehavior : ControlBehavior

{

protected override void OnAttach(Control control)

{

base.OnAttach(control);

DataGridRow dataGridRow = (DataGridRow)control;

Type targetType = typeof(DataGridRow);

EventHandler handler = delegate { UpdateState(dataGridRow, true); };

AddValueChanged(DataGridRow.IsMouseOverProperty, targetType, dataGridRow, handler);

AddValueChanged(DataGridRow.IsSelectedProperty, targetType, dataGridRow, handler);

AddValueChanged(DataGridRow.IsEditingProperty, targetType, dataGridRow, handler);

}

protected override void UpdateState(Control control, bool useTransitions)

{

DataGridRow dataGridRow = (DataGridRow)control;

if (dataGridRow.IsMouseOver)

{

VisualStateManager.GoToState(dataGridRow, "MouseOver", useTransitions);
}

else

{

VisualStateManager.GoToState(dataGridRow, "Normal", useTransitions);

}

if (dataGridRow.IsEditing)

{

VisualStateManager.GoToState(dataGridRow, "Editing", useTransitions);

}

else

{

VisualStateManager.GoToState(dataGridRow, "NotEditing", useTransitions);

}

if (dataGridRow.IsSelected)

{

VisualStateManager.GoToState(dataGridRow, "Selected", useTransitions);

}

else

{

VisualStateManager.GoToState(dataGridRow, "Unselected", useTransitions);

}

base.UpdateState(control, useTransitions);
}

}

From there you need to update the DataGridRow ControlTemplate to include the VisualStateGroups. I’ve taken the existing DataGridRow ControlTemplate and added two rectangles that will both overlap the main Border, “DGR_Border”. These rectangles will initially have an Opacity of zero and when a particular VisualState is triggered, the Opacity will be updated so that the appearance of the row’s background changes. To see the xaml for the full ControlTemplate, you can download the sample below.

For the VisualStateGroups, here are the groups I’ve set:

<VisualStateManager.VisualStateGroups>

</VisualStateGroup>

</VisualStateGroup>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

Then for each state I setup a Storyboard to create the behavior for that state. Here is an example of MouseOver:

</Storyboard>

</VisualState>

fillColor represents one of the rectangles that I’ve added to the ControlTemplate. I do something similar with the Selected state and for the Editing state I create a pulsing effect by animating the rectangle’s Fill property with a different gradient brush that repeats forever.

With the VisualStateGroups setup, the last thing I have to do is register DataGridRowBehavior with the VisualStateBehavior property. This is how the VisualStateManager will recognize that my ControlTemplate makes use of VisualStateManager. I set that up in my DataGridRow style like so:

</Style>

So with that, here is the full sample. I did go over the implementation details pretty quickly so please take a look at the sample to see the full code and markup details. Stay tuned for more!

WPF DataGrid: Frozen Row Sample

vinsibal — Fri, 31 Oct 2008 23:27:00 GMT

It looks that this is a frequently requested feature and unfortunately didn't make the v1. It is still possible to extend the DataGrid to do so. A community developer has already posted a sample on creating a footer row for the DataGrid here, http://thibaud60.blogspot.com/2008/10/wpftoolkit-datagrid-with-footer-and.html. I thought I would post a sample for creating pinned rows starting from the top. This is similar to the excel pinning functionality.

I won't really go into too much implementation detail but I basically follow a similar pattern to the way frozen columns are implemented. The core of the code is in a CustomDataGridRowsPresenter.ArrangeOverride method. I tried to make it as simple as possible so it could be easily understood and as a result of that I didn't implement virtualization. Well, that's part of the reason I didn't implement virtualization. VirtualizingStackPanel isn't very extendable when it comes to it's virtualization and recycling functionality. I would have to do a good bit of my own implementation for it and it would take a good bit of time. So, the sample only works when row and column virtualization is turned off. If anyone feels up to making it work with virtualization, please be my guest. = )

Anyway, you can download the sample here. On the left pane I added buttons to increase/decrease the frozen row and column counts.

Note: The purpose of the sample is for learning purposes only. Please do not use this in production code as it is not fully tested.

WPF DataGrid - DataGridComboBoxColumn v1 Intro

vinsibal — Fri, 31 Oct 2008 17:49:00 GMT

Intro

If you haven't already, you can download the DataGrid v1 bits and source here. DataGridComboBoxColumn has had a make-over since the CTP release. In particular, the whole data binding story has been updated so that you can accomplish basic ComboBox tasks that before required some tedious workarounds. While other stock columns such as DataGridTextColumn and DataGridCheckBoxColumn use Binding for the visual to data hook up, DataGridComboBoxColumn uses a different route with three possible ways to hook up a binding. Here are the APIs that are specific to the DataGridComboBoxColumn:

public class DataGridComboBoxColumn : DataGridColumn

{

public string DisplayMemberPath { get; set; }

public IEnumerable ItemsSource { get; set; }

public virtual BindingBase SelectedItemBinding { get; set; }

public virtual BindingBase SelectedValueBinding { get; set; }

public string SelectedValuePath { get; set; }

public virtual BindingBase TextBinding { get; set; }

}

The three mechanisms to hook up the binding are:

· SelectedItemBinding

· SelectedValueBinding

· TextBinding

These three bindings basically map to the cell’s content being bound to ComboBox.SelectedItem, ComboBox.SelectedValue, or ComboBox.Text respectively. SelectedValuePath and DisplayMemberPath are convenience methods on a ComboBox control and apply to ComboBox.SelectedValuePath and ComboBox.DisplayMemberBinding respectively. Overall, you can think of these APIs as convenience methods that apply to the ComboBox element of the cell. Let’s go through some use cases.

Some examples

When the column is bound to a primitive data type such as int, string, or bool, and you want the ComboBox to have a list of similar items to choose from, you can use SelectedItemBinding like so:

<dg:DataGridComboBoxColumn SelectedItemBinding="{Binding ShipCity}">

<dg:DataGridComboBoxColumn.ItemsSource>

<col:ArrayList>

<sys:String>Redmond</sys:String>

<sys:String>Bellevue</sys:String>

<sys:String>Seattle</sys:String>

<sys:String>Renton</sys:String>

</col:ArrayList>

</dg:DataGridComboBoxColumn.ItemsSource>

</dg:DataGridComboBoxColumn>

ShipCity is a string type so the ComboBox.SelectedItem maps correctly to the item in the DataGrid’s column.

Let’s say I have a foreign key relationship between an Orders table and a Customers table. Orders contains a CustomerID foreign key and will be the ItemsSource for the DataGrid. I can setup a DataGridComboBoxColumn with Customers being its ItemsSource and hooking up the SelectedValueBinding like so:

<dg:DataGridComboBoxColumn SelectedValueBinding="{Binding CustomerID}"

SelectedValuePath="CustomerID"

DisplayMemberPath="ContactName"

Header="CustomerID (ContactName alias using SelectedValueBinding)"

ItemsSource="{Binding Source={StaticResource customerDataProvider}}">

SelectedValueBinding maps to Orders’ CustomerID, which also maps to Customers’ CustomerID through SelectedValuePath. I use DisplayMemberPath to alias the CustomerID with a more user friendly value to the end user.

You can download the solution to these examples here.

WPF DataGrid and the WPFToolKit have released!

vinsibal — Wed, 22 Oct 2008 17:10:00 GMT

Finally, the v1 WPF DataGrid is out! This is an out-of-band release that will be hosted on the WPF CodePlex site and integrated into the WPF Framework in vNext. You can download the bits as well as the source code here. You also may be pleased to hear that included with the WPFToolKit are other controls and features such as DatePicker, Calendar, and VSM! For any questions/feedback/issues you may have you can post them on the WPF CodePlex discussion list. Also, be sure to check our Tips & Tricks section on the CodePlex site for more resources and help.

So what’s new in the v1 WPF DataGrid? Here are some of the features that were not in the CTP:

· Row Validation

· Row Details

· Row Resizing

· Hidden Columns

· Column virtualization

· Read-only columns and cells

· Make-over of DataGridComboBoxColumn

· Design experience for the DataGrid in Cider and Blend

· UIAutomation support

· Star column width redesign

· Lots of bug fixes

There is a walkthrough of the feature set on windowsclient.net here and a hands-on lab that you can do here. I have updated the CTP Sample to include the new features. You can bind to all of the DataGrid and DataGridColumn properties in real-time and I also included samples for DataTable and Linq to SQL scenarios. You can download the sample here.

I also plan to update all my previous posts and samples with the updated bits. For better organization, I have made additional tags for DataGrid sample and DataGrid concepts. If you have any feedback or particular samples that you would like to see please let me know. Stay tuned for addtional material on the DataGrid, VSM, and more.

Breaking changes and how to update CTP code to v1

1. Update the xaml namespace from: xmlns:dg="clr-namespace:Microsoft.Windows.Controls;assembly=WpfToolkit" To: xmlns:dg=http://schemas.microsoft.com/wpf/2008/toolkit

2. Update the 'DataFieldBinding' property to 'Binding'

3. Update DataGridComboBoxColumn.DataFieldBinding to DataGridComboBoxColumn.SelectedItemBinding

4. Include this namespace in code behind, using Microsoft.Windows.Controls.Primitives;

Pasting content to new rows on the WPF DataGrid

vinsibal — Thu, 25 Sep 2008 17:59:00 GMT

On a previous post I talked about how to implement Clipboard.Paste for the DataGrid. The functionality was such that you could only paste to existing rows and cells. I got a customer request on how to paste to new rows so I thought I’d capture it here.

If you want to be able to paste to new rows, you just need to call IEditableCollectionView.AddNew before pasting to that row and optionally update selection. Here is the updated OnExecutePaste code to the previous sample,

protected virtual void OnExecutedPaste(ExecutedRoutedEventArgs args)

{

// parse the clipboard data

List<string[]> rowData = ClipboardHelper.ParseClipboardData();

bool hasAddedNewRow = false;

// call OnPastingCellClipboardContent for each cell

int minRowIndex = Items.IndexOf(CurrentItem);

int maxRowIndex = Items.Count - 1;

int minColumnDisplayIndex = (SelectionUnit != DataGridSelectionUnit.FullRow) ? Columns.IndexOf(CurrentColumn) : 0;

int maxColumnDisplayIndex = Columns.Count - 1;

int rowDataIndex = 0;

for (int i = minRowIndex; i <= maxRowIndex && rowDataIndex < rowData.Count; i++, rowDataIndex++)

{

if (CanUserPasteToNewRows && CanUserAddRows && i == maxRowIndex)

{

// add a new row to be pasted to

ICollectionView cv = CollectionViewSource.GetDefaultView(Items);

IEditableCollectionView iecv = cv as IEditableCollectionView;

if (iecv != null)

{

hasAddedNewRow = true;

iecv.AddNew();

if (rowDataIndex + 1 < rowData.Count)

{

// still has more items to paste, update the maxRowIndex

           maxRowIndex = Items.Count - 1;
          }
        }

}

else if (i == maxRowIndex)

{

continue;
}

int columnDataIndex = 0;

for (int j = minColumnDisplayIndex; j < maxColumnDisplayIndex && columnDataIndex < rowData[rowDataIndex].Length; j++, columnDataIndex++)

{

DataGridColumn column = ColumnFromDisplayIndex(j);

column.OnPastingCellClipboardContent(Items[i], rowData[rowDataIndex][columnDataIndex]);

}

// update selection

if (hasAddedNewRow)

{
UnselectAll();

UnselectAllCells();

CurrentItem = Items[minRowIndex];

if (SelectionUnit == DataGridSelectionUnit.FullRow)

{

SelectedItem = Items[minRowIndex];

}

else if (SelectionUnit == DataGridSelectionUnit.CellOrRowHeader || SelectionUnit == DataGridSelectionUnit.Cell)

    {
      SelectedCells.Add(new DataGridCellInfo(Items[minRowIndex],   Columns[minColumnDisplayIndex]));
    }
}

}

So with this new logic you can paste a set of rows starting at the NewItemPlaceholder and it will create a set of new rows where all the content will be pasted. For the selection logic, I just made it pretty basic and didn’t really enforce any specific requirements. Other than that, I just added one DP, CanUserPasteToNewRows, just to turn it on and off for this example. Here is the updated solution.

WPF DataGrid - Clipboard Paste Sample

vinsibal — Fri, 19 Sep 2008 17:55:00 GMT

In the v1 release (and CTP) of the WPF DataGrid there will be support for Clipboard.Copy but no support out of the box for Clipboard.Paste. However, there is extensibility support for Clipboard.Paste which I will show how to implement in this post.

In DataGridColumn.cs an additional API, OnPastingCellClipboardContent, exists so you can add pasting functionality to each DataGridCell. A similar API, OnCopyingCellClipboardContent, also exists and behaves the same way except it is used from copying content. OnPastingCellClipboardContent has two parameters; item, which is the particular data item in the list of DataGrid.Items to update, and cellContent, which is the actual content to add to the cell itself.

So with that in mind, what I need to do is get the content currently on the clipboard, parse the data, and then call OnPastingCellClipboardContent for each cell. I’m also going to setup a command that is similar to the Copy command and I’ve decided to subclass DataGrid. Here is the code for creating the command:

public class CustomDataGrid : DataGrid

{

static CustomDataGrid()

{

CommandManager.RegisterClassCommandBinding(

typeof(CustomDataGrid),

new CommandBinding(ApplicationCommands.Paste,

new ExecutedRoutedEventHandler(OnExecutedPaste),

new CanExecuteRoutedEventHandler(OnCanExecutePaste)));
}

…

}

In the copy scenario, the OnCanExecuteCopy only fires if you have selected cells. For the onCanExecutePaste scenario I want it to be such that you can paste content as long as any particular cell is selected. So in my OnCanExecutePaste method, I only need the CurrentCell to not be null.

protected virtual void OnCanExecutePaste(CanExecuteRoutedEventArgs args)

{

args.CanExecute = CurrentCell != null;

args.Handled = true;

}

Before getting into OnExecutePaste, I want to talk just a little bit about the parsing stuff. I created a simple parser for CSV and Text format. The algorithms are pretty straightforward so I’m not going to show them here. The parser should work when copying data from the WPF DataGrid as well as copying Excel data to the WPF DataGrid. For Excel data I’m using the Text parser. What the parser returns is a list of a list which basically represent the rows and cells of a DataGrid.

So in my OnExecutePaste method, I am going to iterate through the set of cells starting at the CurrentCell. It is possible that the set of content to be pasted is more than the set of cells to paste them in or visa-versa. So I need to keep track of the max rows and columns that can be pasted to as well as the max data that can be placed in the cells. Here is the code snippet:

protected virtual void OnExecutedPaste(ExecutedRoutedEventArgs args)

{

// parse the clipboard data

List<string[]> rowData = ClipboardHelper.ParseClipboardData();

// call OnPastingCellClipboardContent for each cell

int minRowIndex = Items.IndexOf(CurrentItem);

int maxRowIndex = Items.Count - 1;

int minColumnDisplayIndex = (SelectionUnit != DataGridSelectionUnit.FullRow) ? Columns.IndexOf(CurrentColumn) : 0;

int maxColumnDisplayIndex = Columns.Count - 1;

int rowDataIndex = 0;

for (int i = minRowIndex; i < maxRowIndex && rowDataIndex < rowData.Count; i++, rowDataIndex++)

{

int columnDataIndex = 0;

for (int j = minColumnDisplayIndex; j < maxColumnDisplayIndex && columnDataIndex < rowData[rowDataIndex].Length; j++, columnDataIndex++)

{

DataGridColumn column = ColumnFromDisplayIndex(j);

column.OnPastingCellClipboardContent(Items[i], rowData[rowDataIndex][columnDataIndex]);

}

I did make one condition when SelectionUnit is equal to FullRow. For that scenario when users copy a full row and paste to another full row the column index should not matter as their intention is to paste the entire row to the new row. So for that I set minColumnDisplayIndex to 0.

You can check out the full sample here. For more information on clipboard paste see this post which is another sample.

Other DataGrid Samples:

ScrollViewer with ToolTip

Custom sorting, column selection, single-click editing

Tri-state sorting

Styling rows and columns based on header conditions

WPF DataGrid – Styling rows and columns based on Header conditions and other properties

vinsibal — Tue, 16 Sep 2008 18:03:00 GMT

There have been several questions on the WPF CodePlex discussion list relating to styling rows and columns based some requirements on other elements or some other conditions. I decided to put a couple examples here on different ways you can accomplish this.

Adding a trigger to a CellStyle based on a column condition

From a DataGridCell, you can access the column that it belongs to through DataGridCell.Column. With that you set a trigger based on a DataGridColumn property or a derived DataGridColumn property. Here is an example of a trigger that sets the background of a DataGridCell to LightGray of the column is frozen.

<Style.Triggers>

</DataTrigger>

</Style.Triggers>

</Style>

Updating CellStyle based on a condition in the column header

From a DataGridColumnHeader, you have access to the column through DataGridColumnHeader.Column. This gives you access to all the DPs on the DataGridColumn which includes DataGridColumn.CellStyle. With that you can update the CellStyle based on some condition that you set. Let’s say I have a checkbox in the DataGridColumnHeader template and when checked I want to highlight the entire column. Here is a possible solution:

<Setter.Value>

</StackPanel>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

With the CellBackgroundConverter I can choose a particular CellStyle based on the IsChecked property. Each CellStyle would set the background to a different value.

Updating cell properties based on a condition in a derived column

An alternative to the converter example above is to update cell properties based on a derived DataGridColumn condition that you create. Let’s say I create a custom column that derives from DataGridColumn and has a property called IsHighlighted. I want to use the CheckBox in my DataGridColumnHeader to highlight the column like before. Since the DataGridColumnHeader has access to the DataGridColumn, you can also set bindings on derived DataGridColumn properties. From the DataGridColumnHeader, I can bind that CheckBox to the IsHighlighted property and use that to highlight the column instead of a converter. Here is an example:

<Setter.Value>

</StackPanel>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

I set the Mode to OneWayToSource as I only care that local:CustomColumn.IsHighlighted is updated which I mark the CheckBox as checked. With that I can use a trigger in the DataGridCell based on the derived column property.

<Style.Triggers>

</DataTrigger>

</Style.Triggers>

</Style>

Updating RowStyle based on a condition from the row header

From a DataGridRowHeader, you have direct access to the DataGridRow as it is an ancestor in the visual tree. So all you need to do is find the DataGridRow and update its style. Here is an example which is similar to the CellStyle example:

<Setter.Value>

</StackPanel>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

Since I have direct access to the DataGridRow, I can set the Path directly on Background if I wanted to. However, I wanted to update a couple properties so I update the Style instead.

Caveat: One thing to note about doing this however is item container recycling. If you leave it on you will see some side effects. Basically as you scroll rows in and out of view they will lose the checked state. Ways you can avoid this is either to turn recycling off or keeping state yourself and overriding the ItemsControl.PrepareContainerForItemOverride to update the row.

Updating cell properties based on Database related properties

Let’s say that you want to signal that a column is the primary key or allows null values or is a particular value type. For the signal, I will set the cell backgrounds like I have been in previous examples. Since the cell has access to the DataGridColumn, I can create a derived property on the DataGridColumn and bind to that in the DataGridCell’s Style:

Setting up the binding is a little tricky however. I decided to set the property directly in the AutoGeneratingColumn event. For a non-auto-generating scenario you would need a converter on the binding to IsPrimaryKey to find the correct source to bind to. Anyway, for the auto-generating scenario, I copy the properties from DataGridColumn to set to my CustomColumn then search the MetaTable to find if the column is a primary key (I’m using linq to sql in this example).

private void DataGrid_Standard_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)

{

CustomColumn customColumn = new CustomColumn();

customColumn.CanUserSort = e.Column.CanUserSort;

customColumn.Header = e.Column.Header;

customColumn.DataFieldBinding = (e.Column as DataGridBoundColumn).DataFieldBinding;

DataGrid dg = sender as DataGrid;

Table<Order> orderTable = dg.ItemsSource as Table<Order>;

MetaModel metaModel = orderTable.Context.Mapping.MappingSource.GetModel(orderTable.Context.GetType());

MetaTable metaTable = metaModel.GetTable(typeof(Order));

foreach (MetaDataMember identityMember in metaTable.RowType.IdentityMembers)

{

if (identityMember.MappedName == e.Column.Header.ToString())

{

customColumn.IsPrimaryKey = true;

break;
}
}

e.Column = customColumn;

}

The full solution of examples is attached.

More Related Material:

DataGrid Intro

Stock and Template Columns

Dissecting the Visual Layout

Working with DataGridComboBoxColumn (Part1)

Working with DataGridComboBoxColumn (Part2)

Overview of the editing features in the DataGrid

Other DataGrid Samples:

ScrollViewer with ToolTip

Custom sorting, column selection, single-click editing

Tri-state sorting

Clipboard Paste

WPF DataGrid: Tri-state Sorting sample

vinsibal — Fri, 29 Aug 2008 18:59:00 GMT

Here is a short sample on how to create a tri-state sorting experience with the WPF DataGrid. In the current design, when clicking on a column header it will toggle sorting of the column starting from ascending to descending. Unfortunately you cannot get back to the original state without adding your own custom logic for it. To get back to the original state you have to set the column.SortDirection back to null and clear out the SortDescriptions that were added when you click on the column header. In this sample I decided to add one more toggle state so when you click on the column header a third time it goes back to the original state. I’m adding this functionality to the DataGrid.Sorting event and stop the default sort if the toggle state is going back to the original state. Here is the code:

private void DataGrid_Standard_Sorting(object sender, DataGridSortingEventArgs e)

{

DataGrid dataGrid = sender as DataGrid;

string sortPropertyName = Helpers.GetSortMemberPath(e.Column);

if (!string.IsNullOrEmpty(sortPropertyName))

{

// sorting is cleared when the previous state is Descending

if (e.Column.SortDirection.HasValue && e.Column.SortDirection.Value == ListSortDirection.Descending)

{
int index = Helpers.FindSortDescription(dataGrid.Items.SortDescriptions, sortPropertyName);

if (index != -1)

{
e.Column.SortDirection = null;

// remove the sort description

dataGrid.Items.SortDescriptions.RemoveAt(index);

dataGrid.Items.Refresh();

if ((Keyboard.Modifiers & ModifierKeys.Shift) != ModifierKeys.Shift)

{
// clear any other sort descriptions for the multisorting case

dataGrid.Items.SortDescriptions.Clear();

dataGrid.Items.Refresh();
}

// stop the default sort

e.Handled = true;

}
}
}

}

I also decided to add some extra functionality for displaying the sort order of the column when doing multi-column sorting. By default when you do multi-column sorting you really have no idea which column is sorted in which order as it only shows that direction triangle. I just add text to the header but you can always get creative and add all that WPF eye candy. Here is a screenshot:

The full sample is here.

Other DataGrid Samples:

ScrollViewer with ToolTip

Custom sorting, column selection, single-click editing

Styling rows and columns based on header conditions

Clipboard Copy

WPF DataGrid: Working with DataGridComboBoxColumns CTP (Part 2)

vinsibal — Thu, 28 Aug 2008 16:15:00 GMT

UPDATE: DataGridComboBoxColumn has been updated from CTP to V1. See the post here for the updates to the DataGridComboBoxColumn as well as an updated sample.

Previously I started a post on DataGridComboBoxColumns where I introduced the APIs specific to it and showed an example of how to use it. Well, one thing I didn't show that seems to be a common ask is how to mask what is displayed versus what is actually being updated. Let’s say I have a CustomerID that I want to display as before with a DataGridComboBoxColumn but I want the display values to be a little more user friendly. For the ComboBox (editing state) I can use DisplayMemberBinding for the display value and SelectedValuePath for the actual value but for the TextBlock (non-editing state) I don't have anything that can map the CustomerID to something else. Let’s take a look at a couple solutions.

One solution could be using a converter on the DataFieldBinding to transform the CustomerID to some other alias. Remember though in our example, the overall table (Orders) that the DataGrid is displaying is different that the table that the ComboBox is using (Customers). So in your converter you may need to optimize the calls to get the Customer table. I have excluded that from the example as that is a separate topic of discussion.

<dg:DataGridComboBoxColumn

DataFieldBinding="{Binding CustomerID,

Converter={StaticResource CustomerConverter},

ConverterParameter=ContactName}"

ItemsSource="{Binding Source={StaticResource customerDataProvider}}"

Header="CustomerID (ContactName alias)"

DataFieldTarget="Text">

<dg:DataGridComboBoxColumn.EditingElementStyle>

</Style>

</dg:DataGridComboBoxColumn.EditingElementStyle>

</dg:DataGridComboBoxColumn>

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

string customerID = (string)value;

DataTable dataTable = DBAccess.GetCustomers().Tables["Customers"];

foreach (DataRow row in dataTable.Rows)

{

if (row["CustomerID"].ToString() == customerID)

return row[parameter.ToString()];

}

return null;

}

The converter is returning a string value and remember that the DataFieldTarget is what maps the ComboBox value back to the DataFieldBinding, so I have set the DataFieldTarget to “Text”. Also, as the DisplayMemberPath and ConverterParameter show, I am using the ContactName as the alias.

Another solution which is very similar to the first one is to use the converter as I did above but with a DataGridTemplateColumn. There really isn’t a big advantage going with a DataGridTemplateColumn over a DataGridComboBoxColumn in this particular example, but it does give you more flexibility on the type of element to display in the non-editing state. Anyway, here is an example:

<dg:DataGridTemplateColumn Header="CustomerID (ContactName alias)">

<dg:DataGridTemplateColumn.CellTemplate>

</DataTemplate>

</dg:DataGridTemplateColumn.CellTemplate>

<dg:DataGridTemplateColumn.CellEditingTemplate>

<ComboBox ItemsSource="{Binding Source={StaticResource customerDataProvider}}"

SelectedValue="{Binding CustomerID}" SelectedValuePath="CustomerID" DisplayMemberPath="ContactName" />

</DataTemplate>

</dg:DataGridTemplateColumn.CellEditingTemplate>

</dg:DataGridTemplateColumn>

One thing to note about this example is what is bound to what. In CellTemplate, the TextBlock is using DataGrid’s DataContext and is bound to the CustoemrID field of the Orders table. In CellEditingTemplate, the ComboBox is using the Customer table as the Source for the ItemsSource but the DataContext is still the DataGrid for everything elese. That means that SelectedValue’s binding to CustomerID is based on the CustomerID of the Orders table and that binding is the one that will update the source.

A third and a little more time consuming approach would be to subclass DataGridComboBoxColumn and add a property for the display. If you take a look at the DataGridHyperlinkColumn it actually has a special API for something like this which is ContentBinding. ContentBinding maps the content it is bound to what gets displayed as the link in the cells of that column. However, there is still a DataFieldBinding which maps to the actual hyperlink that it represents.

Here is a sample for the first two solutions.