Creating a Data Grid using CDL

CDL datagrid widget allows flexible display of data, with options for cell values/types, nested rows/columns, and hierarchical structuring.

The CDL is as follows:

widget dataGridBeta #myfirstdatagrid { fixedHeader: true label: "Customer Category"size: large row cut #row { value: survey:CustomerCategory //totalLabel: "Customer Age" } column cut #banner { value: survey:OSAT.1total: last cell { value: count(survey:OSAT.1) } } }

To create row and column definitions in a chart, you need to specify a category breakdown of the question. You then specify the cell value of the intersection of these categories. You can define the cell within either the row or column elements, and provide an expression for calculating the value, such as a frequency count of responses. The type of cell definition you use will control the type of values and calculations performed. For example, by changing the cell definition to be of type rowPercentage, the calculations will reflect row percentages.

cell rowPercentage { value: count(survey:OSAT.1) }

You can define multiple values in a cell of a table by specifying different cell definitions. This allows you to display different statistics, such as frequency count, total pounds spent, and mean pounds spent, in the same table. To switch between different cell definitions, you can use the extraValue property. For example, you can display percentages instead of frequency counts by changing the cell definition to rowPercentage.

Table showing a count, the total pounds spent and the mean pounds spent

In the CDL, each column has a cell definition that represents the various statistics displayed.

widget dataGridBeta #v1dgq { label: "Ease by Spend" size: halfwidth navigateTo: DrillDown_General column { cell { value: count(survey:osatRecoded) } label: "All Respondents" } column { label: "Total £"cell { value: sum(survey:CustomerSpend) format: decimalFormat } } column { label: "Mean £"cell { value: average(survey:CustomerSpend) format: numberFormat3 } } row cut #a { totalLabel: "Overall Ease" value: survey:CESGroup } }

Rows and columns in the CDL have different types. For example, a column of type "cutByDate" can break down the data by a defined date period.

Table showing completed surveys per quarter

In the CDL, the datagrid widget gives you control over the display of totals in rows and columns, allowing you to decide whether to show or hide the totals, change the total's position, and even rename the total label. If you want to show the breakdown of multiple questions by a certain question, you need to create a new row or column definition for each question. Rows and columns can also be nested, meaning that each question category can be further broken down by another question. For example, in the CDL, you can nest columns to show a breakdown by device type for each category of customer tenure.

Table showing column nesting

To nest a column or row in the CDL, you include the definition inside its parent row or column. For example, in the CDL, the column labeled "#ban2" is included within the definition for the column "#ban1".

 widget dataGridBeta #columnnesting {
    fixedHeader: true
    label:label: "Column Nesting"
    size: large
    row cut #row {
      value: survey:OSAT.1
      totalLabel: "Overal Satisfaction"
    }
    column cut #ban1 {
      value: survey:CustomerCategory
      total: last
      column cut #ban2 {
        value: survey:Channel
        //total: none
        cell rowPercentage {
          value: count(survey:Channel)
          extraValue: count(survey:channel)
        }
      }
    }
  }

In a datagrid, you can use hierarchies to define the structure of the table. In the CDL, you specify the hierarchy by referencing it in the row definition. In the example code snippet, the surveyhierarchy hierarchy is used to structure the rows of the table.

   row drillDown {
      drillDown: surveyhierarchy
      total: first
    }

All hierarchy types are supported in the datagrid widget.

Also it’s possible to insert all relevant table records to the widget with row list:

    row list {
      value: survey:AccountName
      table: survey:
      sortBy: Score(survey:Q1)
      sortOrder: descending
    }

where:

• value is an expression is used for row labels,

• table is a path to the data,

• sortBy is an expression is used for sorting,

• sortOrder describes the direction of sorting.

For details of the properties and settings, refer to widget dataGrid in the CDL Reference Guide.