Creating new tabs with different content

[Vladimir Melnik]

Hello Syncfusion team,

currently I have a problem while adding tabs to the SfTab component. And the problem is that using ContentTemplate for TabItem the new content copmonent is not created for each new TabItem. It is created only once and then used in all tabs. My code:

Index.razor

< SfButton OnClick="OnButtonClick">Add button< /SfButton>
< SfTab @ref="@TabComponent">
    < TabItems>
    < /TabItems>
< /SfTab>
@code
{
    SfTab TabComponent;
    int number = 0;

    public void OnButtonClick()
    {
        var tab = new TabItem()
        {
            Header = new TabHeader() { Text = $"Tab {number++}" },
            ContentTemplate = b =>
            {
                b.AddContent(1, @);
            }
        };

        TabComponent.AddTab(new List() { tab }, TabComponent.Items.Count);
        TabComponent.SelectedItem = TabComponent.Items.Count - 1;
    }

}

TabHolder.razor component:

using Syncfusion.Blazor.Navigations;

< SfTab @ref="@Self">
    < TabItems>
    < /TabItems>
< /SfTab>
@code {
    SfTab Self;

    [Parameter]
    public int TabCount { get; set; }

    public TabHolder()
    {
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            var tabs = new List();

            for (int i = 0; i < TabCount; i++)
            {
                var tab = new TabItem()
                {
                    Header = new TabHeader() { Text = i.ToString() },
                    ContentTemplate = b =>
                    {
                        b.AddContent(i, $"Tab Number {i}");
                    }
                };

                tabs.Add(tab);
            }

            Self.AddTab(tabs, 0);
        }

        base.OnAfterRender(firstRender);
    }
}

If I put break point into TabHolder component constructor it is hit only once after creating first tab in owner SfTab component.

Do I use ContentTemplate incorrect or there is other way to get result which I'm trying to acheave?

[Alagumeena Kalaiselvan]

Hi Vladimir, 

Greetings from Syncfusion support. 

We have checked your reported query “Creating new tabs with different content” with shared sample code and we suggest you to use temporary variable which holds the iterations value to show different Tab content. We have modified the shared sample code for your reference. 

~/TabHolder.razor 

@using Syncfusion.Blazor.Navigations; 

 

<SfTab @ref="@Self"> 

</SfTab> 

 

@code { 

    SfTab Self; 

 

    [Parameter] 

    public int TabCount { get; set; } = 3; 

 

    public Counter() 

    { 

    } 

 

    protected override void OnAfterRender(bool firstRender) 

    { 

        if (firstRender) 

        { 

            var tabs = new List<TabItem>(); 

 

            for (int i = 0; i < TabCount; i++) 

            { 

                var temp = i; 

                var tab = new TabItem() 

                { 

                    Header = new TabHeader() { Text = i.ToString() }, 

                    ContentTemplate = b => 

                    { 

                        b.AddContent(i, $"Tab Number {temp}"); 

                    } 

                }; 

 

                tabs.Add(tab); 

            } 

 

            Self.AddTab(tabs, 0); 

        } 

 

        base.OnAfterRender(firstRender); 

    } 

} 

The above sample can be downloaded from the following link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent-1160632267  

Kindly get back to us whether the solution meets your requirement. 

Regards 

Alagumeena.K  

[Vladimir Melnik]

Hi Alagumeena,

thanks for your reply.

I just noticed that there is some code is missing in my sample. I add it here once again.

Index.razor

<SfButton OnClick="OnButtonClick">Add button</SfButton>
<SfTab @ref="@TabComponent">
    <TabItems>
    </TabItems>
</SfTab>

@code
{
    SfTab TabComponent;
    int number = 0;

    public void OnButtonClick()
    {
        var tab = new TabItem()
        {
            Header = new TabHeader() { Text = $"Tab {number++}" },
            ContentTemplate = b =>
            {
                b.AddContent(1, @<TabHolder TabCount="number"></TabHolder>);
            }
        };

        TabComponent.AddTab(new List<TabItem>() { tab }, TabComponent.Items.Count);
        TabComponent.SelectedItem = TabComponent.Items.Count - 1;

    }

TabHolder.razor

<SfTab @ref="@Self">
    <TabItems>
    </TabItems>
</SfTab>

@code {
    SfTab Self;

    [Parameter]
    public int TabCount { get; set; }

    public TabHolder()
    {
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            var tabs = new List<TabItem>();

            for (int i = 0; i < TabCount; i++)
            {
                var temp = i;
                var tab = new TabItem()
                {
                    Header = new TabHeader() { Text = i.ToString() },
                    ContentTemplate = b =>
                    {
                        b.AddContent(i, $"Tab Number {temp}");
                    }
                };

                tabs.Add(tab);
            }
            Self.AddTab(tabs, 0);
        }
        base.OnAfterRender(firstRender);
    }
}

Please check it once again.

I want to make it clear that my problem is not the text which is shown in tab content. My problem is that when I press the button to add new tab a new TabHolder component is not created. It seems that already exsited component from the first tab is reused always for all other tabs.

Best reagards,

Vladimir.

[Alagumeena Kalaiselvan]

Hi Vladimir, 

Thanks for your update. 

We have validated your scenario “component(Tab content) created every time while clicking add button” with shared sample code and we suggest you to use Tab content mode as Demand to the LoadOn property which meets your requirement. So, TabHolder component constructor invoked whenever the creating parent Tab component. Refer the below code for that. 

~/Index.razor 

<SfButton OnClick="OnButtonClick">Add button</SfButton> 

<SfTab @ref="@TabComponent" LoadOn="ContentLoad.Demand" @bind-SelectedItem="SelectedTab"> 

    <TabItems> 

    </TabItems> 

</SfTab> 

We have modified the shared sample code for your reference and get the working sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabComponent-1749132329   

Note:  Additionally, we suggest you to use @bind-SelectedItem property which is a best practice to select Tab item and find below UG link for that. 

UG Link: https://blazor.syncfusion.com/documentation/tabs/getting-started/#two-way-binding-of-selecteditem 

Please get back to us, if you need further assistance. 

Regards 

Alagumeena.K

[Vladimir Melnik]

Hi Alagumeena,

your solution makes the job done. thank you. also for your tip about binding to SelectedItem.

Best regards,

Vladimir.

[Vengatesh Maniraj]

HI Vladimir, 

Thanks for the update. 

We are happy that our solution has done your job. 

Please get in touch with us if you would require any further assistance. 

Regards, 

Vengatesh