Search results

Load Tab items dynamically

Tabs can be added dynamically by passing array of items and index value to the AddTab method.

In the following demo, you can add the tab content by clicking the +. Enter the new Tab heading and content details in the available text boxes, click ‘Add Tab’ button to pass the details as a list and here last index is calculated to append the new tab at the end.

@using Syncfusion.EJ2.Blazor.Navigations
@using Syncfusion.EJ2.Blazor.Inputs
@using Syncfusion.EJ2.Blazor.Buttons

<EjsTab @ref="Tab">
    <TabEvents Selected="@ItemSelected"></TabEvents>
    <TabItems>
        <TabItem>
            <ChildContent>
                <TabHeader Text="Tab1"></TabHeader>
            </ChildContent>
            <ContentTemplate>
                <ul>
                    <li>Click on the "+" header to add dynamic tab items. </li>
                    <li>It displays input elements to get the new tab information. </li>
                    <li>Add details and click the "Add Tab" button to open the newly added tab.</li>
                </ul>
            </ContentTemplate>
        </TabItem>
        <TabItem>
            <ChildContent>
                <TabHeader IconCss="e-add-icon"></TabHeader>
            </ChildContent>
            <ContentTemplate>
                <div id="form-container">
                    <div class="e-float-input">
                        <EjsTextBox @bind-Value="@dynamicHeader" Placeholder="Enter Header"></EjsTextBox>
                    </div>
                    <br />
                    <div class="e-float-input">
                        <EjsTextBox @bind-Value="@dynamicContent" Placeholder="Enter Content"></EjsTextBox>
                    </div>
                    <br />
                    <div class="btn-section">
                        <EjsButton Content="@Content" IsPrimary="true" @onclick="onClick"></EjsButton>
                        <br />
                        <br />
                        <span class="info"> * Title is mandatory to add a new Tab</span>
                    </div>
                </div>
            </ContentTemplate>
        </TabItem>
    </TabItems>
</EjsTab>

<style>

.info {
    font-weight: bold;
}
.e-content .e-item {
    font-size: 12px;
    margin: 10px;
    text-align: justify;
}

.e-add-icon::before {
    content: '\e823';
}
</style>

@code{
    EjsTab Tab;
    public string Content = "Add Tab";
    public string dynamicHeader { get; set; }
    public string dynamicContent { get; set; }

    public void onClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        List<TabItem> source = new List<TabItem>()
     {
        new TabItem() { Header = new TabHeader() { Text = @dynamicHeader }, Content = @dynamicContent }
      };
        this.Tab.AddTab(source, this.Tab.Items.Count()-1);
    }
    public void ItemSelected(Syncfusion.EJ2.Blazor.Navigations.SelectEventArgs args)
    {
        if(args.SelectedIndex == this.Tab.Items.Count() - 1)
        {
            this.dynamicHeader = "";
            this.dynamicContent = "";
        }
    }
}

Output be like the below.

Alt text