how to Lazy Load accordion item on expand

Webix JS
1

Hi,
I have multiple accordion items in an html page.
I want to load each accordion item data/ components on click of expand button of that accordion only and not on initial loading of the page.

Can anyone please help in this regard…

2

Check the next code snippet
http://webix.com/snippet/c5806581

You can use onAfterExpand event and from it init the UI in the related accordion’s cell.

3

Thank you very much for the help Maksim.

Actually i think some issue is there with the snippet, as first time when i tried to expand second accordion its happening, but on second chance none of the accordion are expanding ?

4

Sorry, was a my error.

http://webix.com/snippet/5cb87c1d

You need to have a height or autoheight setting for the content.

5

Thanks Maksim.

Actually While integrating webix and angular js(using init config technique), I am trying to load particular accordion item component/ data as well as angular controller for that on expand. Though there are documents available regarding integration of both , but I didn’t find any reference to integrate webix and angular js as well as lazy load components and controller.

It would be a great help to me if you can provide any such reference.

Thanks in anticipation.

6

Hi Maksim,

As per the snippet : http://webix.com/snippet/5cb87c1d, the accordion item got initialized dynamically using it’s ID (“panelB” in snippet).

But while doing integration of webix and angular JS using “Initing from Config Object” technique, I am unable to access the accordion item with its ID.

When I checked HTML page, analyzed that the accordion item is being rendered as :

element :
{
collapsed : true,
header : “Quote comments”,
id : “quoteCommentsAccord”,
body : {id:“contentComments”, rows:[]
}
}

Here the id of element is being assigned to “webix_ai_id” and not “view_id”, so I am unable to access it using syntax in snippet ie parameter “id” of function called “on After Expand” contains value “$accordionitem10” instead of “quoteCommentsAccord”.

And also the element with id:“contentComments” (body element) is not being rendered in html at all.

Please help me…

7

Would like to appreciate comments regarding above query…

8

By any chance do you have isolate:true in the configuration of UI ?

This property allows to reuse the same IDs on the page, but makes object access more complicated - http://webix.com/snippet/1cd3840a

If you don’t plan to have similar instance of such UI ( with same webix IDs ) on the page, you can just remove isolate:true and use the above described, straight logic.

9

Thanks a lot Maksim.

Any help regarding lazy loading angular controller also while loading its accordion item component (integrating webix and angular js ).