Add survey.onMatrixDetailPanelVisibleChanged event fix #7964 (#7970)

src/base-interfaces.ts

@@ -201,11 +201,8 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
   }): any;
   matrixRowRemoved(question: IQuestion, rowIndex: number, row: any): any;
   matrixRowRemoving(question: IQuestion, rowIndex: number, row: any): boolean;
-  matrixAllowRemoveRow(
-    question: IQuestion,
-    rowIndex: number,
-    row: any
-  ): boolean;
+  matrixAllowRemoveRow(question: IQuestion, rowIndex: number, row: any): boolean;
+  matrixDetailPanelVisibleChanged(question: IQuestion, rowIndex: number, row: any, isShowing: boolean): void;
   matrixCellCreating(question: IQuestion, options: any): any;
   matrixCellCreated(question: IQuestion, options: any): any;
   matrixAfterCellRender(question: IQuestion, options: any): any;

src/question_matrixdropdownbase.ts

@@ -2346,6 +2346,9 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel<Mat
     if (!!this.renderedTable) {
       this.renderedTable.onDetailPanelChangeVisibility(row, val);
     }
+    if(this.survey) {
+      this.survey.matrixDetailPanelVisibleChanged(this, row.rowIndex - 1, row, val);
+    }
     if (val && this.detailPanelMode === "underRowSingle") {
       var rows = this.visibleRows;
       for (var i = 0; i < rows.length; i++) {

src/survey-events-api.ts

@@ -709,6 +709,18 @@ export interface MatrixAllowRemoveRowEvent extends MatrixDynamicQuestionEventMix
    */
   allow: boolean;
 }
+export interface MatrixDetailPanelVisibleChangedEvent extends MatrixDropdownQuestionEventMixin {
+  /**
+   * A matrix row for which the event is raised.
+   */
+  row: MatrixDropdownRowModelBase;
+  /**
+   * A zero-based row index.
+   */
+  rowIndex: number;
+  isShowing: boolean;
+  detailPanel: PanelModel;
+}
 
 export interface MatrixCellCreatingBaseEvent extends MatrixDropdownQuestionEventMixin {
   /**

src/survey.ts

@@ -60,10 +60,10 @@ import {
   ProcessTextValueEvent, UpdateQuestionCssClassesEvent, UpdatePanelCssClassesEvent, UpdatePageCssClassesEvent, UpdateChoiceItemCssEvent, AfterRenderSurveyEvent,
   AfterRenderHeaderEvent, AfterRenderPageEvent, AfterRenderQuestionEvent, AfterRenderQuestionInputEvent, AfterRenderPanelEvent, FocusInQuestionEvent, FocusInPanelEvent,
   ShowingChoiceItemEvent, ChoicesLazyLoadEvent, GetChoiceDisplayValueEvent, MatrixRowAddedEvent, MatrixBeforeRowAddedEvent, MatrixRowRemovingEvent, MatrixRowRemovedEvent,
-  MatrixAllowRemoveRowEvent, MatrixCellCreatingEvent, MatrixCellCreatedEvent, MatrixAfterCellRenderEvent, MatrixCellValueChangedEvent, MatrixCellValueChangingEvent,
-  MatrixCellValidateEvent, DynamicPanelModifiedEvent, DynamicPanelRemovingEvent, TimerPanelInfoTextEvent, DynamicPanelItemValueChangedEvent, DynamicPanelGetTabTitleEvent,
-  DynamicPanelCurrentIndexChangedEvent, IsAnswerCorrectEvent, DragDropAllowEvent, ScrollingElementToTopEvent, GetQuestionTitleActionsEvent, GetPanelTitleActionsEvent,
-  GetPageTitleActionsEvent, GetPanelFooterActionsEvent, GetMatrixRowActionsEvent, ElementContentVisibilityChangedEvent, GetExpressionDisplayValueEvent,
+  MatrixAllowRemoveRowEvent, MatrixDetailPanelVisibleChangedEvent, MatrixCellCreatingEvent, MatrixCellCreatedEvent, MatrixAfterCellRenderEvent, MatrixCellValueChangedEvent,
+  MatrixCellValueChangingEvent, MatrixCellValidateEvent, DynamicPanelModifiedEvent, DynamicPanelRemovingEvent, TimerPanelInfoTextEvent, DynamicPanelItemValueChangedEvent,
+  DynamicPanelGetTabTitleEvent, DynamicPanelCurrentIndexChangedEvent, IsAnswerCorrectEvent, DragDropAllowEvent, ScrollingElementToTopEvent, GetQuestionTitleActionsEvent,
+  GetPanelTitleActionsEvent, GetPageTitleActionsEvent, GetPanelFooterActionsEvent, GetMatrixRowActionsEvent, ElementContentVisibilityChangedEvent, GetExpressionDisplayValueEvent,
   ServerValidateQuestionsEvent, MultipleTextItemAddedEvent, MatrixColumnAddedEvent, GetQuestionDisplayValueEvent, PopupVisibleChangedEvent, ChoicesSearchEvent, OpenFileChooserEvent
 } from "./survey-events-api";
 import { QuestionMatrixDropdownModelBase } from "./question_matrixdropdownbase";
@@ -673,7 +673,7 @@ export class SurveyModel extends SurveyElementCore
    * This event is obsolete. Use the [`onMatrixRenderRemoveButton`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onMatrixRenderRemoveButton) event instead.
    */
   public onMatrixAllowRemoveRow: EventBase<SurveyModel, MatrixAllowRemoveRowEvent> = this.onMatrixRenderRemoveButton;
-
+  public onMatrixDetailPanelVisibleChanged: EventBase<SurveyModel, MatrixDetailPanelVisibleChangedEvent> = this.addEvent<SurveyModel, MatrixDetailPanelVisibleChangedEvent >();
   /**
    * An event that is raised before a cell in a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdropdown/) or [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/) is created. Use this event to change the type of individual matrix cells.
    * @see onAfterRenderMatrixCell
@@ -4956,33 +4956,28 @@ export class SurveyModel extends SurveyElementCore
     this.onMatrixRowRemoving.fire(this, options);
     return options.allow;
   }
-  matrixAllowRemoveRow(
-    question: QuestionMatrixDynamicModel,
-    rowIndex: number,
-    row: any
-  ): boolean {
-    var options = {
-      question: question,
-      rowIndex: rowIndex,
-      row: row,
-      allow: true,
-    };
+  matrixAllowRemoveRow(question: QuestionMatrixDynamicModel, rowIndex: number, row: any): boolean {
+    const options = { question: question, rowIndex: rowIndex, row: row, allow: true };
     this.onMatrixRenderRemoveButton.fire(this, options);
     return options.allow;
   }
-  matrixCellCreating(question: QuestionMatrixDropdownModelBase, options: any) {
+  matrixDetailPanelVisibleChanged(question: QuestionMatrixDropdownModelBase, rowIndex: number, row: any, isShowing: boolean): void {
+    const options = { question: question, rowIndex: rowIndex, row: row, isShowing: isShowing, detailPanel: row.detailPanel };
+    this.onMatrixDetailPanelVisibleChanged.fire(this, options);
+  }
+  matrixCellCreating(question: QuestionMatrixDropdownModelBase, options: any): void {
     options.question = question;
     this.onMatrixCellCreating.fire(this, options);
   }
-  matrixCellCreated(question: QuestionMatrixDropdownModelBase, options: any) {
+  matrixCellCreated(question: QuestionMatrixDropdownModelBase, options: any): void {
     options.question = question;
     this.onMatrixCellCreated.fire(this, options);
   }
-  matrixAfterCellRender(question: QuestionMatrixDropdownModelBase, options: any) {
+  matrixAfterCellRender(question: QuestionMatrixDropdownModelBase, options: any): void {
     options.question = question;
     this.onAfterRenderMatrixCell.fire(this, options);
   }
-  matrixCellValueChanged(question: QuestionMatrixDropdownModelBase, options: any) {
+  matrixCellValueChanged(question: QuestionMatrixDropdownModelBase, options: any): void {
     options.question = question;
     this.onMatrixCellValueChanged.fire(this, options);
   }

tests/question_matrixdropdownbasetests.ts

@@ -1102,4 +1102,34 @@ QUnit.test("Do not resetTable for always invisible column", function (assert) {
   table["$ref"] = "ref1";
   cellQuestion.value = "test";
   assert.equal(matrix.renderedTable["$ref"], "ref1", "Do not recreate the rendered table");
-});
+});
+QUnit.test("survey.onMatrixDetailPanelVisibleChanged event", function (assert) {
+  const survey = new SurveyModel({
+    questionErrorLocation: "bottom",
+    elements: [
+      {
+        type: "matrixdropdown",
+        name: "matrix",
+        columns: [{ name: "col1" }],
+        rows: [0],
+        detailPanelMode: "underRow",
+        detailElements: [{ type: "text", name: "q1" }],
+      },
+    ],
+  });
+  const actions = new Array<string>();
+  survey.onMatrixDetailPanelVisibleChanged.add((sender, options) => {
+    const action = (options.isShowing ? "show" : "hide") + ":" + options.rowIndex;
+    actions.push(action);
+    if(options.isShowing) {
+      options.detailPanel.getQuestionByName("q1").title = "Question 1";
+    }
+  });
+  const matrix = <QuestionMatrixDropdownModelBase>survey.getQuestionByName("matrix");
+  const row = matrix.visibleRows[0];
+  row.showDetailPanel();
+  const qDetail = row.detailPanel.getQuestionByName("q1");
+  assert.equal(qDetail.title, "Question 1", "set title");
+  row.hideDetailPanel();
+  assert.deepEqual(actions, ["show:0", "hide:0"], "check actions");
+});