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 Rows

Hide navigation
Modified on Tue, 28 Jan 2014 11:13 AM


You can color rows of your Data Grid control dynamically based on the data that is within the Data Grid control. This functionality help 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 shows Volume by State, Region, Capital and Date. Rows are colored according to the value in the Sales Amount column - rows with sales amounts smaller than 3,000 are colored red and 3,500 colored green.

View Demo

Rows are colored according to the values in the Sales Amount column.

Rows are colored according to the values in the Sales Amount column.


Setting up the Dashboard

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

Adding the DundasScript™

Add the script ColorRows in Row Loaded Interaction of DataGrid1. You can find the script in 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.

If you want to color the rows on hover or mouse move, then in the Hover Interactions or the Mouse Move Interaction, make the following changes to the code:


e.VisualElementArgs.Background = rowBackColor; // for background e.VisualElementArgs.Foreground = rowForeColor; // for font color With:

e.VisualElementArgs.DashboardDataGridRow.Background = rowBackColor; // for background e.VisualElementArgs.DashboardDataGridRow.Foreground = rowForeColor; // for font color

//Store the current row in a global variable services.Globals"New_Datapoint" = e.VisualElementArgs.DashboardDataGridRow;

When you move to another row and you want to de-color the existing row, then add the following code in the Mouse Move Interaction:

if (e.DataPoint != null && e.VisualElementArgs != null) { if(services.Globals"New_Datapoint" != e.VisualElementArgs.DashboardDataGridRow) { DashboardDataGridRow row = services.Globals"New_Datapoint"; row.Background = null; row.Foreground = null; } }

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


Script ColorRows in Row Loaded Interaction of DataGrid1:

/****************** User Variables ******************/ //data visualization control name object grid = DataGrid1; //the name of the column that contains the value String setColumnName = "Sale Amount"; //we are using two conditions double upperLimit=3500; double lowerLimit=3000; //colours for the "Sale Amount" if > upperLimit object cellBackColorForSaleAmount = new DashboardSolidColorBrush(Colors.Green); object cellForeColorForSaleAmount = new DashboardSolidColorBrush(Colors.White); //colours for the "Sale Amount" if < lowerLimit 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) { object rowBackColor = new DashboardSolidColorBrush(Colors.White); object rowForeColor = new DashboardSolidColorBrush(Colors.Black); // 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; // Evaluate the values based on column names if (columnName == setColumnName) { object columnValue = DataGrid1.DataDescriptors[0].GetDataPointValueFromColumnId(e.DataPoint, dataColumnId); if (columnValue > upperLimit) { rowBackColor = cellBackColorForSaleAmount; rowForeColor = cellForeColorForSaleAmount; break; } if (columnValue < lowerLimit) { rowBackColor = cellBackColorForSaleQuantity; rowForeColor = cellForeColorForSaleQuantity; break; } } } e.VisualElementArgs.Background = rowBackColor; e.VisualElementArgs.Foreground = rowForeColor;

/* If you want to color the rows in a hover over or mouse move interaction, then replace the above two lines with the following:

e.VisualElementArgs.DashboardDataGridRow.Background = rowBackColor; e.VisualElementArgs.DashboardDataGridRow.Foreground = rowForeColor;


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

Related topics

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

Copyright © 2009-2014 Dundas Data Visualization, Inc.