Open topic with navigation

Data Grid

The data grid component displays data in tabular format and enables you to style, filter and sort the data that is displayed. To create a simple data grid, perform the following steps:

1. In the Outline, right-click the Stage and choose Insert > Components > Data Grid.
2. Open the dataflow of the Stage and add a Table block to the dataflow. The Table block, by default, includes three rows of sample data.
3. In the Outline, select the data grid and bind its Table property from the data property of the table that you added to the dataflow.

The stage now displays the data grid containing the sample data from the dataflow table.

To style the table, expand the data grid in the Outline, select the component you want to style, and set its properties in the properties window. To enable users to select rows, set the data grid's Selection property. To enable users to sort the table, select Column 0 and set its Sortable property to true. To configure the order in which columns are displayed, set the data grid's Filter Type property to "whitelist" and enter a comma-separated list of column names in the Column Filter property.

Grouping Columns by Category

The following figure shows two pairs of columns grouped by category.

To group columns by category, perform the following steps:

1. Set the data grid's Filter Type property to "whitelist" and, in the Column Filter property, enter a comma-separated list of column names, ordered so that the columns that you want to group are adjacent. For example, to create the grouping shown in the figure above, enter temp1,temp2,flow1,flow2.
2. In the Outline, expand the data grid and delete Column 0. Click the Add Column button once for each column of data that you want to display and once for each category heading that you want to create. To duplicate the example in the figure above, create six columns.
3. In the Outline, select all the columns that you created in the previous step and set their Type property to Name.
4. For the heading columns, set the Selector property to the text that you want displayed above the grouped columns. For the columns in each group, set the Selector property to the desired column heading text and set the Category property to the value that you assigned to the heading column's Selector property. To configure the example shown above, the settings are as follows:

   Column#	Selector property	Category property	Remark
   0	Temp	(blank)	Group header for temperature
   1	temp1	Temp	First temperature column
   2	temp2	Temp	Second temperature column
   3	Flow	(blank)	Group header for flow
   4	flow1	Flow	First flow column
   5	flow2	Flow	Second flow column

5. To change the category text, edit the Label property for the heading columns.

Populating and Formatting Data Grid Columns

By default, when you add a data grid, it contains a single column editor under its "Columns" node (in the Outline). The Type property for this column editor is set to "All," and any changes that you make to its properties affect all the columns displayed in the data grid.

To set properties for individual columns, set Column 0's Type property to "Name" and set its Selector property to the name of the table column containing the data you want to display in this column. To add addition columns, click the Add Columns button in the Data Grid properties section.

To dynamically create, populate, and style data grid columns, use "repeater" columns, which are configured using a table that you create in the data grid dataflow. For example, the columns in the configuration table shown below defines the contents of a data grid as follows:

• selector: The name of the source table column from which data is read.
• symbol: The symbol to use to render the data in this column. The symbol's parameters are bound to the source data to be displayed.
• headingSym: The symbol used to render the column heading text.
• sortable: Bound to the Sortable property of the column to configure its sortability.
• heading_text: Text to be displayed in the column heading symbol.

You can generate the configuration table dynamically, which enables you to define a data grid that displays the incoming data without requiring advance knowledge of its structure of the incoming data. The following example shows a dataflow that generates the configuration table based on a feed of earthquake data.

The preceding dataflow generates a list of columns that you can bind to the Data property of the data grid. To configure the table to include the header names, you must enable the withHeader property of the CSVParser block. The following figure shows the resulting configuration table.

Add the data grid, bind its Data property to the output of the csvParser block, and bind the output table of the tableGetColumns block to Column 0's Configuration Table property. To style individual columns, add logic to the dataflow to add columns to the configuration table for the desired settings and bind the columns to the settings.

How Do I...?

...Sort a data grid?

1. In the Outline under the Columns node, select the column that you want to sort.
2. Set the sort column's Sortable property to true.
3. Invoke the column's sortAsc or sortDesc property.

Data grids do not support multi-column sorting.

...Include or exclude table columns?

Set the data grid Filter Type property to whitelist and set the Column Filter property to a comma-separated list of the columns you want to display, or set Filter Type to blacklist and set the Column Filter property to a comma-separated list of the columns that you want to exclude. To reorder the columns, use a whitelist filter.

...Style the row that the user mouses over?

Select the data grid and, in the Advanced properties tab, set its hover-related properties as desired, as shown in the following figure:

...Enable users to select rows?

In the Outline, select the data grid and set its Selection property to the type of selection desired: single-select, toggle-select, or multi-select. To style the selected rows, click the data grid's Rows node in the Outline, go to the Advanced properties pane, and set its selection-related properties as shown in the following figure.

...Edit individual columns?

To edit all of the data grid columns at once, you can use the default "Column 0" editor, which is a child of the "Column" node in the Outline. To edit individual data grid columns, perform the following steps:

1. In the Outline, select Column 0.
2. In the Property Inspector, set Type to Name, and set Selector to the name of the table column you want displayed in the leftmost column of the data grid.
3. In the Outline, select the data grid.
4. In the Property Inspector, under the Data Grid properties, click Add Column. A column editor is added under the Columns node in the Outline.
5. In the Outline, select the newly-added column editor.
6. In the Property Inspector, set Type to Name, and set Selector to the name of the desired table column.

Repeat steps 3–6 until you have an editor for each column.

Examples

Display Images in a Data Grid

The following example uses icons to indicate the status of orders: delivered, not delivered, or en route, as shown in the figure below. In the dataflow, a column mapping block uses the status to construct the path of the image to display, and the tooltip text as well.

The general approach is to display a symbol that contains an image component, setting the image URL property according to the status of the item in the table row. The example assumes that your assets folder contains the following images:

• delivered.png
• en-route.png
• not-delivered.png

To implement this example, perform the following steps:

1. In the Outline, right-click the Stage and choose Insert > Components > Data Grid. Style the dat agrid as desired.
2. Right-click the data grid and choose Dataflow. Add a Table block to the dataflow and configure it as shown in the following figure.
3. Add a Column Mapping block to the dataflow and bind its input from the Table block's output. Set its name0 property to "image" and its from0 property to ="assets/"+Status+".png", as shown in the following figure. The resulting output table contains the path to the icon corresponding to the item's status.
4. In the Outline, select the data grid and bind the output table of the Column Mapping block to the data grid's Table property.
5. Create a symbol named "status" that contains a single image component, and add two parameters to it: a string named "Tooltip" and a path named "Image". Bind the Tooltip parameter to the symbols Tooltip property and bind the path parameter to the symbols URL property.
6. In the Outline, select the data grid and, in the properties inspector, click its Add Column button twice. Set the column properties as follows:
• Column 1: Set Type to Name. Set Selector to "Status". Set Visible to FALSE.
• Column 2: Set Label to "Status". Set Type to Name. Set Selector to "Image". Set Symbol to "status".
7. In the Outline, select the data grid and open its dataflow. Select the Column Mapping block and click the Table button to open the output table.
8. In the Outline, expand the data grid's Status column and select its renderer. Drag the Status table column header from the dataflow table to the renderer's Tooltip property, and drag the Image table column header to the renderer's Image property.

If you have configured the example correctly, the datagrid displays the images corresponding to the order status for each table row.