Data Grid Properties

A data grid is a table type of presentation object that is used to get data from the available data sources. All graphical Presentation Objects need a Table or Data Grid Presentation Object containing data as their intermediate data source.

Data grid JSON settings

On the JSON settings section, you can change variety of Data grid features, such as enable/disable searching, filtering, paging, sorting, grouping, whether the Data grid selection is in row or cell mode, and so on. QPR UI uses Syncfusion component. See the Syncfusion demos what features there are available in the Data grid, and see from the settings reference how the desired settings are enabled:

• Syncfusion Grid demo: http://js.syncfusion.com/demos/web/#!/bootstrap/grid/defaultfunctionalities
• Syncfusion Grid documentation: https://help.syncfusion.com/js/grid/overview
• Syncfusion Grid settings reference: https://help.syncfusion.com/api/js/ejgrid

Examples of changing JSON settings:

Multiple Rows Selection Mode

{
  "selectionType": "multiple",
  "selectionSettings" : {
    "selectionMode": ["row"]
  }
}

Multiple Cells Selection Mode

{
  "selectionType": "multiple",
  "selectionSettings" : {
    "selectionMode": ["cell"]
  }
}

Minimum Column Width

{
  "minWidth": 100
}

Link to Syncfusion settings reference: https://help.syncfusion.com/api/js/ejgrid#members:minwidth

Specific Column Widths

Setting the width to the second, third, and fifth columns named "Case", "Event Type", and "Cost" respectively:

{
  "columns": [
    {},
    {"field": "Case", "width": 100},
    {"field": "Event Type", "width": 200},
    {},
    {"field": "Cost", "width": 50 }
  ]
}

Resizable Columns

{
  "allowResizing": true
}

Note that the resized widths cannot be saved, so this setting is for view-time only.

Filtering

{
  "allowFiltering": true
}

Search
The search field in the grid is controlled by the "toolbarSettings" block, where setting the "showToolbar" as false will hide the search field in the grid:

{
  "toolbarSettings": {
    "showToolbar": false,
    "toolbarItems": ["search"]
  }
}

The "Show effective JSON" selection shows the underlying current JSON definition including the definition you have done yourself. You can use the effective JSON as a starting point for your customized JSON settings.

Context Variables in JSON Settings

It's possible to use context variables in the JSON settings, and even have all of the JSON settings come from a context variable. The value of the context variable needs to be such that the resulting JSON is valid. For example, JSON settings defined as follows:

{
  "columns": [
    {"width": <#caseColumnWidth>},
    {"width": 200},
    {},
    {"width": 50}
  ]
}

Need to have, for example, the following values for the JSON to be valid:

Context Variable	Context Variable Value
caseColumnWidthValue	100
fieldName	"Cost"

Using Column Templates in JSON Settings

Column templates can be used to define customized columns with HTML. JsRender syntax can be used in the column templates HTML to reference to the source data (more information: https://github.com/BorisMoore/jsrender).

Example use of column templates:

{
  "columns": [
    {"template": "Value is: {{:ColumnName}}"},
    {"template": "<div style=\"color:green;font-weight:bold;\">{{:AnotherColumnName}}</div>"},
    {"template": "{{:Name2}} - {{:Name3}}"},
    {"template": "{{:Actual * 5 + 7}}"}
  ]
}

Notes:

• Column names can be referenced by using the column name:
  • Column name that has no spaces: "{{:MyVeryFineColumnName}}".
  • Column name that has spaces: "{{:#data[\"My Very Fine Column Name With Spaces\"]}}".

Also data grid headers can be customized with headerTemplateID setting, for example:

{
  "columns": [
    {"headerTemplateID": "<div style=\"color:green;font-weight:bold;\">Green bolded header</div>"}
  ]
}

Data grid CSS settings

On the CSS settings section, you can define customized styling for the Data grid using CSS. The list of available classes and their purpose is available from Syncfusion documentation and some more here. In addition to the classes listed, there is also a qc-table-header class that can be used to style the area showing the data grid name.

As an example, use the following CSS to customize the font, text color, font size, font weight and background color of the column headers:

.e-headercell {
  font-family: Lucida Handwriting, sans-serif;
  color: white;
  font-size: 16px;
  font-weight: bold;
  background-color: #080034;
}

The following example shows how to change styling for individual columns. In the numbering, the first column is number 2, the next one on its right is 3 and so on. e-headercell affects the header row and e-rowcell affects the data rows.

.e-headercell:nth-child(2) {
  background-color: green;
}

.e-rowcell:nth-child(2) {
  font-weight: bold;
}

Note the valid CSS syntax:

• every class name starts with a dot (.)
• CSS settings that are effective for the class are inside the curly brackets as key-value pairs
• every CSS settings ends with a semicolon (;)

More information about CSS:

• CSS tutorial: https://www.w3schools.com/css/
• CSS settings reference: https://www.w3schools.com/cssref/

Data grid popup menu

On the Popup menu tab, it's possible to define a popup menu that can be opened by right-clicking the data grid or by using a long-press on a mobile device. The popup menu is used to set values for context variables based on which row or cell was clicked (based on the Data grid selection mode), and to execute QPR ProcessAnalyzer queries. The definition is done as a JSON configuration string that is an array of popup menu item objects. The popup menu item object has the following properties:

• name: String. Mandatory. The name of the popup menu item.
• paQuery: String. Optional. The ProcessAnalyzer query to execute. Note that you need to use "\n" as linefeed in the string between the wanted ProcessAnalyzer query parameters.
• contextChanges: Object. Optional. The context changes object has a property for every context variable it sets. The value of the context variable property is an object with the following properties:
  • value: String. Defines from which column and row/cell combination the value(s) to set to the context variable are taken. To refer to a column in the data grid, use the following format: "{$column_name}", for example "{$country}", or to refer to multiple columns: "{$first_column_name}{$second_column_name}", note that it may be a good idea to separate the different columns by having some text between them, e.g. "{$country}-{$city}". Hidden columns can be referenced like this too. Note that this column name reference is case sensitive, so for example "{$country}" and "{$Country}" are not the same. It's also possible to get the index number of the selected column by using "{%columnIndex}" as the value. Then, depending on the Data grid selection mode defined on the Presentation tab, the value(s) are taken from the selected row(s) or cell(s) of the defined column(s). In case multiple rows or cells are selected, the values will be separated by commas.
  • prettyValue: String. Value that is displayed as the context variable value. Used like "value" above. For example, if you have a data grid with columns for IDs and a corresponding human intelligible values for the IDs, you can define the context variable value to be fetched from the ID column and the prettyValue for the context variable to be fetched from the corresponding human intelligible values column.
  • behavior: String. Either "default" or "fixed". If the behavior property is missing, the value is set as "fixed".

Once you start entering the JSON, you will se an icon indicating whether the JSON you entered is valid or not. In case you have entered invalid JSON, you can't close the Data Grid properties.

The popup menu also works when the multiselection mode is switched on in the datagrid ("selectionType": "multiple"). In that case, if multiple rows or cells have been selected, the stored context variables will have a comma separated list containing a value for each selected cell or row. If the values contains commas (,) it is escaped with \,, so that is's possible to distinguish between commas in the values and commas separating values. Also \ is escaped with \\.

Example 1

As an example, the following JSON defines a pop-up menu that runs a ProcessAnalyzer query, sets values for the context variables "country" and "city" from columns named "Country" and "City" and for the "columnIndex" context variable using the order number of the column with fixed behaviors.

[{
  "name": "Select country",
  "paQuery": "AnalysisType=5\nparam_Country={#Country}",
  "contextChanges": {
    "country": { "value": "{$Country}" },
    "city": { "value": "{$City}" },
    "columnIndex": { "value": "{%columnIndex}" }
  }
}]

This results in a popup menu like in the picture below:
800px
And after clicking "Select country", the Session Context is like in the picture below:
800px

Example 2

This example contains two pop-up menu items: Select country and Drill-down to city.

[{
  "name": "Select country",
  "paQuery": "AnalysisType=5\nparam_Country={#Country}",
  "contextChanges": {
    "country": { "value": "{$Country}" },
    "city": { "value": "{$City}" },
    "columnIndex": { "value": "{%columnIndex}" }
  }
},{
  "name": "Drill-down to city",
  "paQuery": "AnalysisType=5\nparam_City={#City}",
  "contextChanges": {
    "city": { "value": "{$City}" },
    "columnIndex": { "value": "{%columnIndex}" },
    "sys:dashboard": { "value": "1234" }
  }
}]

Example 3: Multiple Selections in Row Mode

The Data grid has the following contents:

Country	City	Population	Capital
Finland	Espoo	270000	false
Sweden	Stockholm	935000	true
Norway	Oslo	658000	true

On the Presentation tab, the Data grid has been defined to use multiple row selections:

{
  "selectionType": "multiple",
  "selectionSettings" : {
    "selectionMode": ["row"]
  }
}

The popup menu has been defined as:

[{
  "name": "Set city properties",
  "contextChanges": {
    "places": { "value": "{$Country}-{$City}" },
    "capital": { "value": "{$Capital}" }
  }
}]

When viewing the Data grid, a user selects rows "Finland" and "Sweden" and selects the "Set city properties" action from the popup menu. This will result in the context variables having the following values:

• places = Finland,Sweden-Espoo,Stockholm
• capital = false,true