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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add new TabItem dynamically

Thread ID:





150389 Jan 5,2020 08:34 AM UTC Jan 7,2020 09:18 AM UTC Blazor 3
Tags: Tabs
ebi torabi
Asked On January 5, 2020 08:34 AM UTC

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

Nevitha Ravi [Syncfusion]
Replied On 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.


ebi torabi
Replied On 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>

Alagumeena Kalaiselvan [Syncfusion]
Replied On 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. 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon