Question T22654
Visible to All Users
Duplicate

We have closed this ticket because another page addresses its subject:

How to show expanded detailPanel in form

How to expand the detailPanel in MatrixDynamic ?

created 8 days ago (modified 8 days ago)

Hello,

We have a Custom Matrix Dynamic question. We want to show the detailPanel expanded by default. Currently all detailPanel rows are collapsed.

I have added screenshots and json for this question to the attachment.

Please guide us to implement this.

Clipboard-File-1.png
Clipboard-File-2.png

JSON
{ "type": "matrixdynamic", "name": "treatPlanObjectivesAndGoals", "state": "expanded", "title": "Treatment Plan Objectives and Goals", "hideNumber": true, "columns": [ { "name": "index", "title": " ", "cellType": "expression", "width": "5%", "expression": "{rowIndex}" }, { "name": "Goal Name", "cellType": "text", "minWidth": "300px" }, { "name": "dueDate", "title": "Due Date", "cellType": "text", "minWidth": "300px", "inputType": "date" } ], "detailElements": [ { "type": "dropdown", "name": "priority", "title": "Priority", "choices": [ "High", "Medium", "Low" ] }, { "type": "text", "name": "dateInitiated", "title": "Date Initiated", "defaultValueExpression": "getDate()", "inputType": "date" }, { "type": "radiogroup", "name": "goalStatus", "title": "Goal Status", "hideNumber": true, "choicesByUrl": { "url": "[https://api.example.com/v1/api/goals](https://api.example.com/v1/api/goals)", "valueName": "name", "titleName": "name", "allowEmptyResponse": true } }, { "type": "text", "name": "dateCompleted", "visibleIf": "{row.goalStatus} =='Completed'", "title": "Date Completed", "inputType": "date" }, { "type": "matrixdynamic", "name": "objectives", "title": "Objective", "columns": [ { "name": "index", "title": " ", "cellType": "expression", "width": "5%", "expression": "{rowIndex}" }, { "name": "interventionSteps", "title": "Intervention Steps", "cellType": "comment", "minWidth": "400px", "rows": 11 }, { "name": "stageofReadiness", "title": "Stage of Readiness", "cellType": "dropdown", "choices": [ "Action", "Preparation", "Maintenance", "Pre-contemplation", "Contemplation" ] }, { "name": "barriers", "title": "Barriers", "cellType": "comment", "minWidth": "400px", "rows": 11 }, { "name": "outcome", "title": "Outcome", "cellType": "comment", "minWidth": "400px", "rows": 11 }, { "name": "objectiveCompleted", "title": "Objective Completed", "cellType": "dropdown", "choices": [ "Yes", "No" ] }, { "name": "objectiveCompletiondate", "title": "Objective Completion Date", "cellType": "text", "minWidth": "400px", "visibleIf": "{Intervention[0].objectiveCompleted} == 'Yes'", "inputType": "date" } ], "choices": [ 1, 2, 3, 4, 5 ], "allowRemoveRows": false, "rowCount": 1, "addRowText": "Add Intervention" } ], "detailPanelMode": "underRow", "rowCount": 1, "maxRowCount": 50, "addRowText": "Add Goal", "removeRowText": "Remove Goal", "detailPanelShowOnAdding": true }

Thanks
Shobhit

Answers approved by surveyjs Support

created 8 days ago

Hello Shobhit,
It seems that we've been already discussing this task in your other thread: How to show expanded detailPanel in form.
To expand all detail sections of a matrix, iterate through QuestionMatrixDynamicModel.visibleRows and call the showDetailPanel function for a row object.

Code
const matrix = survey.getQuestionByName("treatPlanObjectivesAndGoals"); matrix.visibleRows.forEach((row) => row.showDetailPanel());

Let me know if you have further questions.