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.

Change the height of a control or canvas dynamically based on the data returned

Hide navigation
Modified on Mon, 05 May 2014 03:54 PM Categorized as Data Controls, Data Grid, Design, Level-Intermediate, Script Library, Scripting


This article shows how to change the height of the DataGrid at run-time based on the number of rows returned in the result set. By default, when the amount of rows exceed the default height set, a scroll bar will be visible that will allow the user to scroll through the rows. This method will expand the grid based on the number of rows loaded and therefore will show all the data to the user without having the need to use the scroll bar.

The DataGrid's height and width are controlled by the Height and Width of the grid. e.g.,

DataGrid.Width = 500; DataGrid.Height= 500;


The the datagrid below shows the case where the number of rows exceed the total height set for the grid. All the rows are loaded but a scroll bar is needed to scroll through the rest of the grid.

Initial grid

Initial grid


Add the following script to the Load Interaction or any of the other interactions depending on the requirements. The script counts the number of datapoints returned and changes the height of the grid based on it:

DashboardDataGrid grid = DataGrid1;

//Count the total number of datapoints double rowcount = grid.DataDescriptors0.DataResult.DataPoints.Count;

//Set the default row height double rowheight = 31;

//Calculate the new height of the grid based on the number of rows double newheight = (rowcount * rowheight) + 50;

if (rowcount > 0) { //Apply the new height grid.Height = newheight;

//Change the canvas height. See the section below for details. services.CurrentDashboard.Height = newheight;



Once the script runs on load (or any interaction that the script is applied to), the grid expands to accommodate all the rows and displays the full result set:



Change height of the dashboard canvas at run-time

The same script can be applied to the dashboard canvas using its Height and Width properties as shown in the above script. It may also be possible to do from C# code if you used the Enhanced Viewer component within your own Silverlight application. The Silverlight application needs to be instructed what size to set. See this page for details on how to embed the Viewer: Using the Dashboard Viewer in Your Applications

Related Topics

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

Copyright © 2009-2014 Dundas Data Visualization, Inc.