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.

DataGrid with a hyperlink

Hide navigation
RSS
Modified on Thu, 18 Jul 2013 03:31 PM Categorized as Data Grid, Datasets, Design

Overview

This article shows how to set up a hyperlink on one of the columns in a data grid, where on a click interaction will navigate to the desired URL and pass the clicked value as a parameter. In this particular example: we will have a Data Grid with stock names, and symbols. When clicked upon, will navigate to the yahoo's finances page of the stock that was clicked on.

Creating the Data Grid

Assumption: you have already created a simple data grid that has two columns, names and symbols. Looks similar to the following:
Image

To create the functionally part of the Data Grid (ie. hyperlink), while editing the dashboard click on the ellipse button on the data grid, pick interactions, and select Set up Drill-Down
Image

A pop-up will appear. On step 1 (out of 3), select the URL option as to where to navigate to and click next
Image

Step 2 is omitted as it is not applicable to the URL navigation. On Step 3 (out of 3), click Add Parameter Button then in the Input Source (Value) option select the desired column Y-value - in this example it is Symbol Y-value. For the Target Parameter assign an appropriate variable name - in this example it is Symbols. In the URL box type out the desired URL and place the variable into the URL. When navigating, the variable name will be replaced with the value it is containing.
Image

To make the Data Grid more visually appealing, you can hide the unnecessary column (in this example, the symbol column as it is not user friendly). You can also set the column to appear as a hyperlink by underling the text and changing the font color. To do this,
  • In the columns’ property, toggle the visibility property under the Appearance property to hide or show columns
  • In the columns’ property, changing the Cells Text Decorations property under Text from None to Underline will make the text underlined
  • In the columns’ property, expanding the Cell Style under Appearance Property will expose the Font Brush property which controls the color of the text.

The final product can look like the following:
Image

Related Topics

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

Copyright © 2009-2014 Dundas Data Visualization, Inc.