416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
This is the support page for the legacy Dundas Dashboard application. For assistance with the current Dundas BI application please click here.
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Color Data Grid Cells

Hide navigation
Modified on Fri, 28 Feb 2014 05:34 PM


You can color each individual cell in the Data Grid control dynamically based on the data within it. This functionality helps the user get a better understanding of the presented data and to immediately become aware whether a piece of datum is good or not so good.

In this sample, we use the dataset that is showing Volume by State, Region, Capital and Date. Each cell in the Sales Amount column is colored green if the value is larger than 3,500, and each cell in the Sales Quantity column is colored red if the value is larger than 50.

View Demo

Cells are colored according to the value inside each cell.

Cells are colored according to the value inside each cell.

Tip: You can also color the cells without scripting using DataGrid Cell Style Rules.


Setting up the Dashboard

  1. Create a new dashboard.
  2. Drag the Data Grid control onto the dasboard canvas.
  3. Name the Data Grid control as DataGrid1.
  4. Drag a dataset onto DataGrid1.

Adding the DundasScript™

Add the script ColorCells in Row Loaded Interaction of DataGrid1. You can find this script within the Code tab.

Tip: You can find Row Loaded Interaction event if you click the Advanced Properties button at the top of the properties grid.

Note: You need adapt the column names, the data ranges and the control name within the script in order to work with your data.

Related topics


Script ColorCells in Row Loaded Interaction of DataGrid1:

/****************** User Variables ******************/ //data visualization control name object grid = DataGrid1; //the names of the columns that contain the values(we are using two columns) String setFirstColumnName = "Sale Amount"; String setSecondColumnName = "Sale Quantity"; //colours for the condition within the first column object cellBackColorForSaleAmount = new DashboardSolidColorBrush(Colors.Green); object cellForeColorForSaleAmount = new DashboardSolidColorBrush(Colors.White); //colours for the condition within the second column object cellBackColorForSaleQuantity = new DashboardSolidColorBrush(Colors.Red); object cellForeColorForSaleQuantity = new DashboardSolidColorBrush(Colors.Yellow); /****************************************************/

try { // Check if there is a data point associated with the event if (e.DataPoint != null && e.VisualElementArgs != null) { int columnIndex = 0;

// Loop through columns to color the cells based on column name foreach (object column in grid.Columns) { string columnName = column.ToString(); object dataColumnId = column.DataColumnId;

object cellBackColor = new DashboardSolidColorBrush(Colors.White); object cellForeColor = new DashboardSolidColorBrush(Colors.Black);

// Evaluate the values based on column names if (columnName == setFirstColumnName) { object columnValue = grid.DataDescriptors[0].GetDataPointValueFromColumnId(e.DataPoint, dataColumnId);

if (columnValue > 3500) { cellBackColor = cellBackColorForSaleAmount; cellForeColor = cellForeColorForSaleAmount ; } } else if (columnName == setSecondColumnName) { object columnValue = grid.DataDescriptors[0].GetDataPointValueFromColumnId(e.DataPoint, dataColumnId);

if (columnValue > 50) { cellBackColor = cellBackColorForSaleQuantity; cellForeColor = cellForeColorForSaleQuantity } } e.VisualElementArgs.Cells[columnIndex].Background = cellBackColor; e.VisualElementArgs.Cells[columnIndex].Foreground = cellForeColor;

if (column.Visibility == Visibility.Visible) { columnIndex++; }

} } } catch(Exception ex) { /* Handle exception here */ }

About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.