We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

146997 Aug 28,2019 03:42 AM UTC Jan 27,2020 02:43 PM UTC Blazor 12
loading
Tags: Tabs
Nick
Asked On August 28, 2019 03:42 AM UTC

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 [Syncfusion]
Replied On August 28, 2019 11:14 AM UTC

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. 


Regards, 
Satheesh Kumar B

Nick
Replied On August 28, 2019 11:46 PM UTC

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 [Syncfusion]
Replied On August 29, 2019 06:51 AM UTC

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. 


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

Regards, 
Satheesh Kumar B

Nick
Replied On September 2, 2019 01:08 AM UTC

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 [Syncfusion]
Replied On September 2, 2019 10:02 AM UTC

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. 

    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
Replied On September 3, 2019 07:12 AM UTC

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 [Syncfusion]
Replied On September 4, 2019 09:45 AM UTC

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. 
 
 
Please try out the sample and let us know if you need any further assistance. 
 
Regards, 
Satheesh Kumar B

Nick
Replied On September 5, 2019 06:34 AM UTC

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 [Syncfusion]
Replied On September 6, 2019 02:32 PM UTC

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
Replied On September 13, 2019 10:36 AM UTC

Hi Satheesh,

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

Nick

Satheesh Kumar Balasubramanian [Syncfusion]
Replied On September 16, 2019 12:33 PM UTC

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. 


Regards, 
Satheesh Kumar B

Alagumeena Kalaiselvan [Syncfusion]
Replied On January 27, 2020 02:43 PM UTC

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. 

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

Regards 
Alagumeena.K

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon