Use a DataGrid widget to display a collection of data in rows and columns (tabular format). The DataGrid widget supports common table formatting options, such as alternating the row background color, customizing the grid line, and the ability to hide or show headers.

To learn how to use this widget programmatically, refer Quantum Visualizer Widget guide.

Important Considerations

The following are important considerations for a DataGrid widget.

Look Properties

Look properties define the appearance of the widget. The following are the major properties you can set:

For descriptions of the properties available on the Look tab of the Properties pane, see Look.

Skin Properties

Skin properties define a skin for the widget, including background color, borders, and shadows. If the widget includes text, you can also specify the text font.

For a DataGrid widget, you can apply a skin and its associated properties for the following states:

Skin Definition
Header The skin applied to the Header row.
Row The skin applied when the row does not have the focus.
  • Row - Alternate
  • The skin applied to alternate rows.

    Row - Focus The skin applied when the row has the focus.
    Hover Skin

    The look and feel of the widget when the cursor hovers over the widget.

    Note: Hover skins are available only on the Windows (native) Tablet platform.

    For more information about applying skins, see Understanding Skins and Themes.

    DataGrid Properties

    DataGrid properties specify properties that are available on any platform supported by Quantum Visualizer, and assign platform-specific properties.


    Represents the data displayed in each cell of the data grid.

    To input the data, click the Edit button to open the Master Data : DataGrid dialog box.

    The Master Data : DataGrid dialog box includes two tabs:


    The Columns table lets you provide details such as:


    The fields in the Rows tab are based on the inputs provided in the Columns tab and include:


    Specifies whether you can choose multiple rows of the DataGird. The Row - Focus skin is applied to selected rows.

    Column Headers

    Specifies the visibility of the DataGrid column headers.

    Grid Line Color

    Specifies the color of the grid line.

    Note: This property is specific to the Android platform.

    Tool Tip

    For the Windows Tablet platform, specifies a message that displays when you hover the mouse pointer over the widget .


    Actions define what happens when an event occurs. On a DataGrid widget, you can run an action when the following event occurs:

    For more information on using this action, see Add Actions.

    Placement Inside a Widget

    The following table summarizes where a DataGrid widget can be placed:

    Flex Form Yes
    VBox Form Yes
    FlexContainer Yes
    FlexScrollContainer Yes
    HBox Yes
    VBox Yes
    ScrollBox Horizontal Orientation - Yes
    Vertical Orientation - Yes
    Tab Yes
    Segment No
    Popup Yes


    Header- No
    Footer- No






    Rev Author Edits
    8 SHS SHS
    7.2.1 SHS SHS
    Copyright © 2020 Temenos. All rights reserved.