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. Image for the cookie policy date

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

Hi

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

Nick

12 Replies

SK Satheesh Kumar Balasubramanian Syncfusion Team August 28, 2019 03:14 AM

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


NI Nick August 28, 2019 03:46 PM

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


SK Satheesh Kumar Balasubramanian Syncfusion Team August 28, 2019 10:51 PM

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


NI Nick September 1, 2019 05:08 PM

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


NR Nevitha Ravi Syncfusion Team September 2, 2019 02:02 AM

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. 



NI Nick September 2, 2019 11:12 PM

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


SK Satheesh Kumar Balasubramanian Syncfusion Team September 4, 2019 01:45 AM

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


NI Nick September 4, 2019 10:34 PM

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


SK Satheesh Kumar Balasubramanian Syncfusion Team September 6, 2019 06:32 AM

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


NI Nick September 13, 2019 02:36 AM

Hi Satheesh,

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

Nick


SK Satheesh Kumar Balasubramanian Syncfusion Team September 16, 2019 04:33 AM

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


AK Alagumeena Kalaiselvan Syncfusion Team January 27, 2020 06:43 AM

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

Loader.
Live Chat Icon For mobile
Up arrow icon