• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
Silverlight
  • Product Platforms
  • More
Silverlight
Silverlight Conditional Formatting With The XamWebGrid
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
Silverlight requires membership for participation - click to join
  • Silverlight
  • Auto-Detail Zoom with MapLayers
  • Building the oMovies Browser: Netflix oData using Infragistics NetAdvantage Silverlight Controls
  • Conditional Formatting With The XamWebGrid
  • Custom Commands with Infragistics Silverlight Commanding Framework
  • +Data Display using xamWebMap
  • Displaying AutoCAD drawings using xamWebMap
  • Extension Methods for Navigating the xamDataChart
  • faceOut - A Silverlight Reference Implementation
  • Red vs. Blue: Conditional Formatting in xamWebMap
  • Styling the xamWebGrid Group By Area
  • Using the VirtualCollection for Server-Side xamWebGrid Paging

Conditional Formatting With The XamWebGrid

Introduction

Some poor souls analysts spend their entire days examining numbers in spreadsheets.  Row by row, column by column.  The only job is to spot the number that’s out of place; a professional game of “Where’s Waldo”.  Doesn’t sound that bad, yet..  Let’s raise the stakes and make the data dynamic. That’s right, we’re looking for Waldo, but now he’s allowed to move around, and show up in multiple places at the same time.  With a little UI/UX magic, we can turn this task from impossible to someone’s day job. 

What is Conditional (Value Based) Formatting?

Conditional formatting is a concept where an item is formatted or styled specially based on a condition, much as the term implies.  In a grid, this is usually done based on a the value of the cell, but can many times be more complex than that.  In a typical scenario the background color of a cell is changed based on a certain value.  A value dips below 10, the cell turns red; the value exceeds 100, the cell turns blue.

image  

Figure 1: A grid of stock quotes with conditional formatting applied.

Applying Conditional Formats

CellControlAttached Event

The XamWebGrid allows you to perform conditional formatting through it’s CellControlAttached event, which has some special characteristics.  The CellControlAttached event only fires for cells that are currently in view as a result of the XamWebGrid’s virtualization engine.  The virtualization engine ensures that the grid doesn’t waste CPU cycles and memory on objects that aren’t in view.  The result is a grid that performs just as fast when bound to 10 records or 10,000. 

The CellControlAttached event not only fires when a cell is brought into view, but it also fires when a cell binding is refreshed due to an underlying change in the datasource.  This is where it becomes important that your underlying business objects fire INotifyPropertyChanged events appropriately.

private void WatchGrid_CellControlAttached(object sender, CellControlAttachedEventArgs e)
{
    if(e.Cell.Column.Key=="Bid"){
        if (((double)e.Cell.Value) > ((Stock)e.Cell.Row.Data).SellTrigger )
        {
            e.Cell.Style = Application.Current.Resources['SellStyle'] as Style;
        }
        else
        {
            e.Cell.Style = Application.Current.Resources['NormalStyle'] as Style;
        }
    }
    else if(e.Cell.Column.Key=='Ask'){
        if (((double)e.Cell.Value) < ((Stock)e.Cell.Row.Data).BuyTrigger)
        {
            e.Cell.Style = Application.Current.Resources['BuyStyle'] as Style;
        }
        else
        {
            e.Cell.Style = Application.Current.Resources['NormalStyle'] as Style;
        }
    }

Figure2: CellControlAttached handler, responsible for conditional formatting.

In Figure 2 above, it’s important to note a couple of items.  First, we’re able to access the underlying business object that our grid row is bound to by using e.Cell.Row.Data.  A simple cast is all that is necessary to turn this object pointer into our “Stock” business object.  Second, notice that we’re assigning the e.Cell.Style property from inside of this event.  You could either modify the style through code, or alternatively use a style that is defined in a resource dictionary.  I chose to use a style defined in a resource dictionary (Application.Resources in app.xaml).  The reason this is preferred is to keep your styles and your business logic separate.  This way, if you choose to change the way “SellStyle” looks, you don’t have to open up your .cs file and modify properties through code.

Dynamically Updating the Grid

If you’re used to working in ASP.NET, Silverlight throws you a curveball when it comes to threading.  Windows client developers should be used to fighting with the UI Thread, and marshaling between background threads and the UI threads.  In Silverlight there’s a DispatchTimer you can (and should) use when when working with the UI thread.  It does the Dispatcher.BeginInvoke calls for you, so that you don’t have to manually marshall your objects. 

Using the DispatchTimer, you can set the timer even to fire at any given interval.  Don’t be scared to push the limits here.  In this example I set my timer to fire at 20ms intervals, and the XamWebGrid handled it like a champ. 

public StocksPage()
{
    InitializeComponent();
	//Create a DispatchTimer
	//NOTE: DispatchTimer must be used since we're dealing
	//with the UI Thread.
	DispatcherTimer timer=new DispatcherTimer();
	timer.Interval=new TimeSpan(0,0,0,0,20);
	timer.Tick+=new EventHandler(timer_Tick);
	timer.Start();
}

Random r = new Random();

void timer_Tick(object sender, EventArgs e)
{
    //Update Values based on random generator
    foreach (Stock s in this.Stocks)
    {
        //Don't update indexes (ie. ^DJIA)
        if (!s.Symbol.StartsWith("^"))
        {
            //Rather than updating each cell every time, emulate real conditions
            //by skipping ~30% of our quotes during each update
            if (r.Next(10) > 3)
            {
                //Get our change value, subtract .5 to bring our value scale between -0.5, 0.5
                double change = r.NextDouble() - .5;
                //When our business object properties are changed
                //INotifyPropertyChanged will fire, and the grid will
                //update cells with the new value.
                s.Ask += change;
                s.Bid += change;
            }
        }
    }
}

Conclusion

Building a dynamically updating grid with conditional formatting using the XamDataGrid, is about as easy as you can get.  Using the CellControlAttached event not only enables this scenario, but also ensures peak performance by firing the event only for cells which are visible.

Download Full Source: conditionalformatting.zip

  • Conditional Formatting
  • XamWebGrid
  • Share
  • History
  • More
  • Cancel
Related
Recommended