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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add new TabItem dynamically

Thread ID:

Created:

Updated:

Platform:

Replies:

147651 Sep 18,2019 04:36 PM UTC Jul 13,2020 07:24 AM UTC Blazor 15
loading
Tags: Tabs
Fabrizio Alessandro
Asked On September 18, 2019 04:36 PM UTC

Hello,

Is it possible to create and add new TabItems to a EjsTab on a button click?

I tried something like this but I can't get it working:

<EjsTab @ref="tab">
     ...
</EjsTab>

@code {
    private EjsTab tab;

     public void AddTab()
    {
        TabItem[] t = new TabItem[1];
        t[0] = new TabItem()
        {
            Header = new TabHeader() { Text = "Header" },
            ContentTemplate = Content
        };
        tab.AddTab(t, 0);
    }

    public RenderFragment Content = builder =>
    {
        builder.AddContent(1, @<FetchData />);
    };
}

The expected result is a new TabItem in the EjsTab with "Header" as tab header and the component "FetchData" in its content,
what I get is a new TabItem with "Header" as tab header but with no content.

Thank you.

Satheesh Kumar Balasubramanian [Syncfusion]
Replied On September 19, 2019 02:27 PM UTC

Hi Fabrizio, 
 
Currently, we couldn’t update the content template from code. But we are able to add tab by passing HTML as string. Please follow the code to add Tab dynamically. 
 
 
@using Syncfusion.EJ2.Blazor 
@using Syncfusion.EJ2.Blazor.Navigations 
<button class="e-btn" @onclick="@AddTab">Add Tab </button> 
<EjsTab @ref="TabObj"> 
    <TabItems> 
        <TabItem> 
            <ChildContent> 
                <TabHeader Text="Twitter"></TabHeader> 
            </ChildContent> 
            <ContentTemplate> 
                Twitter Content 
            </ContentTemplate> 
        </TabItem> 
        
    </TabItems> 
</EjsTab> 
 
@code { 
    private EjsTab TabObj; 
    string HTMLString = " The content contains <strong> HTML text <strong> and Dynamically added."; 
    public void AddTab() 
    { 
        TabItem[] t = new TabItem[1]; 
        t[0] = new TabItem() 
        { 
            Header = new TabHeader() { Text = "Header" }, 
            Content = HTMLString 
        }; 
        TabObj.AddTab(t, 0); 
    } 
 
    @*public RenderFragment Content = builder => 
    { 
        builder.AddContent(1,@<FetchData />); 
    };*@ 
} 
 
 
Could you please use “AddTab” method by passing HTML string from code? If the tab content is already defined, we can show or hide dynamically from code. 
 
Regards, 
Satheesh Kumar B

Fabrizio Alessandro
Replied On September 19, 2019 02:56 PM UTC

Thank you for your reply,

Specifying HTML as content for the tab is working

Adding a component instead of raw html is something technically impossible or is a feature we could see in the future?



Fabrizio

Nevitha Ravi [Syncfusion]
Replied On September 20, 2019 09:41 AM UTC

Hi Fabrizio, 

Thanks for your update. 

We will consider your suggestion and logged it as a feature request in our end, which can be tracked from the following link. This will be implemented and included in our Volume 3 SP1 2019 release. 

Regards, 
Nevitha 


Fabrizio Alessandro
Replied On September 23, 2019 02:38 PM UTC

Thank you as always for your support.

I would like to report a possible "bug" of EjsTab control:
  1. Dynamically add a new TabItem => TabItem added successfully
  2. Close the TabItem (with the X button of the tab) => TabItem disappeared
  3. Add a new TabItem => Added two TabItem! This and the first one (the one closed)
It seems that when a tab is closed, in the Items property of the EjsTab this tab is not removed.
As a workaround I'm doing a tab.Items.RemoveAt((int)e.RemovedIndex) inside the Removed event.

Nevitha Ravi [Syncfusion]
Replied On September 24, 2019 05:01 PM UTC

Hi Fabrizio, 

Thanks for your update. 

We could reproduce the reported issue and confirm this as a defect. Therefore, we have logged the bug report for the same which can be tracked from the following link. The issue fix will be included in our upcoming patch release expected to be rolled out on end of September, 2019. We would appreciate your patience until then. 

Regards, 
Nevitha 


Nevitha Ravi [Syncfusion]
Replied On September 24, 2019 05:12 PM UTC

Hi Fabrizio, 

Please find the feedback for issue tracking from the following link. 

Regards, 
Nevitha 


Nevitha Ravi [Syncfusion]
Replied On December 19, 2019 06:30 AM UTC

Hi Fabrizio,

Thanks for being patience.

The reported issue "the items property of the tab control is not maintained properly" has been fixed and included in our volume 4, 2019 main release(v17.4.39). Please upgrade to our latest version to avail the fix.

https://ej2.syncfusion.com/blazor/documentation/release-notes/index/#tab

Please keep in touch with us if you need any assistance, we will be always happy in assisting you.

Regards, 
Nevitha 


Fabrizio Alessandro
Replied On December 19, 2019 02:45 PM UTC

Hello,

Thank you for your reply, but I have some issues with the new release of tab control.

For first I can no longer add TabItems from code, these are two version of my code:

1)  
     <EjsTab @ref="_tab" CssClass="e-fill" OverflowMode="OverflowMode.Scrollable" ShowCloseButton="true">
        <TabEvents Created="Created" />
        <TabItems>
        </TabItems>
    </EjsTab>

     private EjsTab _tab;
     private async void Created()
    {
        List<TabItem> tabs = new List<TabItem>()
        {
           new TabItem() { Header = new TabHeader() { Text = "One" }, Content = "Test 1" },
           new TabItem() { Header = new TabHeader() { Text = "Two" }, Content = "Test 2" }
        };
        await _tab.AddTab(tabs, 0);
    }

     Result: Tab content is displayed, but tab header is empty.

2)
     <EjsTab @ref="_tab" CssClass="e-fill" OverflowMode="OverflowMode.Scrollable" ShowCloseButton="true">
        <TabEvents Created="Created" />
        <TabItems>
            @foreach (var tab in _tabs)
            {
                <TabItem>
                    <ChildContent>
                        <TabHeader Text="@tab"></TabHeader>
                    </ChildContent>
                </TabItem>
            }
        </TabItems>
    </EjsTab>

     private EjsTab _tab;
     private List<string> _tabs = new List<string> { "One", "Two" };

     private void AddTab(string header)
    {
          _tabs.Add(header);
          StateHasChanged();
    }

     Result: First two tabs are displayed correctly, when AddTab("Three") is called nothing happens.


Thank you.

Nevitha Ravi [Syncfusion]
Replied On December 20, 2019 12:42 PM UTC

Hi Fabrizio, 

Thanks for your update. 

We suspect that your requirement is to add the tab items dynamically.  We have prepared a sample with following requirements 
  • We have added two tab items dynamically. ,
  • Added string as content in first tab
  • Added content from another razor page.

The sample can be downloaded from the following link. 

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

Please try the sample and get back to us whether the sample meets your requirement. 

Regards, 
Nevitha

Fabrizio Alessandro
Replied On December 20, 2019 04:33 PM UTC

Thank you, the sample is really clear.

I would like to add the new tab in the last position of the control and then select this tab.

Changing the AddTab() code of the sample:

_tab.AddTab(tabs, _tab.Items.Count);
await _tab.Select(tabs, _tab.Items.Count - 1);

It seems that the selection doesn't work (it worked in 17.3.0.29-beta), as workaround we can add a delay between the two lines, but it's not really clean:

_tab.AddTab(tabs, _tab.Items.Count);
await Task.Delay(1000);
await _tab.Select(tabs, _tab.Items.Count - 1);


Thank you!

Vinitha Devi Murugan [Syncfusion]
Replied On December 23, 2019 12:53 PM UTC

Hi Fabrizio, 
  
We have validated this issue and you can use “SelectedItem” property to overcome this issue. Right now we have faced some issues over “SelectedItem” which can be tracked from the following link.  
 
 
The issue fix will be included in our weekly patch release on mid of January, 2020 we would appreciate your patience until then. 
 
Kindly get back to us, if have any further queries  
 
Regards 
M.Vinitha devi 


albert
Replied On July 5, 2020 05:18 AM UTC

Dear All,

It seems that above issue have been raised again, I am using the latest 18.1.0.59,  I tested several ways, and below it is working well only as I added new tab, and then selected it. Do I miss something? Thanks for your help in advance.



Alagumeena Kalaiselvan [Syncfusion]
Replied On July 6, 2020 11:50 AM UTC

Hi Fabrizio, 

Thanks for your update. 

We have checked your reported case and we suggest you to use SelectedItem property instead of using Select public method which helps you to select the preferred tab items. Refer the below code for that. 

<button @onclick="AddTab">ADD TAB</button> 
<SfTab @ref="_mainTab" Items="@tabitems" @bind-SelectedItem="SelectedTab"> 
</SfTab> 
 
@code{ 
    SfTab _mainTab; 
    double SelectedTab { get; set; } = 0; 
    public List<TabItem> tabitems = new List<TabItem>() 
{ 
            new TabItem() { Header = new TabHeader() { Text = "Sample" }, Content = "Sample Side Code content" }, 
            new TabItem() { Header = new TabHeader() { Text = "Source" }, Content = "Source Side Code content" }, 
            new TabItem() { Header = new TabHeader() { Text = "Style" }, Content = "Style Side Code content" } 
     }; 
    public void AddTab() 
    { 
        List<TabItem> tabs = new List<TabItem>() { 
           new TabItem() { Header = new TabHeader() { Text = "Three" }, Content = "Test 3" } 
        }; 
        _mainTab.AddTab(tabs, _mainTab.Items.Count); 
        SelectedTab = _mainTab.Items.Count - 1;   // To select the last Tabitem 
        StateHasChanged(); 
    } 
} 

Also, you can download this sample using the following link 

Note: Refer the below UG link for that 


Kindly try with shared sample and let us know, if you need further assistance. 

Regards 
Alagumeena.K 


j
Replied On July 10, 2020 05:23 AM UTC

I downloaded the given sample above: https://www.syncfusion.com/downloads/support/forum/147651/ze/AddDynamicTabItem-1760364140
I noticed it's on version 17.4. Is the dynamic tab possible in 17.3.0.29?
Actually I test it with the latter version mentioned but it just shows blank. I just want to make sure that it is or not possible.
Thanks.

Alagumeena Kalaiselvan [Syncfusion]
Replied On July 13, 2020 07:24 AM UTC

Dear Customer, 

Thanks for your update! 

We have checked your query and the requirement “Dynamic Tab” is available from the package version 17.4.39 only and we have prepared a sample using latest package version which meets your requirement “Add dynamic Tab items” can be downloaded from the below link. 

Notes: Refer the below release notes dynamic Tab feature 

Please check with shared sample and get back to us, if the sample helps. 

Regards 
Alagumeena.K 


CONFIRMATION

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