Data Grid Properties

A data grid is a table presentation object.

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

See here for more information about JSON.

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: {{:Column1Name}}"},
    {"template": "<div style=\"color:green;font-weight:bold;\">{{:Column2Name}}</div>"},
    {"template": "{{:Column3Name * 5 + Column4Name}}"},
    {"template": "{{:Column5Name}} and {{:Column6Name}}"},
  ]
}

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. General information about CSS is available 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 Click and Popup Menu Events

On the Events tab, it's possible to define actions for click and double click events, as well as a and popup menu that can be opened by right-clicking the data grid or by using a long-press on a mobile device. The definitions are done as JSON configuration strings that are arrays containing the actions and events.

The actions have the following properties:

identifier: String. Mandatory. The name of the action.
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.
- behavior: String. Either "default" or "fixed". If the behavior property is missing, the value is set as "fixed".

The events have the following properties:

eventtype: String. The value defined here specifies which type of event triggers which action. Possible types are:
- cellclicked: Single click. The events cannot contain more than one cellclicked type event.
- celldoubleclicked: Double click. he events cannot contain more than one celldoubleclicked type event.
  - In case both cellclicked and celldoubleclicked events are defined, both events will be triggered when the data grid is double clicked with the cellclick event triggering first.
- popupmenuitemselected: Default event type. Popup menu selection. The popup menu event type has the following additional properties:
  - 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.
  - name: String. Mandatory. The name that is displayed in the popup menu.
actionIdentifier: String. The identifier of the click, double click, or popup menu selection action to be executed for the event.

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.

{
"actions": [
 {
  "identifier": "selectCountry",
  "paQuery": "AnalysisType=5\nparam_Country={#Country}",
  "contextChanges": {
    "country": { "value": "{$Country}" },
    "city": { "value": "{$City}" },
	"columnIndex": { "value": "{%columnIndex}" }
  }
 }
],
"events": [
 {
  "eventType": "popupmenuitemselected",
  "name": "Select country",
  "actionIdentifier": "selectCountry"
 }
]
}

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 a cellclicked event to run a QPR ProcessAnalyzer query and to set context variable values:

{
"actions": [
 {
  "identifier": "selectCountry",
  "paQuery": "AnalysisType=5\nparam_Country={#Country}",
  "contextChanges": {
    "country": { "value": "{$Country}" },
    "city": { "value": "{$City}" },
	"columnIndex": { "value": "{%columnIndex}" }
  }
 }
],
"events": [
 {
  "eventType": "cellclicked",
  "actionIdentifier": "selectCountry"
 }
]
}

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:

{
"actions": [
 {
  "identifier": "setCityProperties",
  "contextChanges": {
    "places": { "value": "{$Country}-{$City}" },
    "capital": { "value": "{$Capital}" }
  }
 }
],
"events": [
 {
  "eventType": "popupmenuitemselected",
  "name": "Set city properties",
  "actionIdentifier": "setCityProperties"
 }
]
}

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

Template:MDBTutorialAddingDataGrid