Question T18510
Visible to All Users

Dynamic Panel Count in Header

created 7 months ago

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?

Clipboard-File-1.png

Thanks!

Show previous comments (2)

    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.

        Answers approved by surveyjs Support

        created 7 months ago (modified 7 months ago)

        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; }
        JavaScript
        import { 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.