Data Grid Properties

Data Grid is a versatile table presentation object allowing e.g. sorting, filtering, grouping and column reordering. The visual layout of Data Grid can be flexibly changed using CSS.

On the JSON settings field in the Presentation tab, you can change variety of Data Grid features, such as searching, filtering, paging, sorting, grouping, whether the Data grid selection is in row or cell mode, and so on. QPR UI uses Syncfusion component to draw the Data Grid. See the Syncfusion demos to see the available features and check 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

Check https://www.w3schools.com/js/js_json_intro.asp for more information about JSON.

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.

Common JSON Settings

Examples of changing JSON settings:

Feature	Configuration
Filtering	By default, column filtering is used. It can be disabled as follows: { "allowFiltering": false }
Excel style filtering	{ "filterSettings" : { "filterType": "excel" } }
Searching	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 } }
Column types	By default, the Data Grid automatically detects the column types from the data in the first row. The automatic detection might not always detect the data type correctly, so it's recommended to explicitly specify data types. Available datatypes are string, number, date, datetime, boolean. Example: { "columns": [ { "type": "string" }, { "type": "number" }, { "type": "date" }, { "type": "datetime" }, { "type": "boolean" } ] }
Date formatting	For number, date and datetime columns, the date formatting can be specified for example as follows: { "columns": [ { "type": "number", "format": "{0:n2}" }, { "type": "date", "format": "{0:d.M.yyyy}" }, { "type": "datetime", "format": "{0:dd/MM/yyyy HH:mm:ss}" }, ] }
Multiple rows selection	{ "selectionType": "multiple", "selectionSettings" : { "selectionMode": ["row"] } }
Multiple cells selection	{ "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.
Excel, Word and PDF exporting	Enabling the export functionalities is controlled in the "toolbarSettings" block. In addition, the exportToExcelAction, exportToWordAction, and exportToPdfAction objects need to contain the URLs for the corresponding export service. In this example, context variables are used for the export service URL definitions: { "exportToExcelAction": "http://<YourHostname>/SyncfusionGridExport/excelExport", "exportToWordAction": "http://<YourHostname>/SyncfusionGridExport/wordExport", "exportToPdfAction": "http://<YourHostname>/SyncfusionGridExport/pdfExport", "toolbarSettings": { "showToolbar": true, "toolbarItems": ["excelExport", "wordExport","pdfExport"] } } By default, the exportToExcelAction, exportToWordAction, and exportToPdfAction values point to locations on the same host.

Datasource in JSON Settings

It's possible to define the Data Grid to use a certain dataset by using the dataSource attribute in the JSON settings that contains a valid dataset tag as the value:

{
"dataSource": <#dataset identifier="ExampleDataset">
}

Note that when using the dataSource attribute in the JSON settings, the definitions done on the "Query" and "Mappings" tabs and the "Select Value Settings" and "Value Settings" sections of the "Presentation" tab of the data grid properties are overridden.

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/