Merge pull request #7625 from surveyjs/bug/7615-matrix-vertical-colum…

…n-requried Dropdown Matrix - When a column's Required If rule is configured, the…
surveyjs · Jan 4, 2024 · f67151f · f67151f
2 parents 071a766 + f4c18e6
commit f67151f
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 27 deletions.
diff --git a/packages/survey-angular-ui/src/questions/matrixdropdowncell.component.html b/packages/survey-angular-ui/src/questions/matrixdropdowncell.component.html
@@ -34,7 +34,7 @@
       <ng-template
         [component]="{ name: question.getCellWrapperComponentName($any(cell)), data: { componentData: question.getCellWrapperComponentData($any(cell))} }">
         <sv-ng-string [model]="cell.locTitle"></sv-ng-string>
-        <span *ngIf="!!cell.requiredText" [class]="question.cssClasses.cellRequiredText">{{ cell.requiredText }}</span>
+        <span *ngIf="isRequiredCell" [class]="question.cssClasses.cellRequiredText">{{ cell.requiredText }}</span>
       </ng-template>
     </ng-container>
   </td>

diff --git a/packages/survey-angular-ui/src/questions/matrixdropdowncell.component.ts b/packages/survey-angular-ui/src/questions/matrixdropdowncell.component.ts
@@ -23,6 +23,9 @@ export class MatrixDropdownCellComponent extends BaseAngular<Question> {
     if(this.cell.hasQuestion) {
       return this.cell.question;
     }
+    if(!!this.cell.column) {
+      return this.cell.column;
+    }
     return null as any;
   }
   public get row(): MatrixDropdownRowModelBase {
@@ -72,6 +75,9 @@ export class MatrixDropdownCellComponent extends BaseAngular<Question> {
       return { width: this.cell.width, minWidth: this.cell.minWidth };
     return null;
   }
+  public get isRequiredCell(): boolean {
+    return !!this.cell.column && this.cell.column.isRenderedRequired;
+  }
   ngAfterViewInit() {
     if (!this.cell.hasQuestion || !this.question || !this.question.survey) return;
     const el = this.cellContainer.nativeElement;

diff --git a/src/question_matrixdropdownrendered.ts b/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 {

diff --git a/testCafe/questions/matrixdropdown.js b/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();
+  });
+});
diff --git a/tests/question_matrixdropdownbasetests.ts b/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) {