Skip to main content
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'
        }
    }
});