Hello,
Is there a way to display the panel count on a Dynamic Panel in both the header of the panel as well as the footer?
Thanks!
Hello,
Is there a way to display the panel count on a Dynamic Panel in both the header of the panel as well as the footer?
Thanks!
Hello,
To add a panel progress at the top, you can register a custom panel title action. Please refer to the following demo: View Plunker.
CSS.paneldynamic-top-navigator-style{
border: none;
background: none;
cursor: default;
pointer-events: none;
outline: none;
font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
line-height: calc(1.5*(var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
font-weight: 100;
}
JavaScriptimport { Serializer, ComputedUpdater } from "survey-core";
Serializer.addProperty('paneldynamic', 'progresstext');
const updateNavigatorLabel = (dynamicPanel) => {
dynamicPanel.progresstext = dynamicPanel.currentIndex + 1 + " of " + dynamicPanel.panelCount;
}
survey.onGetQuestionTitleActions.add((_, options) => {
if(options.question.getType() === "paneldynamic") {
const panel = options.question;
const panelNavigatorAction = {
id: "show-description",
location: "end",
active: false,
innerCss: "paneldynamic-top-navigator-style",
disableTabStop: true,
title: new ComputedUpdater(() => {
return panel.progresstext;
})
};
options.titleActions.push(panelNavigatorAction);
updateNavigatorLabel(options.question);
}
});
survey.onDynamicPanelCurrentIndexChanged.add((sender, options) => {
updateNavigatorLabel(options.question);
})
Let me know if this option works for you.
Hello,
The
"progressTopBottom"
render mode should enable the progress bar at the top and bottom of a panel dynamic element. However, it appears that the progress bar is currently appears only at bottom.We will research this issue and let you know our results: https://github.com/surveyjs/survey-library/issues/8390.
Please stay tuned.
Just to confirm, we are using the "Tabs" option for the display mode:
Hello,
Thank you for the update. Unfortunately, the tabbed UI doesn't have an option to display a progress bar on top. Would you please take a moment and elaborate on your usage scenario? Do you have large content within panels and therefore, wish to duplicate the progress bar at the top?
Thank you
Yes, each panel has sufficient content to push the footer beyond the page. As a result, when users are using the tab navigation, they are unable to see the panel count.
Hello,
I forwarded the following issue to our developers for further consideration: https://github.com/surveyjs/survey-library/issues/8391. We'll update you as soon as we get any news to share.
Please stay tuned.