We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Add new TabItem dynamically

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"> 
@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); 

3 Replies

NR Nevitha Ravi Syncfusion Team January 6, 2020 10:20 AM UTC

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. 

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.


ET ebi torabi January 6, 2020 01:43 PM UTC

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>

AK Alagumeena Kalaiselvan Syncfusion Team January 7, 2020 09:18 AM UTC

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 

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. 


Live Chat Icon For mobile
Up arrow icon