The Grid question type presents users with a table where they can select one option per row.

​
Basic Usage

const satisfactionGrid = new Grid({
    id: 'product_satisfaction',
    text: 'How satisfied are you with the following aspects of our product?',
    subText: 'Please rate each aspect',
    rows: ['Ease of use', 'Performance', 'Design', 'Customer support'],
    columns: ['Very Dissatisfied', 'Dissatisfied', 'Neutral', 'Satisfied', 'Very Satisfied'],
    required: true
});

​
Parameters

​
id
string
required

Unique identifier for the question.

​
text
string
required

The main question text.

​
subText
string
default: ""

Additional text to provide context or instructions.

​
rows
array
required

An array of strings representing the row labels.

​
columns
array
required

An array of strings representing the column labels (options for each row).

​
required
boolean
default: "true"

Whether the question is required.

​
randomizeRows
boolean
default: "false"

Whether to randomize the order of rows.

​
randomizeColumns
boolean
default: "false"

Whether to randomize the order of columns.

​
customValidation
function

A custom validation function that takes the response as input and returns true if valid, or an error message string if invalid.

​
styles
object

Custom styles to apply to the question. Available keys are:

  • root
  • innerContainer
  • textContainer
  • text
  • subText
  • table
  • headerRow
  • headerCell
  • rowWrapper
  • row
  • rowLabel
  • cell
  • radio
  • errorMessage

​
Data

Response Format

The Grid question type returns an object where keys are row labels and values are the selected column labels:

{
  "Ease of use": "Satisfied",
  "Performance": "Very Satisfied",
  "Design": "Neutral",
  "Customer support": "Dissatisfied"
}

Validation

The Grid question validates that:

  1. All rows have a selected option when required is set to true.
  2. Any custom validation provided in the customValidation function passes.

If validation fails, it displays an error message listing the unanswered rows.

​
Advanced

​
Methods

The Grid question type inherits methods from the base Element class and includes some specific methods:

​
setResponse
function

Set the response for the question.

Parameters:

  • value (object): An object where keys are row labels and values are selected column labels
gridQuestion.setResponse({
  'Ease of use': 'Satisfied',
  'Performance': 'Very Satisfied'
});
​
validate
function

Validate the current response against the question’s rules.

Returns:

  • An object with isValid (boolean) and errorMessage (string) properties.
const { isValid, errorMessage } = gridQuestion.validate();
​
updateResponse
function

Update the response based on the current state of the radio buttons.

This method is typically called internally when the user interacts with the question.

gridQuestion.updateResponse();

​
Example

Here’s an example of how to create a customized grid question:

const customizedGrid = new Grid({
    id: 'feature_importance',
    text: 'Rate the importance of these features',
    subText: 'Your input helps prioritize our development',
    rows: ['Feature A', 'Feature B', 'Feature C', 'Feature D'],
    columns: ['Not Important', 'Somewhat Important', 'Very Important', 'Critical'],
    randomizeRows: true,
    randomizeColumns: false,
    required: true,
    customValidation: (response) => {
        // Custom validation logic here
        return true; // or return an error message string
    },
    styles: {
        root: { 
            backgroundColor: '#f0f8ff',
            padding: '15px',
            borderRadius: '8px'
        },
        text: { 
            color: '#2c3e50',
            fontSize: '1.2em'
        },
        table: {
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        },
        headerRow: {
            backgroundColor: '#3498db',
            color: 'white'
        },
        radio: {
            accentColor: '#3498db'
        },
        errorMessage: {
            color: '#e74c3c',
            fontWeight: 'bold'
        }
    }
});
Dropdown SelectHTML