Dynamically adding TabItem to parent page's sfTab component

[John Meyer]

I have a Blazor razor page that includes an sfTab component.  The first tab in the component includes a sfGrid.  When a row in the grid is double-clicked, a new tab is dynamically created and, using RenderFragment, a separate Razor page component is added to the ContentTemplate of the new tab.

Here is that code:

    public void RecordDoubleClickHandler(RecordDoubleClickEventArgs<GridProduct> args)

    {

        AddTabItem(args.RowData.ProductNo);

    }

    public void AddTabItem(string productNo)

    {

        RenderFragment EditProductContent = builder => {

            builder.AddContent(1, @<EditProduct ProdNo="@productNo"></EditProduct>);

        };

        sfTabData = new List<TabItem>() {

            new TabItem() { Header = new TabHeader() { Text = productNo }, ContentTemplate = @EditProductContent}

        };

        productsTabObj.AddTab(sfTabData, productsTabObj.Items.Count);

        productsTabObj.SelectedItem = productsTabObj.Items.Count;

    }

The new razor page component added to the tab's ContentTemplate element also includes an sfGrid component.  When a record on this grid is double-clicked, I would like to dynamically create a yet another tab in the sfTab component on the parent page and, again using RenderFragment, I will add a third Razor Page component that that new tabs ContentTemplate element.  What I can't figure out is how to reference the tab component on the parent page of the first tab that was dynamically created.  I realize this is more of a standard Blazor question rather than a specific Syncfusion component question, but is there any guidance on how this works?

[Hareesh Balasubramanian]

Hi John, 

Greetings from Syncfusion Support..! 

We have validated your shared query “When a record on this grid is double-clicked, I would like to dynamically create a yet another tab in the sfTab component on the parent page and, again using RenderFragment” at our end. And we suspect that you have rendered the Grid component inside the Tab component and need to add dynamically  Tab item while clicking on the record on the Grid. And for that, we have prepared a sample and it can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/157201/ze/SupportSample-1072572890  

Code snippet: 

<SfTab @ref="TabObj"> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="HTML"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <div>HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.</div> 

            </ContentTemplate> 

        </TabItem> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Calendar"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <SfCalendar TValue="DateTime"></SfCalendar> 

            </ContentTemplate> 

        </TabItem> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Grid"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <SfGrid TValue="Order" AllowPaging="true"> 

                    <GridEvents RowSelecting="RowSelectingHandler" TValue="Order"></GridEvents> 

                    <SfDataManager Url="https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Adaptors.ODataAdaptor"></SfDataManager> 

                    <GridColumns> 

                        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

                        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

                        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 

                    </GridColumns> 

                </SfGrid> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

 

 

 

@code{ 

    SfTab TabObj; 

    List<TabItem> source; 

    public class Order 

    { 

        public int? OrderID { get; set; } 

        public string CustomerID { get; set; } 

        public DateTime? OrderDate { get; set; } 

        public double? Freight { get; set; } 

        public string ShipCountry { get; set; } 

    } 

    public RenderFragment ScheduleContent = builder => 

    { 

        builder.AddContent(1,@<SfSchedule TValue=object></SfSchedule>); 

    }; 

    public void RowSelectingHandler(RowSelectingEventArgs<Order> args) 

    { 

        source = new List<TabItem>() 

            { 

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

            }; 

        TabObj.AddTab(source, 0); 

    } 

} 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh