QuestionPanelDynamicModel
A class that describes the Dynamic Panel question type.
Dynamic Panel allows respondents to add panels based on a panel template and delete them. Specify the templateElements property to configure panel template elements.
Properties
Events
Adds a new panel based on the template.
- Type:
- (index?: number, runAdditionalActions?: boolean) => PanelModel
- Parameters:
-
index, type: number ,
(Optional) An index at which to insert the new panel.
undefinedadds the panel to the end or inserts it after the current panel ifdisplayModeis"tab". A negative index (for instance, -1) adds the panel to the end in all cases, regardless of thedisplayModevalue.runAdditionalActions, type: boolean ,(Optional) Pass
trueif you want to perform additional actions: check whether a new panel can be added, expand and focus the new panel, and run animated effects. Default value:false(the listed actions are skipped).
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- panelCount * , panels * , allowAddPanel * , newPanelPosition
A caption for the Add Panel button.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
Specifies whether users are allowed to add new panels.
Default value: true
By default, users add new panels to the end. If you want to let users insert a new panel after the current panel, set the newPanelPosition property to "next".
- Type:
- boolean readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- True
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- canAddPanel * , allowRemovePanel
Specifies whether users are allowed to delete panels.
Default value: true
- Type:
- boolean readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- True
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- canRemovePanel * , allowAddPanel
Indicates whether it is possible to add a new panel.
This property returns true when all of the following conditions apply:
- Users are allowed to add new panels (
allowAddPanelistrue). - Dynamic Panel or its parent survey is not in read-only state.
panelCountis less thanmaxPanelCount.
- Type:
- boolean readonly
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- allowAddPanel * , isReadOnly * , panelCount * , maxPanelCount * , canRemovePanel
Indicates whether it is possible to delete panels.
This property returns true when all of the following conditions apply:
- Users are allowed to delete panels (
allowRemovePanelistrue). - Dynamic Panel or its parent survey is not in read-only state.
panelCountexceedsminPanelCount.
- Type:
- boolean readonly
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- allowRemovePanel * , isReadOnly * , panelCount * , minPanelCount * , canAddPanel
Specifies whether to display a confirmation dialog when a respondent wants to delete a panel.
- Type:
- boolean readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- confirmDeleteText
A message displayed in a confirmation dialog that appears when a respondent wants to delete a panel.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- confirmDelete
Specifies whether default values for a new panel should be copied from the last panel.
If you also specify defaultValue, it will be merged with the copied values.
- Type:
- boolean readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- Available since:
- v2.0.0
- See also:
- defaultValue *
A zero-based index of the currently displayed panel.
When displayMode is "list" or Dynamic Panel is empty (panelCount is 0), this property contains -1.
- Type:
- number writable
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- currentPanel * , panels * , panelCount * , displayMode
A PanelModel object that is the currently displayed panel.
When displayMode is "list" or Dynamic Panel is empty (panelCount is 0), this property contains null.
- Type:
- PanelModel writable
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- currentIndex * , panels * , panelCount * , displayMode
If it is not empty, then this value is set to every new panel, including panels created initially, unless the defaultValue is not empty
- Type:
- any readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- defaultValue * , copyDefaultValueFromLastEntry
Specifies how to display panels.
Possible values:
"list"(default) - Displays panels one under the other. View Demo"carousel"- Displays panels in a carousel. Users can switch between panels using navigation buttons."tab"- Displays each panel within a tab. Use thetemplateTabTitleto specify a template for tab titles. View Demo
- Type:
- "list" | "carousel" | "tab" readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- list
- Accepted values:
- list , carousel , tab
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- showProgressBar * , progressBarLocation
Indicates whether the add panel button is enabled. When set to false, the button is disabled but remains visible.
Default value: true
This property is not serialized.
- Type:
- boolean readonly
- Implemented in:
- QuestionPanelDynamicModel
- Available since:
- v2.5.25
- See also:
- allowAddPanel *
Indicates whether the remove panel button is enabled. When set to false, the button is disabled but remains visible.
Default value: true
This property is not serialized.
- Type:
- boolean readonly
- Implemented in:
- QuestionPanelDynamicModel
- Available since:
- v2.5.25
- See also:
- allowRemovePanel *
Switches Dynamic Panel to the next panel. Returns true in case of success, or false if displayMode is "list" or the current panel contains validation errors.
- Type:
- () => boolean
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- displayMode
Switches Dynamic Panel to the previous panel.
- Type:
- () => void
- Implemented in:
- QuestionPanelDynamicModel
Indicates whether the Next button is visible.
- Type:
- boolean readonly
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- currentIndex * , currentPanel * , nextPanelText
Indicates whether the Previous button is visible.
- Type:
- boolean readonly
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- currentIndex * , currentPanel * , prevPanelText
An error message displayed when users enter a duplicate value into a question that accepts only unique values (isUnique is set to true or keyName is specified).
A default value for this property is taken from a localization dictionary. Refer to the following help topic for more information: Localization & Globalization.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- keyName
Specifies a key question. Set this property to the name of a question used in the template, and Dynamic Panel will display keyDuplicationError if a user tries to enter a duplicate value in this question.
- Type:
- string readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- keyDuplicationError
A maximum number of panels in Dynamic Panel. Users cannot add new panels if panelCount equals maxPanelCount.
Default value: 100 (inherited from settings.panel.maxPanelCount)
settings.panel.maxPanelCount is the maximum number of panels on one page. If panels are not split into pages, it also limits maxPanelCount. If they are, only maxPanelCount limits the total number of panels, and only when you set it.
- Type:
- number writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- 100
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- panelCount * , minPanelCount * , allowAddPanel
A minimum number of panels in Dynamic Panel. Users cannot delete panels if panelCount equals minPanelCount.
Default value: 0
- Type:
- number readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- panelCount * , maxPanelCount * , allowRemovePanel
Specifies the position of newly added panels.
Possible values:
"last"(default) - New panels are added to the end."next"- New panels are inserted after the current panel.
- Type:
- string readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- last
- Accepted values:
- next , last
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- allowAddPanel * , addPanel
A caption for the Next button. Applies only if displayMode is different from "list".
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- Available since:
- v2.0.0
- See also:
- displayMode * , isNextButtonVisible *
A text displayed when Dynamic Panel contains no entries.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
The number of panels in Dynamic Panel.
- Type:
- number writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Accepted values:
- 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- minPanelCount * , maxPanelCount * , panelCountExpression
An expression that dynamically calculates the panel count. Overrides the static panelCount property.
The calculation result is clamped to the minPanelCount and maxPanelCount limits: a value below the minimum is set to minPanelCount, and a value above the maximum is capped at maxPanelCount. If panels are not split into pages, the global settings.panel.maxPanelCount setting also limits the maximum.
While this property is set, users cannot add or remove panels manually. The expression is reevaluated when its referenced values or panel limits change.
- Type:
- string readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- Available since:
- v3.0.4
An array of PanelModel objects created based on a panel template.
- Type:
- PanelModel[] readonly
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- PanelModel * , template * , panelCount
Specifies whether users can expand and collapse panels. Applies if displayMode is "list" and the templateTitle property is specified.
Possible values:
"default"(default) - All panels are displayed in full and cannot be collapsed."expanded"- All panels are displayed in full and can be collapsed in the UI."collapsed"- All panels display only their titles and descriptions and can be expanded in the UI."firstExpanded"- Only the first panel is displayed in full; other panels are collapsed and can be expanded in the UI.
- Type:
- string readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- default
- Accepted values:
- default , collapsed , expanded , firstExpanded
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- displayMode * , templateTitle
A caption for the Previous button. Applies only if displayMode is different from "list".
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- Available since:
- v2.0.0
- See also:
- displayMode * , isPrevButtonVisible *
Specifies the alignment of the progress bar relative to the currently displayed panel. Applies only if displayMode is "carousel".
Possible values:
"top"(default) - Displays the progress bar at the top of the current panel."bottom"- Displays the progress bar at the bottom of the current panel."topBottom"- Displays the progress bar at the top and bottom of the current panel.
- Type:
- "top" | "bottom" | "topBottom" readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- top
- Accepted values:
- top , bottom , topBottom
- Implemented in:
- QuestionPanelDynamicModel
Specifies a number or letter used to start numbering of elements inside the dynamic panel.
You can include desired prefixes and postfixes alongside the number or letter:
"questionStartIndex": "a.", // a., b., c., ...
"questionStartIndex": "#3", // #3, #4, #5, ...
"questionStartIndex": "(B)." // (B)., (C)., (D)., ...
Default value: "1." (inherited from the questionStartIndex property specified for the parent panel, page, or survey)
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- showQuestionNumbers
Deletes a panel from the panels array.
- Type:
- (value: any, confirmDelete?: boolean) => void
- Parameters:
-
value, type: any ,
A
PanelModelinstance or zero-based panel index.confirmDelete, type: boolean ,(Optional) Pass
trueif you want to perform additional actions: check whether the panel can be removed and display a confirmation dialog.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- addPanel
Specifies the location of the Remove Panel button relative to panel content.
Possible values:
"bottom"(default) - Displays the Remove Panel button below panel content."right"- Displays the Remove Panel button to the right of panel content.
- Type:
- string readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- bottom
- Accepted values:
- bottom , right
- Implemented in:
- QuestionPanelDynamicModel
- Available since:
- v2.0.0
- See also:
- removePanelText *
A caption for the Remove Panel button.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- removePanelButtonLocation
Specifies whether to display the progress bar. Applies only if displayMode is "carousel".
Default value: true
- Type:
- boolean readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- True
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- progressBarLocation
Specifies whether to display survey element numbers within the dynamic panel and how to calculate them.
Possible values:
"off"(default) - Hides question numbers."default"- Inherits the setting from the parent panel, page, or survey."recursive"- Applies recursive numbering to elements nested within the dynamic panel (for example, 1 -> 1.1 -> 1.1.1, etc.)."onpanel"- Starts numbering within the dynamic panel from scratch.
- Type:
- string readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- off
- Accepted values:
- default , onpanel , recursive , off
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- questionStartIndex * , showNumber
A placeholder for tab titles that applies when the templateTabTitle expression doesn't produce a meaningful value.
Default value: "New Panel" (taken from a localization dictionary)
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
A PanelModel object used as a template to create dynamic panels.
- Type:
- PanelModel readonly
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- PanelModel * , templateElements * , templateTitle * , panels * , panelCount
A template for panel descriptions.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- template * , templateTitle * , templateElements * , panels * , panelCount
An array of questions and panels included in a panel template.
- Type:
- IElement[] readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- template * , panels * , panelCount
Specifies the error message position.
Possible values:
"default"(default) - Inherits the setting from theerrorLocationproperty."top"- Displays error messages above questions."bottom"- Displays error messages below questions.
- Type:
- string readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- default
- Accepted values:
- default , top , bottom
- Implemented in:
- QuestionPanelDynamicModel
Gets or sets the location of question titles relative to their input fields.
"default"(default) - Inherits the setting from the Dynamic Panel'stitleLocationproperty, which in turn inherits thequestionTitleLocationproperty value specified for the Dynamic Panel's container (page or survey)."top"- Displays question titles above input fields."bottom"- Displays question titles below input fields."left"- Displays question titles to the left of input fields."hidden"- Hides question titles.
- Type:
- string readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Default value:
- default
- Accepted values:
- default , top , bottom , left
- Implemented in:
- QuestionPanelDynamicModel
- Available since:
- v2.0.0
- See also:
- titleLocation *
Sets consistent width for question titles in CSS values. Applies only when templateQuestionTitleLocation evaluates to "left".
Default value: undefined (inherits the actual value from the questionTitleWidth property of the parent panel or page.
- Type:
- string readonly
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- Available since:
- v2.0.4
A template for tab titles. Applies when displayMode is "tab".
The template can contain the following placeholders:
{panelIndex}- A panel index within the collection of all panels. Starts with 1.{visiblePanelIndex}- A panel index within the collection of visible panels. Starts with 1.
If you want to customize individual tab titles, handle SurveyModel's onGetDynamicPanelTabTitle event.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- templateTitle * , tabTitlePlaceholder * , displayMode
A template for panel titles.
The template can contain the following placeholders:
{panelIndex}- A panel index within the collection of all panels. Starts with 1.{visiblePanelIndex}- A panel index within the collection of visible panels. Starts with 1.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- template * , templateDescription * , templateElements * , panels * , panelCount
A Boolean expression that is evaluated against each panel. If the expression evaluates to false, the panel becomes hidden.
A survey parses and runs all expressions on startup. If any values used in the expression change, the survey re-evaluates it.
Use the {panel} placeholder to reference the current panel in the expression.
Refer to the following help topic for more information: Conditional Visibility.
- Type:
- string writable
This property is stored in the survey JSON definition and can be edited in the Survey Creator.
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- visibleIf * , visiblePanels
Returns the number of visible panels in Dynamic Panel.
- Type:
- number readonly
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- templateVisibleIf
An array of currently visible panels (PanelModel objects).
- Type:
- PanelModel[] readonly
- Implemented in:
- QuestionPanelDynamicModel
- See also:
- templateVisibleIf
Send feedback to the SurveyJS team
Need help? Visit our support page