[SOLVED] Virtual list in panel

Questions
1

I want to use virtual list view in panel
but using this code

app.virtualList.create({
 // List Element
         el: '#' + dataId,
         items: [],
         itemTemplate: template,
         height: height
 })

however getting the following errors:
TypeError: this.$pageContentEl[0] is undefined (Line number framework7.js:12461:13) version 2.

2

with the little code you share, all i can say is:
dataId has a value?
wait till the page is render before creating the virtual list.

3

The DataID has its value. I even tried it with the static value.
And I am using this code to initilize virtual List on pageInit, I think the page has been rendered before its initilization.
I even tried to use this code.
Thank you in advance…

 on: {
          pageInit: function (e, page) {
             setTimeout(() => {
               app.virtualList.create({
                // List Element
                el: ‘#vlist1’,
                items: [],
                itemTemplate: template,
                height: height
                });
              }, 5000); 
            }
4

Make sure that your Virtual List is inside of <div class="page-content">

5

I tried to put panel inside of <div class="page-content">
It actually worked but then the page was not rendered or showing at all (including the navbar). So I had a bad luck in that.
<div class="page-content">
<div class="panel">
…
</div>
</div>
<div class="page">
<div class="page-content">
…
</div>
</div>

If I put the page content class above all the panel and the page class
then the panel was not showing at all, however the page was working as expected.

<div class="page-content">
        <div class="panel">
       ... 
       </div>

        <div class="page">
       ... 
       </div>
 </div>

Also from the documentation in this link https://framework7.io/docs/panel.html#control-panel-with-links it is no where suggested to use
<div class="page-content">
before the panel class.

I really appreciate your solution, however, it would be great for me if you could suggest me a possible way to display a virtual list inside of a panel.

6

If you use page components, you should have the full View -> Page -> Page Content structure in panel

7

Okay, Got it this time.
Thanks a lot. :slight_smile:

1 Like