Dynamically Add Accordion Items

Webix JS
1

I am trying to dynamically add accordion item views to an existing accordion.

I want to do $$(‘accordion’).addView(myAccordionItem) to add to the accordion, and not pass in the configuration.

Is this possible?

I see that addView() works if pass in a configuration file, but if I pass in an instance an exception is thrown.

Please see my code below:

webix.ready(function(){

  var app = webix.ui({
    container:"app",
    view:"accordion",
    multi:true,
    id: 'accordion',
    cols:[ //or rows 
      { 
        header:"col 1",
        id:'col1'
      },
      { header:"col 2", body:"content 2" },
      { header:"col 3", body:"content 3" }
    ]
  });

  var config = {
    view:"accordionitem",
    header:"dyn header",
    body:"dyn body"
  };

  // This works
  //$$('accordion').addView(config);
  
  
  // This does not work
  var view = webix.ui(config);
  $$('accordion').addView(view);

});
2

Accordion Item can’t be created through the webix.ui without defining the parent element. ( Item requires some parent element by design )

The above code will work if you will create a dummy layout with Item inside and will use addView later.

http://webix.com/snippet/f9dbea6a

Is there some specific use-case why do you want to create an Item instead of using its config in the addView command?

3

Yes. I am writing a large application and I am designing classes that are responsible for their own view configuration. Initializing objects and passing them around allows me to encapsulate responsibility for that component’s behaviour into smaller classes.

I want to be able to arbitrarily add/remove views to different accordions and components.

Thanks for the help, I think this trick will work for me.

4

Is there an issue with the accordion? I can’t get the items to open and show the body, the arrows change but the body is not showing. I notice in your demo above that after you close the accordion items, they will not open again.

5

Can you provide exact steps to reconstruct the issue ?

6

I have created something similar here: http://webix.com/snippet/23be6af7
But the issue is a bit different, where the 2nd accordion item is not showing. Your help with this would be great. Thanks

7

I have just tried the issue again by taking the accordion out of the fieldset and it works as expected. It looks like the fieldset is breaking the accordion.

8

I also would like to make it collapsed by default, as they are all expanded at the moment. Please see my other thread: http://forum.webix.com/discussion/4508/accordion-missing-refresh-method

9

I have added some extra code and seem to have fixed the issue. See here: http://webix.com/snippet/1d826d93