loadOn seems not to work correctly

[Michael Hertlein]

Hello,

I'm using your Tabs-Component (v18.4.44) with Angular 10 and want all tabs to be loaded on. This is, because on one tab is a chart, on the other tab is a table (grid-Control, v18.4.46) for the same data.

My HTML:

<ejs-tab class="e-fill" [loadOn]="'Init'" [animation]="{previous: {effect: 'none'}, next: {effect: 'none'}}">
    <e-tabitems>
        <e-tabitem [header]="{text: 'Diagramm'}">
            <ng-template #content>
                <ejs-chart #chart [primaryXAxis]="xAxis">
                    <e-series-collection>
                        <e-series [dataSource]="chartData" type="Line" xName="SENr" yName="Teilnahme" name="Teilnahme"></e-series>
                    </e-series-collection>
                </ejs-chart>
            </ng-template>
        </e-tabitem>
        <e-tabitem [header]="{text: 'Tabelle'}">
            <ng-template #content>
                <ejs-grid #casesGrid id="evalGrid" class="sortingenabled"
                          [dataSource]="cases"
                          (load)="gridLoaded()"
                          (dataBound)="dataBound($event)"
                          (toolbarClick)="toolbarClick($event)">
                </ejs-grid>
            </ng-template>
        </e-tabitem>
    </e-tabitems>
</ejs-tab>

But in Chrome, only the first tab is loaded and I get an error if I trie to access the grid. I also tried loadOn="Init" (without brackets) in ejs-tab.

Have I something missed?

I can solve this problem by changing the tab header and content to "<div class=e-tab-header"> and "<div class=e-contet>", but this is not a solution, if there's a special property to change the loading-behavior.

Here are my installed Syncfusion-components/versions:

"@syncfusion/ej2-angular-buttons": "18.4.46",
"@syncfusion/ej2-angular-charts": "18.4.46",
"@syncfusion/ej2-angular-dropdowns": "18.4.46",
"@syncfusion/ej2-angular-grids": "18.4.46",
"@syncfusion/ej2-angular-navigations": "18.4.44",
"@syncfusion/ej2-angular-notifications": "18.4.39",
"@syncfusion/ej2-angular-pivotview": "18.4.46",
"@syncfusion/ej2-angular-splitbuttons": "18.4.41",
"@syncfusion/ej2-base": "18.4.44",
"@syncfusion/ej2-data": "18.4.46",

Thank you.

Michael

[Ravikumar Venkatesan]

Hi Michael, 

Greetings from Syncfusion support. 

We have validated your reported query “loadOn seems not to work correctly” at our end and regret to let you know the loadOn property is used with the Blazor Tabs. So, loadOn property is not working with the EJ2 Angular tab. We have logged your requirement as a feature request at our end and that can be implemented in any of our upcoming releases and you can track the status from the below feedback link. 

Feedback: https://www.syncfusion.com/feedback/23009/provide-support-to-render-the-all-tabs-contents-on-initial-load 

Kindly let us know if you need any further assistance. 

Regards, 

Ravikumar Venkatesan