This post is kind of a follow up, part two if you will, on integrating the XamSparkline – a XAML cross-platform control part of both NetAdvantage for WPF and Silverlight Data Visualization packages – into Infragistics grids’ cells.

If this is your first meeting with this neatly fitting, data-intensive control - make sure you start with Atanas Dyulgerov’s Introduction to the Infragistics Sparkline Control blog post. And if you missed my first post, you can click to read about integrating the Sparkline in a XamGrid.

With that said, you should be aware it’s no pain to incorporate the XamSparkline in a XamGrid which made for a quite easy implementation with code that is even easier to transfer between platforms. And even so, this is far from enough. We now turn attention to those who went “But we already have a huge project with the XamDataGrid instead!” or “We just like the other grid better, have you forgotten about it?”. And we hear you – as it will now be demonstrated it’s not much of an issue to use the Sparkline in the WPF-Only data grid, too.

Seeing as this is the second blog post on that subject I would like to remind of our little scenario – the goal is display hierarchical data, but in the same time provide extremely important information from the child records in the parent row for very quick reference and to do that we settled on using visual representation (the XamSparkline) to provide the users with the ability to instantly spot odd values or trends. And again there is a teaser screenshot:

This time we would provide freight expenses for each customer with the idea that the user should be able to see any too sudden changes in their orders.

Preparations

Once more - no difference when it comes to the products – a combination of NetAdvantage for WPF Line of Business and Data Visualization, which essentially means you will need at least trial versions of both.

In terms of data, as the finer points of the XamDataGrid and not the focus of this post, we can again rely of the Help Topics to provide fast-starter solution with the SampleDataUtil class. You can pick between C# and VB.NET implementations of this class and it will give you easy data access, only assuming you have the Northwind sample database. Should a different method be required or just better suits your taste, you can always find information on Accessing Data using the XamDataGrid Help Topics.

As always a list of assemblies and namespaces to be added to your project. In you XAML add the following namespaces:

First one is where all the shared XAML controls from Infragistics are (including the XamSparkline) and the second one as it’s name suggests – is for the XamDataGrid, which is a part of the xamDataPresenter™ control family.

Then come the assemblies to reference - starting with the base InfragisticsWPF4.v11.2.dll, then InfragisticsWPF4.Editors.v11.2.dll and InfragisticsWPF4.DataPresenter.v11.2.dll required by the data Grid and finally the InfragisticsWPF4.Controls.Charts.XamSparkline.v11.2.dll for the sparkline itself.

When that is done you are ready to add a XamDataGrid to your XAML and also add a handle for the Windows’s Loaded event while at it:

Now in the code behind once the Window is loaded we will provide data to the grid using the functionality provided for us by the data access class mentioned earlier. Since I have Northwind on my SQLExpress instance, the parameter to pass would be set to that with the standard “.\” which is the equivalent of localhost:

Now to we would need to add a custom column for our sparklines  and of course provide them with data. In my case the data doesn’t have a field with a value collection so I will make myself one, but in case you have data that is already fit to be presented by the chart control – by all means, feel free to skip the next part.

As you may have noticed in the definition above there is a handle defined for the InitializeRecord event. We will use that to go through the records and provide data for the cells where the sparkline would be. But first we will add that custom column to the XamDataGrid, which in our case would be an Unbound Field added to the grid’s layouts :

The name of the field is ‘Chart’ and we can now use that to set its data in code upon row initializations:

At this point you should have an application with hierarchical XamDataGrid with an extra column in the parent rows containing a set of freight values. Now what is left to do is to turn those cells into XamSparkline controls!

Adding the Sparkline

The basic idea behind this is that the values for each cell have display objects called Cell Value Presenters and you can override their template. What would then be left is to set it to a Control Template with a Sparkline and bind it to the cell’s value. That of course might require a converter, so you can start by adding that in a new class implementing the IValueConverter interface. In it we’ll parse the string values to integers and return a list with their values. This is how the code for that looks like:

And the next logical step would be to add that as a resource in a proper scope in your XAML, like so:

The Item source of the XamSparkline will be bound to its templated parent which in our case is the Cell Value Presenter and this is why the passed value to the converter above is treated as such. It’s all very convenient as it not only provides a Record object, whose index we can check in order to skip the header (-1) row, but also exposes a Cells collection for us to grab values from.

Now once you have that final piece in place you can override the presenter’s template. You can do that by defining the style as a resource or within the Unbound field definition, that is up to you and here is the general outline of the style itself – just remember to add a key if you define it as a resource:

This is the full code for the XamDataGrid with all the changes so far (points of interest are marked with comments):

And the end result looks like this:

We have a normal range of up to 50 for freight expenses and you can easily tell that while some hold their values close or even below, there are users such as ‘BERGS’ that have very high values that might need some further investigation.

Conclusion

Again how you define the XamSparkline in the template is up to you – all you need in the proper data, a field to set the template of and an optional converter (depending on your data). Simple as that, you have now seen how to integrate the this control in both the cross-platform XamGrid and the WPF specific XamDataGrid with limited effort and tremendous outcome!

The obligatory calling - check out the Silverlight Data Visualization Samples online or download the local WPF Samples. Also download the demo project where you will find another style setup available(with columns as display type and the nice blue trendline) and since curiosity is such a nice thing to appeal to, here a teaser screenshot for that one too:

 The solution has been cleaned, so make sure assembly references are all in check and build.