1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Tab component in ASP.NET Core MVC does not render headers when using ContentTemplate

Tab component in ASP.NET Core MVC does not render headers when using ContentTemplate

Hello,

I am using the EJ2 Tab component in an ASP.NET Core MVC project.
When I define the tab items using the ContentTemplate property, the tab headers are not rendered at all.
Only the raw content of each tab appears one after another on the page (see screenshot below).

Here is my simplified code:

@(
Html.EJS().Tab("tabTest2")
    .Selected(0)
    .Items(items =>
    {
        items.Id("tab1").Header(h => h.Text("Test 1"))
             .ContentTemplate(@<text><div>Tab Content - Test 1</div></text>)
             .Add();

        items.Id("tab2").Header(h => h.Text("Test 2"))
             .ContentTemplate(@<text><div>Tab Content - Test 2</div></text>)
             .Add();
    })
    .Render()
)

Result:
Only the contents are displayed (Tab Content - Test 1, Tab Content - Test 2) without any tab headers or switching functionality.

What I have already checked:

  • All required CSS and JS files (ej2.min.js, ej2.aspnetmvc.min.js, theme CSS) are included.

  • @Html.EJS().ScriptManager() is added at the end of the <body>.

  • No console errors.

  • Using version 31.2.2 of Syncfusion EJ2 ASP.NET Core.

If I use .Content("<div>...</div>") instead of .ContentTemplate(...), the same issue happens — only the raw HTML appears.
It seems that the Tab component is not being initialized on the client side when a ContentTemplate is used in MVC.

Is this a known issue in the current version, or is there a workaround to make ContentTemplate render Razor content (such as grids or other EJ2 components) correctly inside tabs?

Thank you.


Attachment: chrome_kr0xg0HmAo_c8c17e77.png

3 Replies 1 reply marked as answer
LD LeoLavanya Dhanaraj Syncfusion Team November 6, 2025 07:42 AM UTC

Hi GökhaN,


Greetings from Syncfusion support.


With the details you shared, we understand that you are facing an issue with the Tab component rendering: only the tab contents (Tab Content - Test 1, Tab Content - Test 2) are displayed, without any tab headers or switching functionality. We suspect this occurs due to the way the component is rendered and how the ContentTemplate is used in your code. You can render tabs with headers and content using the Items property, or you can achieve the same using ContentTemplate support.


We have included a working sample for your scenario using both approaches. Please refer to the code snippets and sample for more information.


[Index.cshtml]

<div>

    <p>Using Items property</p>

    @(Html.EJS().Tab("ej2Tab1")

        .Items(new List<TabItem> {

        new TabItem { Header = ViewBag.headerText0, Content = "Tab Content - Test 1" },

        new TabItem { Header = ViewBag.headerText1, Content = "Tab Content - Test 2" },

        })

        .HeightAdjustMode(HeightStyles.Auto)

        .OverflowMode(OverflowMode.Popup)

        .Render()

        )

 

    <br />

 

    <p>Using Content template</p>

    @(Html.EJS().Tab("ej2Tab2")

        .ContentTemplate(

        @<div>

        <div class="e-tab-header">

            <div>Test 1</div>

            <div>Test 2</div>

        </div>

        <div class="e-content">

            <div>

                <text><div>Tab Content - Test 1</div></text>

            </div>

            <div>

                <text><div>Tab Content - Test 2</div></text>

            </div>

        </div>

    </div>

        )

        .HeightAdjustMode(HeightStyles.Content)

        .OverflowMode(OverflowMode.Scrollable)

        .Render()

        )

</div>

[HomeController.cs]

public IActionResult Index()

{

    ViewBag.headerText0 = new TabHeader { Text = "Test 1" };

    ViewBag.headerText1 = new TabHeader { Text = "Test 2" };

    return View();

}


Output screenshot:


Refer the below documentation links to know more about the way of Tab component rendering.


https://ej2.syncfusion.com/aspnetmvc/documentation/tab/getting-started#add-aspnet-mvc-tab-control
https://ej2.syncfusion.com/aspnetmvc/documentation/tab/getting-started#initialize-the-tab-using-html-elements
https://ej2.syncfusion.com/aspnetmvc/documentation/tab/how-to/render-the-tab-items-using-content-template


Please review the details on your end and get back to us if you have any further queries or assistance needed.


Regards,

Leo Lavanya Dhanaraj


Attachment: MVC_Tab_7ed3b25.zip

Marked as answer
GA GökhaN ALTUNTEPE replied to LeoLavanya Dhanaraj November 11, 2025 06:05 PM UTC

Hello,

I’m using Syncfusion for the first time, and I realized I initially misunderstood how the ContentTemplate and style class setup works. Thanks to the example you shared, I now understand the approach much better and have it running smoothly where I need it.

Thank you very much for your help and prompt response. I appreciate your support—wishing you a great day.

Best regards,
Gökhan


LD LeoLavanya Dhanaraj Syncfusion Team November 12, 2025 09:09 AM UTC

Gokhan, thanks for the update. Please get back to us if you need any further assistance in future.


Loader.
Up arrow icon