#8209 - matrices

packages/survey-angular-ui/src/questions/matrixcell.component.html

@@ -5,7 +5,8 @@
  [name]="row.fullName"
  [value]="column.value"
  [checked]="row.value === column.value"
- [disabled]="row.isReadOnly"
+ [readonly]="row.isReadOnlyAttr"
+ [disabled]="row.isDisabledAttr"
  [attr.id]="question.inputId + '_' + row.name + '_' + columnIndex"
  (change)="onChange()"
  [attr.aria-required]="question.a11y_input_ariaRequired"

packages/survey-vue3-ui/src/MatrixCell.vue

@@ -9,7 +9,8 @@
  :name="row.fullName"
  v-model="row.value"
  :value="column.value"
- :disabled="row.isReadOnly"
+ :readonly="row.isReadOnlyAttr"
+ :disabled="row.isDisabledAttr"
  :id="question.inputId + '_' + row.name + '_' + columnIndex"
  :aria-required="question.a11y_input_ariaRequired"
  :aria-label="

src/knockout/templates/question-matrix.html

@@ -64,7 +64,7 @@
  <label data-bind="css: question.getItemClass(row, column), event: { mousedown: question.koMouseDown }" >
  <input
  type="radio"
- data-bind="css: question.cssClasses.itemValue, attr: { name: row.fullName, 'aria-required': question.a11y_input_ariaRequired, 'aria-label': question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml), 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-errormessage': question.a11y_input_ariaErrormessage, id: question.inputId + '_' + row.name + '_' + $index() }, checkedValue: column.value, checked: row.value, enable: !row.isReadOnly"
+ data-bind="css: question.cssClasses.itemValue, attr: { name: row.fullName, readonly: row.isReadOnlyAttr, 'aria-required': question.a11y_input_ariaRequired, 'aria-label': question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml), 'aria-invalid': question.a11y_input_ariaInvalid, 'aria-errormessage': question.a11y_input_ariaErrormessage, id: question.inputId + '_' + row.name + '_' + $index() }, enable: !row.isDisabledAttr, checkedValue: column.value, checked: row.value"
  />
  <span data-bind="css: question.cssClasses.materialDecorator">
  <!-- ko if: question.itemSvgIcon -->

src/question_matrix.ts

@@ -21,6 +21,8 @@ export interface IMatrixData {
  cssClasses: any;
  isDisabledStyle: boolean;
  isInputReadOnly: boolean;
+ isDisabledAttr: boolean;
+ isReadOnlyAttr: boolean;
  hasErrorInRow(row: MatrixRowModel): boolean;
 }
 
@@ -68,6 +70,8 @@ export class MatrixRowModel extends Base {
  this.setPropertyValue("value", val);
  }
  public get isReadOnly(): boolean { return !this.item.enabled || this.data.isInputReadOnly; }
+ public get isReadOnlyAttr(): boolean { return this.data.isReadOnlyAttr; }
+ public get isDisabledAttr(): boolean { return !this.item.enabled || this.data.isDisabledAttr; }
  public get rowTextClasses(): string {
  return new CssClassBuilder().append(this.data.cssClasses.rowTextCell).toString();
  }

src/react/reactquestion_matrix.tsx

@@ -246,7 +246,8 @@ export class SurveyQuestionMatrixCell extends ReactSurveyElement {
  className={this.cssClasses.itemValue}
  name={this.row.fullName}
  value={this.column.value}
- disabled={this.row.isReadOnly}
+ disabled={this.row.isDisabledAttr}
+ readOnly={this.row.isReadOnlyAttr}
  checked={isChecked}
  onChange={this.handleOnChange}
  aria-required={this.question.a11y_input_ariaRequired}

src/vue/matrixcell.vue

@@ -6,7 +6,8 @@
  :name="row.fullName"
  v-model="row.value"
  :value="column.value"
- :disabled="row.isReadOnly"
+ :readonly="row.isReadOnlyAttr"
+ :disabled="row.isDisabledAttr"
  :id="question.inputId + '_' + row.name + '_' + columnIndex"
  :aria-required="question.a11y_input_ariaRequired"
  :aria-label="question.getCellAriaLabel(row.locText.renderedHtml, column.locText.renderedHtml)"

tests/markup/etalon_matrix.ts

@@ -1,5 +1,5 @@
 import { registerMarkupTests } from "./helper";
-import { StylesManager } from "survey-core";
+import { StylesManager, settings } from "survey-core";
 
 registerMarkupTests(
  [
@@ -63,6 +63,68 @@ registerMarkupTests(
  snapshot: "matrix-v2",
  excludePlatform: "Vue"
  },
+ {
+ name: "Test matrix question markup readonly",
+ json: {
+ "elements": [
+ {
+ "type": "matrix",
+ "name": "matrix",
+ "titleLocation": "hidden",
+ readOnly: true,
+ "columns": [
+ {
+ "value": "col_1",
+ }, {
+ "value": "col_2",
+ },
+ ],
+ "rows": [
+ {
+ "value": "row_1",
+ }, {
+ "value": "row_2",
+ },
+ ]
+ }
+ ]
+ },
+ before: () => StylesManager.applyTheme("defaultV2"),
+ after: () => StylesManager.applyTheme("default"),
+ snapshot: "matrix-v2-readonly",
+ excludePlatform: "Vue"
+ },
+ {
+ name: "Test matrix question disabled",
+ json: {
+ "elements": [
+ {
+ "type": "matrix",
+ "name": "matrix",
+ "titleLocation": "hidden",
+ "columns": [
+ {
+ "value": "col_1",
+ }, {
+ "value": "col_2",
+ },
+ ],
+ "rows": [
+ {
+ "value": "row_1",
+ }, {
+ "value": "row_2",
+ },
+ ]
+ }
+ ]
+ },
+ initSurvey: (survey) => survey.setDesignMode(true),
+ before: () => { settings.supportCreatorV2 = true; StylesManager.applyTheme("defaultV2"); },
+ after: () => { settings.supportCreatorV2 = false; StylesManager.applyTheme("default"); },
+ snapshot: "matrix-v2-disabled",
+ excludePlatform: "Vue"
+ },
  {
  name: "Test matrix question in mobile mode markup",
  json: {

tests/markup/etalon_matrixdropdown.ts

@@ -1,5 +1,5 @@
 import { registerMarkupTests } from "./helper";
-import { StylesManager } from "survey-core";
+import { StylesManager, settings } from "survey-core";
 
 registerMarkupTests(
  [
@@ -26,6 +26,52 @@ registerMarkupTests(
  after: () => StylesManager.applyTheme("default"),
  snapshot: "matrixdropdown"
  },
+ {
+ name: "Test matrixdropdown readonly",
+ json: {
+ elements: [
+ {
+ titleLocation: "hidden",
+ readOnly: true,
+ cellType: "text",
+ "type": "matrixdropdown",
+ "name": "m",
+ "columns": ["Col 1", "Col 2"],
+ "rows": [
+ "Row 1",
+ "Row 2"
+ ]
+ }
+ ]
+ },
+
+ before: () => StylesManager.applyTheme("defaultV2"),
+ after: () => StylesManager.applyTheme("default"),
+ snapshot: "matrixdropdown-readonly"
+ },
+ {
+ name: "Test matrixdropdown disabled",
+ json: {
+ elements: [
+ {
+ titleLocation: "hidden",
+ cellType: "text",
+ "type": "matrixdropdown",
+ "name": "m",
+ "columns": ["Col 1", "Col 2"],
+ "rows": [
+ "Row 1",
+ "Row 2"
+ ]
+ }
+ ]
+ }
+ ,
+ initSurvey: (survey) => survey.setDesignMode(true),
+ before: () => { settings.supportCreatorV2 = true; StylesManager.applyTheme("defaultV2"); },
+ after: () => { settings.supportCreatorV2 = false; StylesManager.applyTheme("default"); },
+ snapshot: "matrixdropdown-disabled"
+ },
  {
  name: "Test matrixdropdown vertical",
  json: {

tests/markup/snapshots/matrix-v2-disabled.snap.html

@@ -0,0 +1,59 @@
+<div class="sd-matrix sd-table-wrapper">
+ <fieldset>
+ <legend class="sv-hidden">matrix</legend>
+ <table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth">
+ <thead>
+ <tr>
+ <td>
+ </td>
+ <th class="sd-table__cell sd-table__cell--header">
+ <span class="sv-string-editor" contenteditable="true">col_1</span>
+ </th>
+ <th class="sd-table__cell sd-table__cell--header">
+ <span class="sv-string-editor" contenteditable="true">col_2</span>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="sd-table__row sd-table__row-readonly">
+ <td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+ <span class="sv-string-editor" contenteditable="true">row_1</span>
+ </td>
+ <td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+ <label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+ <input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_1_0" name="testid0_row_1" type="radio" value="col_1">
+ <span class="sd-item__decorator sd-radio__decorator">
+ </span>
+ </label>
+ </td>
+ <td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+ <label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+ <input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_1_1" name="testid0_row_1" type="radio" value="col_2">
+ <span class="sd-item__decorator sd-radio__decorator">
+ </span>
+ </label>
+ </td>
+ </tr>
+ <tr class="sd-table__row sd-table__row-readonly">
+ <td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+ <span class="sv-string-editor" contenteditable="true">row_2</span>
+ </td>
+ <td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+ <label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+ <input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_2_0" name="testid0_row_2" type="radio" value="col_1">
+ <span class="sd-item__decorator sd-radio__decorator">
+ </span>
+ </label>
+ </td>
+ <td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+ <label class="sd-item sd-matrix__label sd-radio sd-radio--allowhover">
+ <input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" disabled="" id="testid0i_row_2_1" name="testid0_row_2" type="radio" value="col_2">
+ <span class="sd-item__decorator sd-radio__decorator">
+ </span>
+ </label>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </fieldset>
+</div>

tests/markup/snapshots/matrix-v2-readonly.snap.html

@@ -0,0 +1,59 @@
+<div class="sd-matrix sd-table-wrapper">
+ <fieldset>
+ <legend class="sv-hidden">matrix</legend>
+ <table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth">
+ <thead>
+ <tr>
+ <td>
+ </td>
+ <th class="sd-table__cell sd-table__cell--header">
+ <span class="sv-string-viewer">col_1</span>
+ </th>
+ <th class="sd-table__cell sd-table__cell--header">
+ <span class="sv-string-viewer">col_2</span>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="sd-table__row sd-table__row-readonly">
+ <td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+ <span class="sv-string-viewer">row_1</span>
+ </td>
+ <td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+ <label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+ <input aria-invalid="false" aria-label="row row_1, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_0" name="testid0_row_1" readonly="" type="radio" value="col_1">
+ <span class="sd-item__decorator sd-radio__decorator">
+ </span>
+ </label>
+ </td>
+ <td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+ <label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+ <input aria-invalid="false" aria-label="row row_1, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_1_1" name="testid0_row_1" readonly="" type="radio" value="col_2">
+ <span class="sd-item__decorator sd-radio__decorator">
+ </span>
+ </label>
+ </td>
+ </tr>
+ <tr class="sd-table__row sd-table__row-readonly">
+ <td class="sd-matrix__cell sd-table__cell sd-table__cell--row-text">
+ <span class="sv-string-viewer">row_2</span>
+ </td>
+ <td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_1">
+ <label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+ <input aria-invalid="false" aria-label="row row_2, column col_1" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_0" name="testid0_row_2" readonly="" type="radio" value="col_1">
+ <span class="sd-item__decorator sd-radio__decorator">
+ </span>
+ </label>
+ </td>
+ <td class="sd-matrix__cell sd-table__cell" data-responsive-title="col_2">
+ <label class="sd-item sd-item--readonly sd-matrix__label sd-radio sd-radio--readonly">
+ <input aria-invalid="false" aria-label="row row_2, column col_2" aria-required="false" class="sd-item__control sd-radio__control sd-visuallyhidden" id="testid0i_row_2_1" name="testid0_row_2" readonly="" type="radio" value="col_2">
+ <span class="sd-item__decorator sd-radio__decorator">
+ </span>
+ </label>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </fieldset>
+</div>

tests/markup/snapshots/matrixdropdown-disabled.snap.html

@@ -0,0 +1,50 @@
+<div class="sd-table-wrapper">
+ <table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
+ <thead>
+ <tr>
+ <td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">
+ </td>
+ <th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+ <span class="sv-string-editor" contenteditable="true">
+ </span>
+ </th>
+ <th class="sd-table__cell sd-table__cell--column-title sd-table__cell--header sd-table__cell--text">
+ <span class="sv-string-editor" contenteditable="true">
+ </span>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row1">
+ <td class="sd-table__cell sd-table__cell--row-text" colspan="1" data-responsive-title="Row 1" title="">
+ <span class="sv-string-editor" contenteditable="true">Row 1</span>
+ </td>
+ <td class="sd-table__cell" colspan="1" data-responsive-title="" title="">
+ <div class="sd-table__question-wrapper">
+ <input aria-invalid="false" aria-label="row Row 1, column " aria-required="false" autocomplete="" class="sd-input sd-text" disabled="" id="testid0row1cell1i" placeholder="" type="text">
+ </div>
+ </td>
+ <td class="sd-table__cell" colspan="1" data-responsive-title="" title="">
+ <div class="sd-table__question-wrapper">
+ <input aria-invalid="false" aria-label="row Row 1, column " aria-required="false" autocomplete="" class="sd-input sd-text" disabled="" id="testid0row1cell2i" placeholder="" type="text">
+ </div>
+ </td>
+ </tr>
+ <tr class="sd-table__row" data-sv-drop-target-matrix-row="testid0row3">
+ <td class="sd-table__cell sd-table__cell--row-text" colspan="1" data-responsive-title="Row 2" title="">
+ <span class="sv-string-editor" contenteditable="true">Row 2</span>
+ </td>
+ <td class="sd-table__cell" colspan="1" data-responsive-title="" title="">
+ <div class="sd-table__question-wrapper">
+ <input aria-invalid="false" aria-label="row Row 2, column " aria-required="false" autocomplete="" class="sd-input sd-text" disabled="" id="testid0row3cell1i" placeholder="" type="text">
+ </div>
+ </td>
+ <td class="sd-table__cell" colspan="1" data-responsive-title="" title="">
+ <div class="sd-table__question-wrapper">
+ <input aria-invalid="false" aria-label="row Row 2, column " aria-required="false" autocomplete="" class="sd-input sd-text" disabled="" id="testid0row3cell2i" placeholder="" type="text">
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+</div>