I generally prefer Telerik controls, but I’ve got a client that uses Developer Express. I recently had a need to synchronize columns in a Developer Express WPF Master/Detail grid. It’s a bit of an unusual circumstance, where we have Master / Detail records that use the same view interface, but found the TreeListControl unable to scale up to the demands of our use cases. The client still wanted the detail grid’s columns to appear to functionally be the same column as the master record’s (with the ability to show/hide the detail).
Thankfully, the Dev Express GridColumn class is a DependencyObject, and all the needed properties are exposed as DependencyProperty’s.
Since the detail grid has the same data interface as the master grid, I was even able to clone the column definitions.
Finally, since this was an MVVM project, I didn’t want the functionality in code-behind, so I abstracted the code for this into a Behavior.
The approach was to bind the Width, Visibility, and VisibleIndex properties of each master grid column to a cloned detail grid column, giving the two entities the appearance of being one functional entity.
Here’s the snippet representing the detail grid definition….
<dxg:GridControl>
<dxg:GridControl.DetailDescriptor>
<dxg:DataControlDetailDescriptor ItemsSourceBinding="{Binding Details}">
<dxg:GridControl x:Name="DetailsGrid" AutoGenerateColumns="None" ColumnsSource="{StaticResource ColumnsCollection}" >
<dxg:GridControl.View >
<dxg:TableView AutoWidth="False"
AllowCascadeUpdate="False"
AllowFixedGroups="True"
ShowGroupPanel="False"
CellStyle="{StaticResourceDefaultCellStyle}"
NavigationStyle="Row"
ShowGroupedColumns="True"
AllowGrouping="True"
AllowEditing="False"
AllowScrollAnimation="False"
ShowFixedTotalSummary="False"
AllowHorizontalScrollingVirtualization="True"
HorizontalScrollbarVisibility="Auto"
RowStyle="{StaticResource RowStyle}"
AlternateRowBackground="{x:Static dxRes:DevExpressResources.AlternateRowBackgroundBrush}"
UseLightweightTemplates="None"
ShowColumnHeaders="False"
/>
</dxg:GridControl.View>
<i:Interaction.Behaviors>
<local:SyncDetailGridColumnsBehavior/>
</i:Interaction.Behaviors>
</dxg:GridControl>
</dxg:DataControlDetailDescriptor>
</dxg:GridControl.DetailDescriptor>
</dxg:GridControl>
using System.Windows.Data;
using System.Windows.Interactivity;
using DevExpress.Xpf.Grid;
namespace Local
{
public class SyncDetailGridColumnsBehavior : Behavior<GridControl>
{
private GridColumnCollection_parentGridColumns;
private GridColumnCollection_detailsGridColumns;
protected override void OnAttached()
{
_detailsGridColumns = AssociatedObject.Columns;
_parentGridColumns = AssociatedObject.ResolveParentColumnCollection();
InitializeMasterDetailGrid();
}
private void InitializeMasterDetailGrid()
{
_detailsGridColumns.CloneColumnsAndBindWidthsFrom(_parentGridColumns);
}
}
internal static class ColumnHelpers
{
public static GridColumnCollectionResolveParentColumnCollection(this GridControl associatedObject)
{
var result =
((DevExpress.Xpf.Grid.GridControl)
((System.Windows.FrameworkContentElement) associatedObject.Parent).Parent).Columns;
return result;
}
public static voidCloneColumnsAndBindWidthsFrom(this GridColumnCollection targetGridColumns,
GridColumnCollection sourceGrid)
{
targetGridColumns.Clear();
foreach (var aSourceColumn in sourceGrid)
{
var aClonedColumn = aSourceColumn.Clone();
aSourceColumn.BindWidths(aClonedColumn);
aSourceColumn.BindPositions(aClonedColumn);
targetGridColumns.Add(aClonedColumn);
}
}
public static GridColumn Clone(this GridColumn source)
{
return new GridColumn()
{
Name = source.Name,
Width = source.Width,
Binding = source.Binding,
Header = source.Header,
Style = source.Style,
CellStyle = source.CellStyle,
CellTemplateSelector = source.CellTemplateSelector,
CellTemplate = source.CellTemplate,
};
}
public static void BindWidths(this GridColumn source, GridColumn bindingPartner)
{
source.SetBinding(BaseColumn.WidthProperty,
new Binding(“ActualWidth”)
{
Source = bindingPartner,
Mode = BindingMode.OneWay,
UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
});
bindingPartner.SetBinding(BaseColumn.WidthProperty,
new Binding(“ActualWidth”)
{
Source = source,
Mode = BindingMode.OneWay,
UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
});
}
public static void BindPositions(this GridColumn source, GridColumn bindingPartner)
{
source.SetBinding(BaseColumn.VisibleIndexProperty,
new Binding(“VisibleIndex”)
{
Source = bindingPartner,
Mode = BindingMode.TwoWay,
UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
});
}
public static void BindVisibility(this GridColumn source, GridColumn bindingPartner)
{
source.SetBinding(BaseColumn.VisibleProperty,
new Binding(“Visible”)
{
Source = bindingPartner,
Mode = BindingMode.TwoWay,
UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged
});
}
}
}
I expect this to cover 90% of our needs, the other 10% has to do with row selection across master/detail boundaries, but that’s a story for another day.
In the meantime, let me know how this makes ya feel… leave a comment, below.
Thanks!
I ran across this article from Forbes on LinkedIn. It’s an interesting bit about how Kroger is reacting to the threat that Amazon/Whole Foods suddenly represents in its market segment.