SurveyJS v2.5.25
Released: May 18, 2026
SurveyJS v2.5.25 introduces a Dynamic Panel API that lets you enable and disable the Add Panel and Remove Panel buttons at runtime. Bug fixes and minor enhancements are included as well.
Dynamic Panel: Enable and disable Add and Remove Panel buttons at runtime
This release adds the enableAddPanel and enableRemovePanel properties, which allow you to control whether the Add Panel and Remove Panel buttons are enabled or disabled at runtime. This provides an alternative to the default behavior, where these buttons are hidden when they are not available.
The enableAddPanel and enableRemovePanel properties are not serialized, meaning they can only be changed in JavaScript and cannot be defined in the survey JSON schema.
To implement custom enable/disable logic, handle the onDynamicPanelAdded and onDynamicPanelRemoved events. For example, the code below disables the Add Panel button when the panel count reaches 5, and disables the Remove Panel button when only one panel remains. Note that to apply this logic to a configured survey, you need to create an empty survey model and populate it using the fromJSON method after attaching the event handlers.
import { Model } from "survey-core";
function dynamicPanelHandler(_, options) {
const dPanel = options.question;
dPanel.enableRemovePanel = dPanel.panelCount > 1;
dPanel.enableAddPanel = dPanel.panelCount < 5;
}
const surveyJson = { /* Survey JSON schema */ };
const survey = new Model();
survey.onDynamicPanelAdded.add(dynamicPanelHandler);
survey.onDynamicPanelRemoved.add(dynamicPanelHandler);
survey.fromJSON(surveyJson);
Another use case is defining custom expression properties that let you specify disabling rules dynamically instead of hard-coding them in event handlers. In the following example, the Add Panel and Remove Panel buttons are disabled based on checkbox selections.
import { Serializer, Model } from "survey-core";
Serializer.addProperty("paneldynamic", {
name: "enableAddPanelIf:expression",
category: "logic",
onExecuteExpression: (obj, res) => {
obj.enableAddPanel = !!res;
}
});
Serializer.addProperty("paneldynamic", {
name: "enableRemovePanelIf:expression",
category: "logic",
onExecuteExpression: (obj, res) => {
obj.enableRemovePanel = !!res;
}
});
const surveyJson = {
elements: [
{
type: "checkbox",
name: "options",
title: "Options",
choices: [
{
value: "disableAddButton",
text: "Disable \"Add Panel\" button"
},
{
value: "disableRemoveButton",
text: "Disable \"Remove Panel\" button"
}
]
},
{
type: "paneldynamic",
name: "panel",
title: "Dynamic Panel",
enableAddPanelIf: "{options} notcontains 'disableAddButton'",
enableRemovePanelIf: "{options} notcontains 'disableRemoveButton'",
panelCount: 1,
templateElements: [
{
type: "text",
name: "question1",
title: "Question 1"
}
]
}
]
};
const survey = new Model(surveyJson);
Bug Fixes and Minor Enhancements
Form Library
- A large gap appears in a survey when the progress bar is displayed at the bottom and the TOC is enabled (#11256)
- Panel required error does not disappear after answering a panel question (#11264)
- Lazy Rendering: Some elements do not appear when scrolling a content-heavy survey (#11267)
- Dynamic Matrix:
onExecuteExpressionof a custom expression property is no longer raised when an adjacent matrix cell is updated (#11273)
Survey Creator
- Cannot add custom collection properties that support add/remove actions (#7705)
Dashboard
- Table View does not display responses to Multi-Select Matrix questions (#779)
How to Update SurveyJS Libraries in Your Application
Angular
npm i survey-core@v2.5.25 survey-angular-ui@v2.5.25 --save
npm i survey-creator-core@v2.5.25 survey-creator-angular@v2.5.25 --save
npm i survey-analytics@v2.5.25 --save
npm i survey-pdf@v2.5.25 --save
React
npm i survey-core@v2.5.25 survey-react-ui@v2.5.25 --save
npm i survey-creator-core@v2.5.25 survey-creator-react@v2.5.25 --save
npm i survey-analytics@v2.5.25 --save
npm i survey-pdf@v2.5.25 --save
Vue.js
npm i survey-core@v2.5.25 survey-vue3-ui@v2.5.25 --save
npm i survey-creator-core@v2.5.25 survey-creator-vue@2.5.25 --save
npm i survey-analytics@2.5.25 --save
npm i survey-pdf@2.5.25 --save
HTML/CSS/JavaScript
<link href="https://unpkg.com/survey-core@2.5.25/survey-core.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/survey-core@2.5.25/survey.core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-js-ui@2.5.25/survey-js-ui.min.js"></script>
<script src="https://unpkg.com/survey-core@2.5.25/themes/index.min.js"></script>
<script src="https://unpkg.com/survey-creator-core@2.5.25/themes/index.min.js"></script>
<link href="https://unpkg.com/survey-creator-core@2.5.25/survey-creator-core.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/survey-creator-core@2.5.25/survey-creator-core.min.js"></script>
<script src="https://unpkg.com/survey-creator-js@2.5.25/survey-creator-js.min.js"></script>
<link href="https://unpkg.com/survey-analytics@2.5.25/survey.analytics.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics@2.5.25/survey.analytics.min.js"></script>
<script src="https://unpkg.com/survey-pdf@2.5.25/survey.pdf.min.js"></script>
<script src="https://unpkg.com/survey-pdf@2.5.25/pdf-form-filler.min.js"></script>