Add TabItem dynamically from code behind

[Amanda]

Hello ,

I am using an SfTab component at my Blazor project. I have an Add button for adding tabs dynamically.

What I am trying to do is when I add a new Tab I want the ContentTemplate to be a custom component that I have made. The number of tabs that I want to add every time is random . 

The problem is that when I add a new tab with my component as the   ContentTemplate  I get an error. I think that my component is not recognized as a Razor component. 

Could you show my an example where you implement what I am trying to do ?
I also have uploaded my project.

Thanks in advance.

Attachment: BlazorApp7_56aceae3.zip

[Ruksar Moosa Sait]

Hi Amanda,

Could you please share the custom component code snippets to proceed to validate further and provide the prompt solution earlier?

Regards,

Ruksar Moosa Sait

[Amanda]

Hello,

Yeah I am posting the code for the component below.



CardNoIcon.razor


<div class="card ">
    <div class="card-text-top">
        @Title
    </div>
    <div class="card-text-middle">
        <div>@Value @MeasurementUnit</div>
    </div>
</div> 

CardNoIcon.razor.cs

  

 public partial class CardNoIcon
    {
        [Parameter]
        public string Title { get; set; } = string.Empty;
        [Parameter]
        public string Value { get; set; }
        [Parameter]
        public string MeasurementUnit { get; set; } = string.Empty;
    }

[Ruksar Moosa Sait]

Hi Amanda,

With your shared code, we have prepared a sample to render custom components in ContentTemplate and it works fine.

Kindly try the attached sample and let us know if this meets your requirement. 

Regards,

Ruksar Moosa Sait

Attachment: TabCustomComponent_4ac3b356.zip

[Amanda]

Hello, 

Thanks for your response but this is not exactly what I meant

Specifically I saw this example that you have in your documentation :
https://blazor.syncfusion.com/documentation/tabs/how-to/load-tab-items-dynamically?_gl=1*13p3m3z*_ga*MTMzMzcwMTczNy4xNjM3MDUyNjgx*_ga_WC4JKKPHH0*MTY0ODQ2MTUyMC4xODcuMS4xNjQ4NDYyNDg0LjA.&_ga=2.134809073.1421678659.1648452397-1333701737.1637052681

So I am trying to Implement the same thing but instead of using the SfSchedule component for the ContentTempate of the new Tab I want to use a custom Razor component that I made.

My component is the  CardNoIcon.razor that I posted in my previous answer.

Any ideas on how to do this?

Thanks in advance!

[Satheesh Kumar Balasubramanian]

Hi Amanda,

 

We have prepared sample to add your custom component as new tab.

 

Index.razor: 

@code{

    SfTab TabObj;

    List<TabItem> TabData;

    public RenderFragment CustomContent = builder =>

    {

    builder.AddContent(1, @<CardNolcon></CardNolcon>);

    };

    public void OnAddItem()

    {

        TabData = new List<TabItem>()

    {

            new TabItem() { Header = new TabHeader() { Text = "Card" }, ContentTemplate = CustomContent }

        };

        TabObj.AddTab(TabData, 0);

    }

}

 

Kindly try the attached sample and let us know if this meets your requirement.

 

Regards,

Satheesh Kumar B

Attachment: TabComponent_d5a71d08.zip