Is it possible to set content of Tab when creating it in code

[Nick]

Hi

Is it possible to set content of Tab when creating it in code instead of using defined div with a content id?

Nick

[Satheesh Kumar Balasubramanian]

Hi Nick, 

Thanks for contacting Syncfusion support. 

Yes, it is possible to set content of tabs when creating it in code. We suggest you to define Tab content through property binding as like below. 

 

<TabItems> 

  <TabItem Content="@Content1"> 

    <ChildContent> 

       <TabHeader Text="Twitter"> 

       </TabHeader> 

    </ChildContent> 

  </TabItem> 

</TabItems> 

 

@code{ 

    public string Content1 = "Twitter is an online social networking service that enables users to send and read short 140-character messages called tweets."; 

}                                                                                                                            

 

 

Please check the following link and let us know if you need any further assistance. 

https://ej2.syncfusion.com/blazor/Tab/DefaultFunctionalities 

Regards, 

Satheesh Kumar B

[Nick]

Hi Satheesh,

I was hoping it would be possible to set the tab content to something more complex than text like another Razor page/document.

Nick

[Satheesh Kumar Balasubramanian]

Hi Nick, 

Yes, it is possible to set content of tabs as another Razor page. We suggest you to define Tabs content through ContentTemplate in tag level as like below. 

 

<TabItems> 

   <TabItem> 

       <ChildContent> 

           <TabHeader Text="Counter"> 

           </TabHeader> 

       </ChildContent> 

       <ContentTemplate> 

           <Counter /> 

       </ContentTemplate> 

   </TabItem> 

</TabItems>                                                                                                                            

 

 

The sample can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/146997/ze/TabContent-1665839993 

Please try out the sample and let us know if you need any further assistance. 

Regards, 

Satheesh Kumar B

[Nick]

Hi Satheesh,

Thanks for the additional information about the ContentTemplate but setting it at the tag level still makes it a very static definition of the UI.

I was hoping to be able to set the ContentTemplate details in code-behind as I add the TabItem on the selection of a menu item so that the definition of the tabs and their content are truly dynamic depending on the users choices.

It would be nice if the TabItem object had a method, receiving the required Page and data, to set the ContentTemplate.

Nick

[Nevitha Ravi]

Hi Nick, 

Thanks for your update. 

We have prepared a sample to receive the data from code behind in OnInitializedAsync and used them in content template of the tab item which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/146997/ze/TabSample446417878  

    WeatherForecast[] forecasts; 

    protected override async Task OnInitializedAsync() 

    { 

        forecasts = await ForecastService.GetForecastAsync(DateTime.Now); 

    } 

Please try out the sample and let us know if you need any further assistance on this. 

Regards, 

Nevitha. 

[Nick]

Thanks Nevitha,

What I am more interested in is if it would be possible to pass my own RenderFragment to the ContentTemplate of the TabItem in code?

Nick

[Satheesh Kumar Balasubramanian]

Hi Nick, 

 

Yes, it is possible to pass your own RenderFragment to the ContentTemplate of the TabItem in code. Refer the below code snippet. 

 

<EjsTab> 

    <TabItems> 

        <TabItem ContentTemplate="@Content1"> 

            <ChildContent> 

                <TabHeader Text="Tab1"></TabHeader> 

            </ChildContent> 

        </TabItem> 

        <TabItem ContentTemplate="@Content2"> 

            <ChildContent> 

                <TabHeader Text="Tab2"></TabHeader> 

            </ChildContent> 

        </TabItem> 

        <TabItem ContentTemplate="@Content3"> 

            <ChildContent> 

                <TabHeader Text="Tab3"></TabHeader> 

            </ChildContent> 

        </TabItem> 

    </TabItems> 

</EjsTab> 

 

@code { 

    public RenderFragment Content1 = builder => 

    { 

        builder.AddContent(1, "Twitter is an online social networking service that enables users to send and read short 140-character messages called tweets."); 

    }; 

 

    public RenderFragment Content2 = builder => 

    { 

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

    }; 

 

    public RenderFragment Content3 = builder => 

    { 

        builder.AddContent(1, @<EjsButton IsPrimary="true">CONTENT BUTTON</EjsButton>); 

    }; 

}                                                                                                                                                

 

The sample can be downloaded from the following link. 

 

https://www.syncfusion.com/downloads/support/forum/146997/ze/TabSetContent530716521 

 

Please try out the sample and let us know if you need any further assistance. 

 

Regards, 

Satheesh Kumar B

[Nick]

Hi Satheesh,

Thanks for the example.

I have modified my test project (see attached) but find that my RenderFragment builder is not being called by the ContentTemplate property of the TabItem in my foreach where it is being called in the foreach below the EjsTab. Can you tell me why that is?

BTW: it would also be nice to have the ShowCloseButton property on the TabItem instead of the EjsTab because I sometimes like to have a non-close-able TabItem first and then allow added TabItems after that to be close-able. And it would also be nice to have a closing event on the TabItem that can be subscribed to that allowed the close to be cancelled.

Nick

Attachment: BlazorTest_611c8656.zip

[Satheesh Kumar Balasubramanian]

Hi Nick,

 

Query 1:

 

We could reproduce the reported RenderFragment issue in ContentTemplate property of TabItem. We are investigating the issue further in detail and we will update you regarding this issue on September 10, 2019.

 

Query 2:

 

You can hide the close icon to specific items by using CssClass property in TabItem.  Refer the below code snippet.

 

<TabItem ContentTemplate="@Content1" CssClass="non-closeable">

    <ChildContent>

        <TabHeader Text="Tab1"></TabHeader>

    </ChildContent>

</TabItem>

 

<style>

    .e-tab .e-tab-header .e-toolbar-items .non-closeable .e-tab-wrap .e-text-wrap .e-close-icon {

        display: none;

    }

</style>                                                                                                                                              

 

The sample can be downloaded from the following link.

 

https://www.syncfusion.com/downloads/support/forum/146997/ze/TabSetContent1694218030

 

Please try out the sample and let us know if you need any further assistance.

 

Regards,

Satheesh Kumar B

[Nick]

Hi Satheesh,

Is there any update regarding query 1 from my previous post?

Nick

[Satheesh Kumar Balasubramanian]

Hi Nick, 

Sorry for the delay post. 

We have validated the reported query and confirmed this as issue “RenderFragment builder is not being called by the ContentTemplate property of the TabItem in foreach”. We will fix the issue and include it in our bi-weekly release which is scheduled on end of September 2019.  We appreciate your patience  until then. 

https://www.syncfusion.com/feedback/8630/ability-to-pass-renderfragment-to-the-contenttemplate-of-tabitem-in-code-behind 

Regards, 

Satheesh Kumar B

[Alagumeena Kalaiselvan]

Hi Nick, 

Sorry for the delay to get back to you! 

We have resolved your reported issue “Render Fragment builder is not being called by content template property of tab item in foreach” and  included with our Volume 4, main release which was promised.  

Refer to the below release notes. 

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

We will happy to assist you if you need further assistance. 

Regards 

Alagumeena.K