[Knockout] Multi-Select Matrix - The totalText property doesn't work …

src/defaultCss/defaultV2Css.ts

@@ -445,6 +445,8 @@ export var defaultV2Css = {
     rowHasEndActions: "sd-table__row--has-end-actions",
     headerCell: "sd-table__cell sd-table__cell--header",
     rowTextCell: "sd-table__cell sd-table__cell--row-text",
+    footerCell: "sd-table__cell sd-table__cell--footer",
+    footerTotalCell: "sd-table__cell sd-table__cell--footer-total",
     columnTitleCell: "sd-table__cell--column-title",
     cellRequiredText: "sd-question__required-text",
     detailButton: "sd-table__cell--detail-button",
@@ -480,6 +482,7 @@ export var defaultV2Css = {
     itemCell: "sd-table__cell--item",
     headerCell: "sd-table__cell sd-table__cell--header",
     rowTextCell: "sd-table__cell sd-table__cell--row-text",
+    footerCell: "sd-table__cell sd-table__cell--footer",
     columnTitleCell: "sd-table__cell--column-title",
     cellRequiredText: "sd-question__required-text",
     button: "sd-action sd-matrixdynamic__btn",

src/defaultV2-theme/blocks/sd-table.scss

@@ -236,6 +236,15 @@
   }
 }
 
+.sd-table__cell--footer {
+  text-align: right;
+}
+
+.sd-table__cell--footer-total {
+  font-weight: 600;
+  text-align: left;
+}
+
 .sd-table__cell--detail-panel {
   border-top: calcSize(1) solid transparent;
   padding: calcSize(3) calcSize(1) calcSize(4);

src/knockout/templates/question-matrixdynamic.html

@@ -81,6 +81,11 @@
       <!-- /ko -->
     </div>
     <!-- /ko -->
+    <!-- ko ifnot: $data.matrix -->
+    <!-- ko if: $data.locTitle -->
+    <!-- ko template: { name: 'survey-string', data: $data.locTitle } --><!-- /ko -->
+    <!-- /ko -->
+    <!-- /ko -->
   </td>
 </script>
 <script type="text/html" id="survey-matrixtable">
@@ -172,9 +177,7 @@
     <tfoot>
       <tr>
         <!-- ko foreach: question.koTable().footerRow.cells -->
-
             <!-- ko template: { name: 'survey-matrixcell', afterRender: function(els) { $data.matrix && $data.matrix.koCellAfterRender(els, $data); } } --><!-- /ko -->
-
         <!-- /ko -->
       </tr>
     </tfoot>

src/question_matrixdropdownrendered.ts

@@ -452,9 +452,10 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
       this.footerRow.cells.push(this.createHeaderCell(null, "action"));
     }
     if (this.matrix.hasRowText) {
-      this.footerRow.cells.push(
-        this.createTextCell(this.matrix.getFooterText())
-      );
+      const cell = this.createTextCell(this.matrix.getFooterText());
+      cell.className = new CssClassBuilder().append(cell.className)
+        .append(this.cssClasses.footerTotalCell).toString();
+      this.footerRow.cells.push(cell);
     }
     var cells = this.matrix.visibleTotalRow.cells;
     for (var i = 0; i < cells.length; i++) {
@@ -467,6 +468,8 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
         if (cell.column) {
           this.setHeaderCellWidth(cell.column, editCell);
         }
+        editCell.className = new CssClassBuilder().append(editCell.className)
+          .append(this.cssClasses.footerCell).toString();
         this.footerRow.cells.push(editCell);
       }
     }

visualRegressionTests/tests/defaultV2/matrixdynamic.ts

@@ -235,7 +235,7 @@ frameworks.forEach(framework => {
     });
   });
 
-  test("Check Matrixdynamic with showInMultipleColumns", async (t) => {
+  test("Check matrixdropdown with showInMultipleColumns", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1280, 1100);
       await initSurvey(framework, {
@@ -302,4 +302,51 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("matrixdynamic-with-totals.png", matrixdynamicRoot, t, comparer);
     });
   });
+  test("Check Matrixdropdown with totals", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1280, 1100);
+      await initSurvey(framework, {
+        showQuestionNumbers: "off",
+        elements: [
+          {
+            "type": "matrixdropdown",
+            "name": "question1",
+            "columns": [
+              {
+                "name": "col1",
+                "cellType": "text",
+                "inputType": "number",
+                "defaultValueExpression": "{rowIndex}",
+                "totalType": "sum"
+              },
+              {
+                "name": "col2",
+                "cellType": "text",
+                "inputType": "number",
+                "defaultValueExpression": "{rowIndex} + 5",
+                "totalType": "sum"
+              },
+              {
+                "name": "col3",
+                "cellType": "text",
+                "inputType": "number",
+                "defaultValueExpression": "{rowIndex} + 10",
+                "totalType": "sum"
+              }
+            ],
+            "rows": [
+              "Row 1",
+              "Row 2",
+              "Row 3"
+            ],
+            "totalText": "Total:"
+          }
+        ]
+      });
+
+      const matrixdynamicRoot = Selector(".sd-question");
+      await resetFocusToBody();
+      await takeElementScreenshot("matrixdropdown-with-totals.png", matrixdynamicRoot, t, comparer);
+    });
+  });
 });