diff --git a/src/base-interfaces.ts b/src/base-interfaces.ts index 61c7fbb377..db71b96181 100644 --- a/src/base-interfaces.ts +++ b/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; diff --git a/src/question_matrixdropdownbase.ts b/src/question_matrixdropdownbase.ts index ebae51fd56..f1ea7dfd4d 100644 --- a/src/question_matrixdropdownbase.ts +++ b/src/question_matrixdropdownbase.ts @@ -2346,6 +2346,9 @@ export class QuestionMatrixDropdownModelBase extends QuestionMatrixBaseModel = this.onMatrixRenderRemoveButton; - + public onMatrixDetailPanelVisibleChanged: EventBase = this.addEvent(); /** * 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); } diff --git a/tests/question_matrixdropdownbasetests.ts b/tests/question_matrixdropdownbasetests.ts index 99ba6d6b91..63f07e61fa 100644 --- a/tests/question_matrixdropdownbasetests.ts +++ b/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"); -}); \ No newline at end of file +}); +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(); + 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 = 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"); +});