Introducing a new XamDataGrid Behavior: DisplayAdorningEditors

This blog post reviews a technique that can vastly reduce the amount of screen real estate required to display your application’s data in XamDataGrid.

Introduction

In my previous post on this blog, I showed how to display an extra field of data in the adorner layer, instead of putting it into a XamDataGrid cell.  Since writing that post, I have spent the entire weekend blissfully working on and expanding that core concept.  I managed to extract all of the plumbing code that hosts an editor in the adorner layer into a reusable class.  I also vastly enhanced and thoroughly tested this functionality.  In this blog post, I am proud to present the fruit of my labor: a new behavior for XamDataGrid called ‘DisplayAdorningEditors’.

Background

Before going forward, let’s first take a step back and review why I built this behavior.  Most applications have a core subset of data that users refer to most.  When displaying data in a data grid, such as XamDataGrid, it can be tempting to simply display all of the data fields as separate columns in the grid.  This is convenient because it takes less time to set up, but in the bigger picture, this is usually not a good idea.  

There are, at least, two problems with this approach.  The user experience degrades because your users must now look at and sift through reams of irrelevant data.  Most people appreciate only seeing what they typically want to see, as long as finding the less frequently needed information is not a challenge.  In addition, either showing large amounts of data fields in a data grid requires the grid to be very wide, in which case it uses up more precious screen real estate, or it requires the dreaded horizontal scrolling (which most UI designers generally deem a bad thing).  

Ideally, you should only display the most relevant data in XamDataGrid, but make it easy for users to find the other, less frequently used information.  This improves the user experience and reduces the amount of screen real estate required by the grid.  My DisplayAdorningEditors behavior for XamDataGrid makes it easy to achieve this worthwhile goal.

Using DisplayAdorningEditors

I created a class called XamDataGridBehavior.  That class can attach a behavior to XamDataGrid.  The attached behavior’s name is DisplayAdorningEditors.  When you attach this behavior to a XamDataGrid, you can specify a control to display in the adorner layer directly next to the active cell in the grid.  In case you are not familiar with WPF’s adorner layer yet, think of it as a pane of glass on top of your UI, in which any visual elements can render, and it is certain that they will draw on top of the UI underneath (“on top of” with regards to the Z axis, not the Y axis).

Setting the DisplayAdorningEditors attached property to true on the XamDataGrid is only half the battle.  You must assign a handler for the RequestAdorningEditor attached event, also exposed by my XamDataGridBehavior class.  Your event handling method is invoked when the DisplayAdorningEditors behavior needs to know what control, if any, to display in the adorner layer for the grid’s active cell (i.e. the value returned by its ActiveCell property).  Be aware, that event is raised quite often, so your application logic should always provide the same control instance(s), instead of new’ing up fresh control instances every time.

You can set this up in XAML, as seen in the following excerpt from the demo application’s ContaxControl user control:

<igDP:XamDataGrid  x:Name="xamDG"
  xmlns:igDP="http://infragistics.com/DataPresenter"
  xmlns:ext="clr-namespace:XamDataGridExtensions;assembly=XamDataGridExtensions"
  ext:XamDataGridBehavior.DisplayAdorningEditors="True"
  ext:XamDataGridBehavior.RequestAdorningEditor="OnRequestAdorningEditor"
  >
  ...
</igDP:XamDataGrid>

Here is that user control’s code-behind file:

public partial class ContaxControl : UserControl
{
    readonly ContactEmailControl _contactEmailControl;
    readonly ContactPhoneNumbersControl _contactPhoneNumbersControl;
    readonly ContactPhotoAndNotesControl _contactPhotoAndNotesControl;

    public ContaxControl()
    {
        InitializeComponent();

        _contactEmailControl = new ContactEmailControl();
        _contactPhoneNumbersControl = new ContactPhoneNumbersControl();
        _contactPhotoAndNotesControl = new ContactPhotoAndNotesControl();

        _contactEmailControl.Initialize(this.xamDG);
        _contactPhoneNumbersControl.Initialize(this.xamDG);
        _contactPhotoAndNotesControl.Initialize(this.xamDG);

        base.DataContext = Contact.CreateContacts();
    }

    void OnRequestAdorningEditor(object sender, RequestAdorningEditorRoutedEventArgs e)
    {
        switch (e.AdornedCell.Field.Name)
        {
            case "DisplayName":
                e.AdorningEditor = _contactPhotoAndNotesControl;
                break;

            case "CellPhone":
                e.AdorningEditor = _contactPhoneNumbersControl;
                break;

            case "PersonalEmail":
                e.AdorningEditor = _contactEmailControl;
                break;

            default:
                Debug.Fail("Unexpected Field: " + e.AdornedCell.Field.Name);
                break;
        }

        if (e.AdorningEditor != null)
            e.AdorningEditor.DataContext = e.AdornedCell.Record.DataItem;
    }
}

Another hing to take note of is that your controls hosted in the adorner layer need to have some logic built in that handles keyboard navigation.  Since you can use any type of control as an adorning editor, my attached behavior cannot make any assumptions about how to handle keystrokes aimed at your control.  If you would like to see an example of how to implement this, in the demo application the keyboard interaction logic is in the ContactAdornerControlBase class.

Also, if you want my XamDataGridBehavior class to move focus to your adorning editor control when the user presses Tab, you must set your control's IsTabStop property to true.  If you do not, it is assumed that the user should not be able to navigate into the adorning editor control via the Tab key.

Contax - The Demo Application

The best way to understand what this new behavior can do, and how to use it, is to look at the Contax demo application.  Contax is a very simple application that stores a list of personal contact information.  All of the data is read-only, except for the optional notes about each contact.  The point of this demo is not to see how to build a full-fledge application, but simply to see how to use the DisplayAdorningEditors behavior with XamDataGrid.

This screenshot shows Contax when it first starts up:


The XamDataGrid seen above shows four pieces of information about each contact in the list: gender, name, mobile phone number, and personal e-mail address.  The assumption is that the users of Contax would find that information to be the most pertinent to their average use of the program.  Naturally, deciding on what information is most pertinent for most users requires, for a real application, market research, user acceptance testing, and other related activities.

Now suppose that the user wants to know more about one of the contacts, perhaps Patricia McClellan.  After clicking on Patricia’s cell in the “name” column, the UI discloses more information about her, as seen below:


As seen above, we can now see a photograph, nickname, and notes about Patricia (a.k.a. Trish).  If Trish’s photo, nickname, and notes were displayed as separate columns in the data grid, the grid’s width would be considerably larger, and the users would have to look at information that they probably don't care about too often.

At this point, the user decides to give Steven Rottingham a call.  She first calls his mobile phone, but Steven does not answer, so she decides to call his office phone instead.  To find Steven’s office number, the user clicks on the cell in the “mobile #” column to bring up a list of all phone numbers associated with Steven.  Here’s what that looks like:


Now the user decides to send Joe Barkley an e-mail, so she opens his list of e-mail addresses to find the right one.  After deciding which address to send the message to, she clicks the button next to that address and her default e-mail client opens up with that address in the To field.

 

If the user were to shorten the Contax window, and then click on Michelle’s name, the adorning editor displays above Michelle’s row, since there is not enough room to display it underneath. 


Download

You can download the source code and demo application here (4.27 MB).  The solution compiles in Visual Studio 2008 against NetAdvantage for WPF v8.1.


Tags /

Comments  (14 )

Ajay_Sungard
on Thu, Jun 11 2009 5:12 AM

Hi Josh,

I have to create adorning editor for one of fields in my application. My screen area is divided into multiple dockable panels. And XamDataGrid is in one of these dockable panels. If dockable panel is at the bottom and adorning editor is shown, it does scale to complete area of screen because of dockable panel is docked at the bottom  of screen. Do you have any solution for this problem? I am experimenting with showing adorning editors as Popup instead of pushing editors in adorning layer of XamDataGrid.

Ajay

Ajay_Sungard
on Thu, Jun 11 2009 5:33 AM

Hi Josh,

I have to create adorning editor for one of fields in my application. My screen area is divided into multiple dockable panels. And XamDataGrid is in one of these dockable panels. If dockable panel is at the bottom and adorning editor is shown, it does not scale to complete area of screen because of dockable panel is docked at the bottom  of screen. Do you have any solution for this problem? I am experimenting with showing adorning editors as Popup instead of pushing editors in adorning layer of XamDataGrid.

Ajay

nteck
on Thu, Feb 25 2010 7:22 AM

Hi,

How I can to display this popup on  double click?

Turntwo
on Wed, Mar 3 2010 12:32 AM

If you remove the control that hosts the XamDataGrid (i.e. from a TabControl on Close), then the gridToAdorningEditorManagerMap continues to hold a reference to a XamDataGrid, which prevents the host control from being garbage collected.  You need to set the DisplayAdorningEditors to false if when you remove the control if you want the control to go away.

Ryan
on Wed, Mar 10 2010 12:13 AM

Hi Josh,

Thank you your post was really useful on my current project that has a wpf desktop application using Infragistics controls. Of course like any sample it only got us 65% there. This is going to have different adorning summaries that changed depending on if the user has 0, 1, or more rows selected. It was a a few hours to figure out how adorners and the sample worked then sub class the extender to allow for fixed adorners as well as adorning editors. Anyway the example was so helpful compared to everything else I felt compelled to give back.  But atlast.. I couldn't upload it under the Infragistics site personal files.. to big 4.4mb.

Thanks again.

Ryan
on Wed, Mar 10 2010 9:36 AM

I tried adding an adorner extended grid into a custom control and am having issues with the root resource dictionary supporting the RequestAdorningEditor event.. It wants a x:Class attr defined.  

Any suggestions?

dcabral
on Thu, Jan 6 2011 9:54 AM

I can't get tabbing to work inside my popup control.

mahaffey
on Tue, Jan 18 2011 1:41 PM

Is there an easy way to dismiss the dialog box without changing focus?

ralexander
on Tue, Apr 12 2011 1:50 PM

I'm getting and exception "DisplayAdorningEditors can only be set on a XamDataGrid" after upgrading to the latest service release.  Any ideas what's causing this?

rrahl2
on Sat, Apr 30 2011 11:25 AM

My adorner is a series of check boxes and as the user checks/unchecks the underlying cell is updated with a description.  I can't see the cell value until I move off the record.  I've tried updating the underlying datasource but the cell doesn't display until I move off the records.  I tried setting the datasource to nothing and resetting it and the cell displays - but then my adorner is gone.

How can I programmatically change the cell to that it's displayed and updated to its bound source?

gspurnima
on Tue, Feb 28 2012 1:16 AM

Hi,

Is it possible to display this adorning editor while clicking the header in the xamdatagrid?

XAML Land
on Thu, Mar 1 2012 12:13 PM

Quite some time ago, Josh Smith wrote a post on how to adorn the cells of the XamDataGrid. I like the

aa_afolabi
on Fri, Apr 27 2012 8:15 AM

I'm getting and exception "DisplayAdorningEditors can only be set on a XamDataGrid" after upgrading to the latest service release. I see someone else had a similar problem almost a year ago. Is there a resolution to this?

Rajib Banerjee
on Mon, Oct 27 2014 12:17 PM

Can you redo this sample for Infragistics v14.1 as it is not compiling for me ?