Dropdown Matrix - When a column's Required If rule is configured, the…

src/question_matrixdropdownrendered.ts

@@ -29,7 +29,6 @@ export class QuestionMatrixDropdownRenderedCell {
   public choiceIndex: number;
   public isOtherChoice: boolean;
   public matrix: QuestionMatrixDropdownModelBase;
-  public requiredText: string;
   public isEmpty: boolean;
   public colSpans: number = 1;
   public panel: PanelModel;
@@ -42,6 +41,9 @@ export class QuestionMatrixDropdownRenderedCell {
   public constructor() {
     this.idValue = QuestionMatrixDropdownRenderedCell.counter++;
   }
+  public get requiredText(): string {
+    return this.column && this.column.isRenderedRequired ? this.column.requiredText : undefined;
+  }
   public get hasQuestion(): boolean {
     return !!this.question && !this.isErrorsCell;
   }
@@ -867,9 +869,6 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
         .append(hCell.className)
         .append(this.cssClasses.rowTextCell)
         .append(this.cssClasses.columnTitleCell).toString();
-      if (!choice) {
-        this.setRequriedToHeaderCell(column, hCell);
-      }
       res.cells.push(hCell);
     }
     var rows = this.matrix.visibleRows;
@@ -1014,7 +1013,6 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
     cell: QuestionMatrixDropdownRenderedCell
   ) {
     this.setHeaderCellWidth(column, cell);
-    this.setRequriedToHeaderCell(column, cell);
   }
   private setHeaderCellWidth(
     column: MatrixDropdownColumn,
@@ -1023,25 +1021,6 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
     cell.minWidth = column != null ? this.matrix.getColumnWidth(column) : this.matrix.getRowTitleWidth();
     cell.width = column != null ? column.width : this.matrix.getRowTitleWidth();
   }
-  private setRequriedToHeaderCell(
-    column: MatrixDropdownColumn,
-    cell: QuestionMatrixDropdownRenderedCell
-  ) {
-    if (!!column && column.isRequired && this.matrix.survey) {
-      cell.requiredText = this.matrix.survey.requiredText;
-    }
-  }
-  private createRemoveRowCell(
-    row: MatrixDropdownRowModelBase
-  ): QuestionMatrixDropdownRenderedCell {
-    var res = new QuestionMatrixDropdownRenderedCell();
-    res.row = row;
-    res.isRemoveRow = this.canRemoveRow(row);
-    if (!!this.cssClasses.cell) {
-      res.className = this.cssClasses.cell;
-    }
-    return res;
-  }
   private createTextCell(
     locTitle: LocalizableString
   ): QuestionMatrixDropdownRenderedCell {

testCafe/questions/matrixdropdown.js

@@ -107,3 +107,49 @@ frameworks.forEach(framework => {
     });
   });
 });
+
+const json2 = {
+  "focusFirstQuestionAutomatic": true,
+  "elements": [{
+    "type": "radiogroup",
+    "name": "question2",
+    "defaultValue": "Item1",
+    "choices": [
+      "Item1",
+      "Item2",
+      "Item3"
+    ]
+  },
+  {
+    "type": "matrixdropdown",
+    "name": "question1",
+    "columns": [
+      {
+        "name": "Column 1",
+        "cellType": "text",
+        "requiredIf": "{question2} = 'Item1'"
+      }
+    ],
+    "columnLayout": "vertical",
+    "rows": [
+      "Row 1",
+      "Row 2"
+    ]
+  }]
+};
+frameworks.forEach(framework => {
+  fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(
+    async t => {
+      await initSurvey(framework, json2);
+    }
+  );
+
+  test("Column requiredIf and vertical layout", async t => {
+    const requiredSpan = Selector("span").withExactText("*");
+    await t.expect(requiredSpan.exists).ok();
+    await t.pressKey("down");
+    await t.expect(requiredSpan.exists).notOk();
+    await t.pressKey("up");
+    await t.expect(requiredSpan.exists).ok();
+  });
+});

tests/question_matrixdropdownbasetests.ts

@@ -228,8 +228,9 @@ QUnit.test("column cell css classes for vertical layout", function (assert) {
 
   const matrix = <QuestionMatrixDropdownModelBase>survey.getQuestionByName("question1");
   assert.equal(matrix.renderedTable.headerRow.cells.length, 3);
-  assert.equal(matrix.renderedTable.headerRow.cells[1].className, "sv_matrix_cell_header", "column 1");
-  assert.equal(matrix.renderedTable.headerRow.cells[2].className, "sv_matrix_cell_header", "column 2");
+  const cssHeader = survey.css.matrixdropdown.headerCell;
+  assert.equal(matrix.renderedTable.headerRow.cells[1].className, cssHeader, "column 1");
+  assert.equal(matrix.renderedTable.headerRow.cells[2].className, cssHeader, "column 2");
 });
 
 QUnit.test("column cell css classes by matrix cellType test", function (assert) {