Question T8621
Visible to All Users

Does the DOM load dynamically as you scroll on survey creator?

created 3 years ago (modified 3 years ago)

Hi,

This is a pretty straight forward question which hopefully doesn't require too much of a backstory: does the document element from the DOM load dynamically as a user scrolls up or down the survey creator page?

I'm implementing a functionality which looks through certain parts of the Survey Creator page and using the document.getElementById or document.getElementsByClassName. For the most part, everything I'm doing with this works, except the results are only found at the point of the page that I am in. For example, If I'm on the first page, I will only be able to find the elements on the first page. If I'm on the second, I can see the results of the first and second pages. Etc.

This is why I'm wondering whether the document element is actually loaded dynamically. If this is the case, is there any way that I can specify it so that every loads when the component is mounted?

Answers approved by surveyjs Support

created 3 years ago (modified 3 years ago)

Hello John,
Creator V2 uses lazy rendering functionality. We render a question skeleton first and when it becomes visible, on scrolling renders it fully.

Thank you,
Andrew
SurveyJS Team

    Show previous comments (4)
    JS JS
    John Stevenson 3 years ago

      Thank you. Could you let me know how I can override the rendering? I've tried Survey.settings.lazyRowsRendering = false; but that didn't work.

      My use case is quite particular to what I'm working on but in summary, it's for the user to be able to find different things within the page with ease.

        Do you want to introduce a find text functionality within the page?
        We wanted to introduce it out of the box.
        Anyway, we set lazyRendering property directly on creating survey on designer surface. You can override the property itself on creating the survey instance. Here is the example and code:

        JavaScript
        this.creator.onSurveyInstanceCreated.add((sender, options) => { if (options.reason !== "designer") return; const survey = options.survey; delete survey.lazyRendering; Object.defineProperty(survey, "lazyRendering", { get: function () { return false; }, set: function (newValue) {}, enumerable: true, configurable: true }); });

        Thank you,
        Andrew
        SurveyJS Team

        JS JS
        John Stevenson 3 years ago

          Thank you so much. This is exactly what I needed.