Request: Collapsible button (like accordion) as a type of rendermode for paneldynamic

[testweird123]

Are you requesting a feature, reporting a bug or ask a question?

Requesting a Feature.

What is the current behavior?

The rendermode property of paneldynamic currently has options list and progressbar.

What is the expected behavior?

I would like to use multiple collapsible buttons to achieve the same.

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Employee 1</a>
  <div id="collapse1" class="panel-collapse collapse in">
        Employee Details
  </div>

For example, in this code, instead of progress bars on page 2 i would like to use collapsible buttons https://jsfiddle.net/surveyjs/xdomvzxz/?utm_source=website&utm_medium=embed&utm_campaign=xdomvzxz

Specify your

• browser: Chrome
• browser version: 64.0.3282.119
• surveyjs platform (angular or react or jquery or knockout or vue):jquery
• surveyjs version: 1.0.10

[andrewtelnov]

@testweird123 Do you mean something similar to Panel collapse/expand? Please go to this example and Look at "Send us your contact information (optionally)" panel.

Thank you, Andrew

[testweird123]

Yes, something similar to that, I think it currently does not work for paneldynamic type.

[andrewtelnov]

@testweird123 Here is the issue I have with the implementation. If we are talking for a typical panel, the panel.state (normal/collapsed/expanded) is stored in the panel model. Dynamic panel is different. It has a template panel that is used to generate panels in run-time. There is no place where I can store the state for generated panels. I can't store it in the panel dynamic value, it is not correct. So, even if I implement this functionality, all panels will be collapsed or expanded by default and there will be no build-in functionality to persist their state. I may go further and have 4 values in the state: (normal/allCollapsed/allExpanded/firstExpanded), however the issue with state persisting could not be solved. What do you think?

Thank you, Andrew

[testweird123]

I'm not sure I understand what you mean by state persisting. Say for example you implement it, and you put a value "firstExpanded", shouldn't it appear so on first viewing the question? how would the state change?

[andrewtelnov]

@testweird123 Let's say you want to make the second panel be expanded instead of the first one or the first and second panels. Another popular scenario, a user did not finish with the form, save and leave the page. After some time, he comes back and continue to fill the form. Right now, all you need to do, to implement this scenario, set the previous entered data into survey, survey.data = savedData; //they are in JSON format and restore the current page: survey.currentPageNo = savedCurrentPageNo;

However, the state of the dynamic panels (expand/collpase) would not be restored.

Anyway, I beleive, it is a good idea and it worth to implement. the "firstExpanded" value would cover 90% of scenarios. The most people would like to expand the first panel by default and have others in collapsed state. Since, It should be easy to implement, I will just add this functionality.

[andrewtelnov]

@testweird123 It has been implemented. Please look at unit tests in the commit above to understand the logic. The functionality will be in the next minor update, on this week.

/**
   * Use this property to allow the end-user to collapse/expand the panels. It works only if the renderMode property equals to "list" and templateTitle property is not empty. The following values are available:
   * <br/> default - the default value. User can't collpase/expand panels
   * <br/> expanded - User can collpase/expand panels and all panels are expanded by default
   * <br/> collapsed - User can collpase/expand panels and all panels are collapsed by default
   * <br/> firstExpanded - User can collpase/expand panels. The first panel is expanded and others are collapsed
   * @see renderMode
   * @see templateTitle
   */
  public get panelsState(): string {
    return this.getPropertyValue("panelsState", "default");
  }
  public set panelsState(val: string) {
    this.setPropertyValue("panelsState", val);
  }

Thank you, Andrew

[testweird123]

From reading the comments, this seems like it should do the job. I'm afraid I do not understand the functions. Thanks a lot for the quick response. I trust that this should be functional soon. You may close this if you wish to. Thank you.

[testweird123]

I'm sorry for asking again but is this feature functional as of now? I'm afraid I could not get it to work if it is

[andrewtelnov]

@testweird123 Here is the example: https://plnkr.co/edit/QaqzW7sOkeBAg3Pn4Y2L?p=preview

Thank you, Andrew

[testweird123]

Thanks a lot!! Closing it!