Question T5030
Visible to All Users

Need help expanding panel programmatically from a button click present in custom widget

created 5 years ago

Hi Team,

I have learned that the only way to embedded html button in Surveyjs is by using custom widget.

So, there's a requirement in my project which is as follow :

  1. There are 2 panels, Panel 1 and Panel 2.
  2. Panel 1 will be in expanded state and Panel 2 will be in collapsed state initially.
  3. Panel 1 has a button developed using custom widget with label Navigate to next section
  4. On clicking this Navigate to next section, I need to collapse panel 1 and expand panel 2 programmatically.

I have tried out writing following code inside button.onclick function in my custom-widget ::

TypeScript
surveyModel.getPanelByName("panel1").collapse();
surveyModel.getPanelByName("panel2").expand();

For this, I actually had to rewrite the following in my custom-widget,

TypeScript
const surveyModel = new Survey.Model(json);

Now, this code was neither expanding panel2 nor collapsing panel1.

I found out that I will need to call survey.render() again to update the survey as suggested in this link.

The issue here is, I will need to place Survey.SurveyNG.render("surveyElement", { model: surveyModel }) inside the custom-widget, which is actually creating a new wrapper and in turn removing all the properties/validations I have placed inside my survey.component.ts file.

I have created a plunker, please help me to navigate to panel2 programmatically on Navigate to next section button click.

Please find the plunker link here.

Sign in to comment on this post

Answers approved by surveyjs Support

created 5 years ago

Hello,

The survey.getPanelByName("panel1").css property every time returns a new copy of CSS classes object. That's why it doesn't work.

You can check these samples:
https://surveyjs.io/Examples/Library?id=survey-customcss&platform=jQuery&theme=modern#content-js
https://surveyjs.io/Examples/Library?id=survey-cssclasses&platform=jQuery&theme=bootstrap#content-js
in order to modify/patch CSS classes.

The direct access to markup I think also is an option.

Thanks, Serge
SurveyJS Team

    Sign in to comment on this post
    created 5 years ago

    Hello,

    You used an old version of SurveyJS in your plunker.
    Here is the updated plunker - https://plnkr.co/edit/eSzR6A0uYhntKmpN

    Thanks, Serge
    SurveyJS Team

      Comments (3)
      A A
      Akhil 5 years ago

        Hey Serge,

        I actually tried to clone from an old plunker which used custom-widget.

        All good, many thanks mate :)

        Regards,
        Akhil

        Alex G 5 years ago

          Fine, feel free to contact us in case of any further questions

          A A
          Akhil 5 years ago

            Hey Alex and Serge,

            Is it possible to append a class to sv_panel_icon class from our custom widget on button click ?

            I actually want to change icon to a tick ✅ icon to show user that the section is completed.

            I have been searching through but didn't find anything to dynamically add a class "completed" from our widget.

            I've tried doing…

            JavaScript
            survey.getPanelByName("panel1").css.panel.icon += " completed"

            It's showing the completed class appended in console. log, but not actually getting updated in DOM. it's still sv_panel_icon

            CSS is fine, if I manually append "completed" class to sv_panel_icon, I am able to see my icon.

            however FYR, my selector is something like ::

            CSS
            .sv_p_title .sv_panel_icon.completed:: before {}

            Please correct me where I'm doing wrong.

            Best Regards,
            Akhil

            Sign in to comment on this post
            created 5 years ago

            Hello,

            Unfortunately your plunker doesn't contain code responsible for panel expanding. I've added it:

            JavaScript
            var survey = question.data;
survey.getAllPanels()[1].expand();

            Here is the modified plunker - https://plnkr.co/edit/eSzR6A0uYhntKmpN
            It works ok for me.

            Thanks, Serge
            SurveyJS Team

              Comments (1)
              A A
              Akhil 5 years ago

                Hey Serge,

                Thanks a lot for your prompt response. This is working absolutely fine.

                But to keep the code dynamic for multiple panels/sections, is there anything like :

                JavaScript
                survey.getPanelByName('panel_name').expand();
survey.getPanelByName('panel_name').collapse();

                instead of,

                JavaScript
                var survey = question.data;
survey.getAllPanels()[x].expand();

                Thanks & Regards,
                Akhil

                Sign in to comment on this post