A Multi-Select Matrix, also known as a matrix question with multiple responses, is a type of survey or form question that presents a grid or table structure where respondents can select multiple answers for each row or column combination. This demo shows a Multi-Select Matrix question example and describes how to configure multiple rows and columns selection in a matrix using the SurveyJS Form Library. Read more...
A Multi-Select Matrix, also known as a matrix question with multiple responses, is a type of survey or form question that presents a grid or table structure where respondents can select multiple answers for each row or column combination. This demo shows a Multi-Select Matrix question example and describes how to configure multiple rows and columns selection in a matrix using the SurveyJS Form Library.
To add a Multi-Select Matrix question to your survey, create an object with the
type property set to
"matrixdropdown" and add the object to the
elements array. Within this object, specify the question's
title and a unique
name that identifies the matrix question. Optionally, you can specify a
description to place under the title.
To configure matrix columns, populate the
columns array. Each object in it specifies settings of a single column. For each column, define its unique
name, which will be used to access the column in code, and its
title, which will be visible to respondents.
Column cells can contain editors of different types: single- or multi-line inputs, drop-down menus, checkboxes, etc. Use a column's
cellType property to specify the editor type, which is Dropdown by default.
Column editor types are based upon standalone question types. Depending on the selected editor type, the matrix column can have additional configuration properties inherited from the corresponding question type. For instance, Dropdown, Checkboxes, Radio Button Group, and Tag Box columns can specify the
choices array, similar to the question types upon which they are based.
Columns also support conditional logic. Use the
resetValueIf properties to dynamically show or hide a column, mark it as required, enable or disable its editors, set or reset the value of its cells. In this demo, the
enableIf property is used to enable column editors only if a respondent answers "Yes" to the "Do you use the framework?" question.
Refer to the
MatrixDropdownColumn API Reference section for a full list of matrix column properties.
To configure matrix rows, populate the
rows array. Similar to
rows array contains objects, and each object configures a single row. However, row objects can have only two properties:
"value": any, // A value to be saved in the survey results
"text": string, // A row title. When `text` is undefined, `value` is used.
Refer to the
survey.json file listing for a code example.
A Multi-Select Matrix allows you to transpose its content, i.e. display columns as rows, and vice versa. If you find that your matrix would benefit from transposing, set the matrix's
transposeData property to
true, as shown in this demo.