Dynamically added tabs do not render right away

[HFirst]

Blazor ClientSide,  18.4.0.30,   Chrome and Edge.

I have an SfTab on my main page with a few default tabs.  From the navmenu shared component on the left I am trying to add a new content tab dynamically to the tab on the right.

@code click code:

var home = MyApp.Client.Pages.Home.Instance;

var tabControl = home.MainTabControl;

var tabData = new List<TabItem>()

{

new TabItem() { Header = new TabHeader() { Text = "ItemSearch" }, ContentTemplate = @TabContent }

};

tabControl.AddTab(tabData, tabControl.Items.Count);

The tab does not render.  But if I click on any of the visible tabs, then my new tab does become visible and I can see it's content.  If I click to add another tab, it does not render until I click on another existing tab.

I also tried:

tabControl.AddTab(tabData, 0);

and

tabControl.SelectedItem = tabControl.Items.Count;

[Satheesh Kumar Balasubramanian]

Hi HFirst,

 

Greetings from Syncfusion Support..!

 

We have validated your reported query at our end and prepared the sample based on your shared details. But unfortunately, we were unable to replicate the reported issue. Please refer the sample in the following link.

Sample: https://www.syncfusion.com/downloads/support/forum/160941/ze/TabComponent901832135

 

Code Snippet: 

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Schedule

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Buttons

 

   

       

           

               

               

           

           

               

               

           

       

   

 

@code{

    SfTab TabObj;

    List TabData;

    public RenderFragment ScheduleContent = builder =>

    {

        builder.AddContent(1, @);

    };

    public void OnAddItem()

    {

        TabData = new List()

        {

            new TabItem() { Header = new TabHeader() { Text = "Schedule" }, ContentTemplate = @ScheduleContent }

        };

        TabObj.AddTab(TabData, 0);

    }

    public List Orders { get; set; }

 

    protected override void OnInitialized()

    {

        Orders = Enumerable.Range(1, 75).Select(x => new Order()

        {

            OrderID = 1000 + x,

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],

            Freight = 2.1 * x,

            OrderDate = DateTime.Now.AddDays(-x),

        }).ToList();

    }

    public class Order

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public DateTime? OrderDate { get; set; }

        public double? Freight { get; set; }

    }

}

              

 

 Kindly try the above sample and if the issue still persists at your end kindly share the below details to serve you better? 

• Try to replicate the issue in the above sample
• Share the code snippets
• Share the issue depicting image/video

• Share issue replicating sample if possible
  
  

Regards,

Satheesh Kumar B

[HFirst]

Yes, your sample does work.  Your sample has the button and tab on the same razor page.  In my case, the button is on a navmenu shared component that is rendered to the left of the main content area and the tab is in the main razor page's content area.

I have submitted an incident where I can reproduce the problem.

[Satheesh Kumar Balasubramanian]

Hi HFirst, 

  

Thanks for your update. 

  

Since, you have created a new support incident under your account, please follow the incident for further assistance. 

 

Regards, 

Satheesh Kumar B