Button for adding row appears in matrixdynamic question even though a… (

#7007) * Button for adding row appears in matrixdynamic question even though adding rows is not allowed fix #6990 * Fix Angular template #6990 * Fix visual tests #6990
surveyjs · Sep 25, 2023 · a1fd164 · a1fd164
1 parent 4e5230a
commit a1fd164
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 2 deletions.
diff --git a/packages/survey-angular-ui/src/questions/matrixdynamic.component.html b/packages/survey-angular-ui/src/questions/matrixdynamic.component.html
@@ -6,7 +6,9 @@
     <sv-ng-matrix-table *ngIf="model.renderedTable?.showTable" [question]="model" [table]="model.renderedTable"></sv-ng-matrix-table>
     <div *ngIf="!model.renderedTable.showTable" [class]="model.cssClasses.emptyRowsSection">
       <div [class]="model.cssClasses.emptyRowsText" [model]="model.locEmptyRowsText" sv-ng-string></div>
-      <ng-container *ngTemplateOutlet="addRowButton"></ng-container>
+      <ng-container *ngIf="model.renderedTable.showAddRow">
+        <ng-container  *ngTemplateOutlet="addRowButton"></ng-container>
+      </ng-container>
     </div>
     <div *ngIf="model.renderedTable.showAddRowOnBottom" [class]="model.cssClasses.footer">
       <ng-container *ngTemplateOutlet="addRowButton"></ng-container>

diff --git a/packages/survey-vue3-ui/src/MatrixDynamic.vue b/packages/survey-vue3-ui/src/MatrixDynamic.vue
@@ -25,6 +25,7 @@
         <survey-string :locString="question.locEmptyRowsText" />
       </div>
       <button
+        v-if="question.renderedTable.showAddRow"
         type="button"
         :class="question.getAddRowButtonCss(true)"
         @click="addRowClick"

diff --git a/src/knockout/templates/question-matrixdynamic.html b/src/knockout/templates/question-matrixdynamic.html
@@ -20,13 +20,15 @@
         <div data-bind="css: question.cssClasses.emptyRowsText">
           <!-- ko template: { name: 'survey-string', data: question.locEmptyRowsText } --><!-- /ko -->
         </div>
+        <!-- ko if: question.koTable().showAddRow -->  
         <button
           type="button"
           data-bind="click:question.koAddRowClick, css: question.getAddRowButtonCss(true), disable: question.isInputReadOnly"
         >
           <!-- ko template: { name: 'survey-string', data: question.locAddRowText } --><!-- /ko -->
           <span data-bind="css: question.cssClasses.iconAdd"></span>
         </button>
+        <!-- /ko -->
       </div>
       <!-- /ko -->
       <!-- ko if: question.koTable().showAddRowOnBottom -->

diff --git a/src/question_matrixdropdownrendered.ts b/src/question_matrixdropdownrendered.ts
@@ -217,6 +217,9 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
   public get showHeader(): boolean {
     return this.getPropertyValue("showHeader");
   }
+  public get showAddRow(): boolean {
+    return this.getPropertyValue("showAddRow", false);
+  }
   public get showAddRowOnTop(): boolean {
     return this.getPropertyValue("showAddRowOnTop", false);
   }
@@ -287,6 +290,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
     if (showAddRowOnBottom && this.matrix.getAddRowLocation() !== "topBottom") {
       showAddRowOnBottom = !showAddRowOnTop;
     }
+    this.setPropertyValue("showAddRow", this.matrix.canAddRow);
     this.setPropertyValue("showAddRowOnTop", showAddRowOnTop);
     this.setPropertyValue("showAddRowOnBottom", showAddRowOnBottom);
   }

diff --git a/src/react/reactquestion_matrixdynamic.tsx b/src/react/reactquestion_matrixdynamic.tsx
@@ -41,7 +41,7 @@ export class SurveyQuestionMatrixDynamic extends SurveyQuestionMatrixDropdownBas
   protected renderNoRowsContent(cssClasses: any): JSX.Element {
     const text: JSX.Element = this.renderLocString(this.matrix.locEmptyRowsText);
     const textDiv: JSX.Element = <div className={cssClasses.emptyRowsText}>{text}</div>;
-    const btn: JSX.Element = this.renderAddRowButton(cssClasses, true);
+    const btn: JSX.Element|undefined = this.matrix.renderedTable.showAddRow ? this.renderAddRowButton(cssClasses, true) : undefined;
     return (
       <div className={cssClasses.emptyRowsSection}>
         {textDiv}

diff --git a/src/vue/matrixdynamic.vue b/src/vue/matrixdynamic.vue
@@ -26,6 +26,7 @@
       </div>
       <button
         type="button"
+        v-if="question.renderedTable.showAddRow"
         :class="question.getAddRowButtonCss(true)"
         @click="addRowClick"
       >

diff --git a/tests/question_matrixdynamictests.ts b/tests/question_matrixdynamictests.ts
@@ -2163,6 +2163,31 @@ QUnit.test("Matrixdynamic addRowLocation", function (assert) {
   );
 });
 
+QUnit.test("Matrixdynamic showAddRow", function (assert) {
+  var question = new QuestionMatrixDynamicModel("matrix");
+  assert.equal(question.renderedTable.showAddRow, true, "#1");
+  question.readOnly = true;
+  assert.equal(question.renderedTable.showAddRow, false, "#2");
+  question.readOnly = false;
+  assert.equal(question.renderedTable.showAddRow, true, "#3");
+  question.rowCount = 0;
+  question.allowAddRows = false;
+  assert.equal(question.canAddRow, false, "question.canAddRow");
+  assert.equal(question.renderedTable.showAddRowOnTop, false, "showAddRowOnTop");
+  assert.equal(question.renderedTable.showAddRowOnBottom, false, "showAddRowOnBottom");
+  assert.equal(question.renderedTable.showAddRow, false, "#4");
+  question.hideColumnsIfEmpty = true;
+  assert.equal(question.canAddRow, false, "question.canAddRow, #5");
+  assert.equal(question.renderedTable.showAddRowOnTop, false, "showAddRowOnTop, #5");
+  assert.equal(question.renderedTable.showAddRowOnBottom, false, "showAddRowOnBottom, #5");
+  assert.equal(question.renderedTable.showAddRow, false, "#5");
+  assert.equal(question.renderedTable.showTable, false, "#5");
+  question.allowAddRows = true;
+  assert.equal(question.canAddRow, true, "question.canAddRow, #6");
+  assert.equal(question.renderedTable.showAddRow, true, "showAddRow #6");
+  assert.equal(question.renderedTable.showTable, false, "showTable #6");
+});
+
 QUnit.test("matrix.rowsVisibleIf", function (assert) {
   var survey = new SurveyModel();
   var page = survey.addNewPage("p1");