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