Question T6642
Visible to All Users

Progress bar update on click of next.

created 4 years ago

Hi,
how to update progress bar only after the user clicks next/ prev button (onNextPage event) for progress bar type 'questions'. Just like in 'check errors mode'.

Thanks in advance.

Sign in to comment on this post

Answers approved by surveyjs Support

created 4 years ago

Hello,
Here is the code:

JavaScript
var canUpdateProgressText = true;
var progressText = "";
survey.onCurrentPageChanging.add((sender, options) => {
    canUpdateProgressText = true;
});
survey.onProgressText.add((sender, options) => {
    if(canUpdateProgressText) {
    progressText = "Answered " + options.answeredQuestionCount + " from " + options.questionCount + ".";
    canUpdateProgressText = false;
    }
    options.text = progressText;
});

And here is the working example.

Thank you,
Andrew
SurveyJS Team

    Show previous comments (1)
    AT AT
    Andrew Telnov 4 years ago

      Hello,
      If we have several requests then yes. Right now, you can add it in your own code and it will work perfectly.

      Thank you,
      Andrew
      SurveyJS Team

      N N
      ntony 4 years ago

        Hi Andrew, Thanks for the solution. I got it to work while rendering the survey. But have two issues.

        1. even though the progress bar text is only updated on page change event, the progress bar itself gets updated right away.

        2. How can we add a check box for 'canUpdateProgressText' under navigation (next to progress bar settings) in the survey creator so that it can be set to a survey instead of adding to render survey part.

        Thanks in advance.

        AT AT
        Andrew Telnov 4 years ago

          Hello Tony,
          It will be updated at any case. However, if the text is not change, rendering should not be triggered. Rendering, changing DOM is resource consuming task, calculation it is not an issue.
          The second question could be solved with this code:

          JavaScript
          Survey.Serializer.addProperty("survey", {
    name: "canUpdateProgressText:boolean", nextToProperty: "progressBarType"
});

          Thank you,
          Andrew
          SurveyJS Team

          Sign in to comment on this post