Add new TabItem dynamically

[ebi torabi]

The following code doesn't work. Please give an example

@using Syncfusion.EJ2.Blazor.Navigations 

 

<button @onclick="AddTab">Add Tab</button> 

<EjsTab @ref="_tab" CssClass="e-fill" Items="Items" OverflowMode="OverflowMode.Scrollable" ShowCloseButton="true"> 

</EjsTab> 

@code { 

    private EjsTab _tab; 

    List<TabItem> Items = new List<TabItem>(){ 

           new TabItem() { Header = new TabHeader() { Text = "One" }, Content = "Test 1" }, 

           new TabItem() { Header = new TabHeader() { Text = "Two" }, Content = "Test 2" } 

        }; 

 

    public void AddTab() 

    { 

        List<TabItem> tabs = new List<TabItem>() { 

           new TabItem() { Header = new TabHeader() { Text = "Three" }, Content = "Test 3" }, 

           new TabItem() { Header = new TabHeader() { Text = "FetchData" }, ContentTemplate = @<FetchData></FetchData> } 

        }; 

        _tab.AddTab(tabs, 0); 

    } 

} 

[Nevitha Ravi]

Hi Ebi, 

Greetings from Syncfusion  Support. 

We have tried to run the shared code without any modification. The sample works well in our end.  

You can refer the sample from the following link. 

https://www.syncfusion.com/downloads/support/forum/150389/ze/TabControl-967284639  

Please try out the sample if the issue persist still, please share the following details to check on this issue further. 

• Nuget and script version details.
• Do you face any script error or exception?
• Try to replicate the issue in a sample
• Image or video depicting your issue.

Regards, 

Nevitha

[ebi torabi]

HI Nevitha.

Unfortunately your example does not work on the hosted core blazor and tabs are not displayed.

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.4.40/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/17.4.40/dist/ej2.min.js"></script>

    <script src="https://cdn.syncfusion.com/ej2/17.4.40/dist/ejs.interop.min.js"></script>

[Alagumeena Kalaiselvan]

Hi Ebi, 

Thanks for your update!.. 

We can replicate the reported issue with Blazor hosted core environment and confirmed as a defect in our end. We have created the bug report for that which can be tracked from the below link 

https://www.syncfusion.com/feedback/11124/tab-item-model-is-not-working-properly-in-hosted-core-blazor. 

We will fix this issue and include it in our weekly patch release which is scheduled to release at end of January, 2020. We would appreciate your patience until then. 

Regards 

Alagumeena.K