Search results

How To

Load content through Ajax

The Tab supports to load external contents through AJAX library. Refer to the following steps.

  • Import the Ajax module from ej2-base and initialize with URL path.

  • Get the data from Ajax Success event, then initialize the Tab with retrieved external path data.

tagHelper
ajax.cs
<div class="col-lg-12 control-section">
    <div class="e-sample-resize-container">
        <div id="ej2Tab"></div>
    </div>
</div>

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }

    .e-content .e-item {
        font-size: 12px;
        margin: 10px;
        text-align: justify;
    }
</style>

<script>
    var ajax = new ej.base.Ajax('./network.html', 'GET', true);
    ajax.send().then();
    ajax.onSuccess = function (data) {
        var ctn2 = data;
        var tabObj = new ej.navigations.Tab({
            items: [
                {
                    header: { 'text': 'Facebook' },
                    content: 'Facebook is an online social networking service headquartered in Menlo Park, California. Its website was ' +
                    'launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo ' +
                    'Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website\'\s ' +
                    'membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford ' +
                    'University. It gradually added support for students at various other universities and later to high-school students.'
                },
                {
                    header: { 'text': 'Whatsapp' },
                    content: 'WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates ' +
                    'under a subscription business model. It uses the Internet to send text messages, images, video, user location and ' +
                    'audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user ' +
                    'base of up to one billion,[10] making it the most globally popular messaging application. WhatsApp Inc., based in ' +
                    'Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.'
                },
                { header: { 'text': 'Twitter' }, content: ctn2 },
            ]
        });

        //Render initialized Tab component
        tabObj.appendTo('#ej2Tab');
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public IActionResult ajax()
        {
            return View();
        }
    }
}

Prevent content swipe selection

We can prevent the tab selection on touch swipe action by using the Tab selecting  event. Refer the below sample with preventing swipe selection.

tagHelper
swipe.cs
@{
    var content0 = "Twitter is an online social networking service that enables users to send and read short 140-character" +
                   "messages called 'tweets'.Registered users can read and post tweets, but those who are unregistered can only read" +
                   "them.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San" +
                   "Francisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey," +
                   "Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity," +
                   "with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion" +
                   "search queries per day.";
    var content1 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was" +
                   "launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo" +
                   "Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the websites" +
                   "membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford" +
                   "University.It gradually added support for students at various other universities and later to high-school students.";
    var content2 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates" +
                   "under a subscription business model.It uses the Internet to send text messages, images, video, user location and" +
                   "audio media messages to other users using standard cellular mobile numbers.As of February 2016, WhatsApp had a user" +
                   "base of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based in" +
                   "Mountain View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion.";
}

<div class="col-lg-12 control-section">
    <div class="e-sample-resize-container">
        <ejs-tab id="ej2Tab" selecting="tabSelecting">
            <e-tab-tabitems>
                <e-tab-tabitem header="ViewBag.headerTextOne" content="@content0"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerTextTwo" content="@content1"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerTextThree" content="@content2"></e-tab-tabitem>
            </e-tab-tabitems>
        </ejs-tab>
    </div>
</div>

<style>
    .e-content .e-item {
        font-size: 12px;
        padding: 10px;
        text-align: justify;
    }

    .container {
        min-width: 350px;
        max-width: 500px;
        margin: 0 auto;
    }
</style>

<script type="text/javascript">
    function tabSelecting(e) {
        if (e.isSwiped) {
            e.cancel = true;
        }
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public IActionResult swipe()
        {
            ViewBag.headerTextOne = new TabHeader { Text = "Twitter" };
            ViewBag.headerTextTwo = new TabHeader { Text = "Facebook" };
            ViewBag.headerTextThree = new TabHeader { Text = "Whatsapp" };
            return View();
        }
    }
}

Customize selected tab styles

You can customize the Tab style by overriding its header and active tab CSS classes. Define HTML string for adding animation and customizing the Tab header and pass it to text property. Now you can override the style using custom CSS classes added to the Tab elements.

tagHelper
styles.cs
@{
    var content0 = "Twitter is an online social networking service that enables users to send and read short 140-character" +
            "messages called tweets.Registered users can read and post tweets, but those who are unregistered can only read" +
            "them.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San" +
            "Francisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey," +
            "Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity," +
            "with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion" +
            "search queries per day.";

    var content1 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was" +
                "launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo" +
                "Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the websites" +
                "membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford" +
                "University.It gradually added support for students at various other universities and later to high - school students.";

    var content2 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates" +
            "under a subscription business model.It uses the Internet to send text messages, images, video, user location and" +
            "audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user" +
            "base of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based in" +
            "Mountain View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion.";
}

<div class="col-lg-12 control-section">
    <div class="e-sample-resize-container">
        <div class='row'>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <label> Header Style </label>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <ejs-dropdownlist id="styles" width="100%" dataSource="ViewBag.stylesData" change="changeStyles" value="Default"></ejs-dropdownlist>
            </div>
        </div>
        <br />
        <ejs-tab id="ej2Tab" created="tabCreated">
            <e-tab-tabitems>
                <e-tab-tabitem header="ViewBag.headerText0" content="@content0"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerText1" content="@content1"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerText2" content="@content2"></e-tab-tabitem>
            </e-tab-tabitems>
        </ejs-tab>
    </div>
</div>

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }

    .e-content .e-item {
        font-size: 12px;
        margin: 10px;
        text-align: justify;
    }
</style>

<script type="text/javascript">
    var tabObj;
    function tabCreated() {
        tabObj = document.getElementById('ej2Tab').ej2_instances[0];
    }

    // Change event funtion for DropDownList component
    function changeStyles(e) {
        removeStyleClass();
        let name = e.itemData;
        if (e.itemData != null && name === 'Fill') {
            tabObj.element.classList.add('e-fill');
        } else if (e.itemData != null && name === 'Background') {
            tabObj.element.classList.add('e-background');
        } else if (e.itemData != null && name === 'Accent') {
            tabObj.element.classList.add('e-background');
            tabObj.element.classList.add('e-accent');
        }
    }

    function removeStyleClass() {
        tabObj.element.classList.remove('e-fill');
        tabObj.element.classList.remove('e-background');
        tabObj.element.classList.remove('e-accent');
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public IActionResult styles()
        {
            ViewBag.headerText0 = new TabHeader { Text = "Twitter" };
            ViewBag.headerText1 = new TabHeader { Text = "Facebook" };
            ViewBag.headerText2 = new TabHeader { Text = "Whatsapp" };

            ViewBag.stylesData = new string[] { "Default", "Fill", "Background", "Accent" };
            return View();
        }
    }
}

Output be like the below.

Tab Control with customized tab styles

Set state persistence of the Tab component

State persistence allows the Tab to retain the current modal value in the browser cookies for state maintenance. This action is handled through the enablePersistence property which is set to false by default. When it is set to true, some of the Tab component model values will be retained even after refreshing the page.

The following sample demonstrates how to set state persistence of the Tab component.

tagHelper
styles.cs
@{
    var content0 = "Twitter is an online social networking service that enables users to send and read short 140-character" +
            "messages called tweets.Registered users can read and post tweets, but those who are unregistered can only read" +
            "them.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San" +
            "Francisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey," +
            "Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity," +
            "with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion" +
            "search queries per day.";

    var content1 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was" +
                "launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo" +
                "Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the websites" +
                "membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford" +
                "University.It gradually added support for students at various other universities and later to high - school students.";

    var content2 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates" +
            "under a subscription business model.It uses the Internet to send text messages, images, video, user location and" +
            "audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user" +
            "base of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based in" +
            "Mountain View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion.";
}

        <ejs-tab id="ej2Tab" enablePersistence="true">
            <e-tab-tabitems>
                <e-tab-tabitem header="ViewBag.headerText0" content="@contentOne"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerText1" content="@contentTwo"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerText2" content="@contentThree"></e-tab-tabitem>
            </e-tab-tabitems>
        </ejs-tab>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public IActionResult styles()
        {
            ViewBag.headerText0 = new TabHeader { Text = "Twitter" };
            ViewBag.headerText1 = new TabHeader { Text = "Facebook" };
            ViewBag.headerText2 = new TabHeader { Text = "WhatsApp" };
            return View();
        }
    }
}

Output be like the below.

State Persistence

Set custom animation

Tab supports custom animations for both previous and next actions from the provided animation option of Animation library. The animation property also allows you to set easing, duration, and various other effects.

Default animation is given as SlideLeftIn for previous tab animation and SlideRightIn for next tab animation. You can also disable the animation by setting the animation effect as none.

The sample demonstrates some types of animation that suits Tab. You can check all the animation effects here.

tagHelper
styles.cs
@{
    var content0 = "Twitter is an online social networking service that enables users to send and read short 140-character" +
            "messages called tweets.Registered users can read and post tweets, but those who are unregistered can only read" +
            "them.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San" +
            "Francisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey," +
            "Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity," +
            "with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion" +
            "search queries per day.";

    var content1 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was" +
                "launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo" +
                "Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the websites" +
                "membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford" +
                "University.It gradually added support for students at various other universities and later to high - school students.";

    var content2 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates" +
            "under a subscription business model.It uses the Internet to send text messages, images, video, user location and" +
            "audio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a user" +
            "base of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based in" +
            "Mountain View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion.";
}

<div class="col-lg-12 control-section">
    <div class="e-sample-resize-container">
        <div class='row'>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <label> Previous Animation </label>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <ejs-dropdownlist id="previous" dataSource="ViewBag.animationData" index="0" change="previousChange"></ejs-dropdownlist>
            </div>
        </div>
        <div class='row'>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <label> Next Animation </label>
            </div>
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <ejs-dropdownlist id="next" dataSource="ViewBag.animationData" index="1" change="nextChange"></ejs-dropdownlist>
            </div>
        </div>
        <br />

        <ejs-tab id="ej2Tab">
            <e-tab-tabitems>
                <e-tab-tabitem header="ViewBag.headerText0" content="@contentOne"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerText1" content="@contentTwo"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerText2" content="@contentThree"></e-tab-tabitem>
            </e-tab-tabitems>
        </ejs-tab>

    </div>
</div>



<script type="text/javascript">
        function previousChange(e) {
            var tabObj = document.getElementById('ej2Tab').ej2_instances[0];
            tabObj.animation.previous.effect = e.value;
        }
        function nextChange(e) {
            var tabObj = document.getElementById('ej2Tab').ej2_instances[0];
            tabObj.animation.next.effect = e.value;
        }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public IActionResult styles()
        {
            ViewBag.headerText0 = new TabHeader { Text = "Twitter" };
            ViewBag.headerText1 = new TabHeader { Text = "Facebook" };
            ViewBag.headerText2 = new TabHeader { Text = "WhatsApp" };
            ViewBag.animationData = new string[] { "SlideLeftIn", "SlideRightIn", "FadeIn", "FadeOut", "FadeZoomIn", "FadeZoomOut", "ZoomIn", "ZoomOut", "None" };
            return View();
        }
    }
}

Output be like the below.

Custom Animation

Create wizard using Tab

Tab items can be disabled initial control rendering by passing the boolean value to disabled property of TabItem class.

In the below demo, designed for simple train reservation module that enable/disable tab items based on sequential validation of each Tab content.

tagHelper
wizard.cs
@{ 
    var dlgTarget = "#ej2Tab";
}

<div class="control-section e-tab-section">
    <div class="e-sample-resize-container">
        <div id="booking" style="display: none">
            <div class="wizard-title">Plan your journey</div>
            <div class="responsive-align">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                        <ejs-dropdownlist id="startPoint" width="100%" dataSource="ViewBag.citiesData" placeholder="From">
                            <e-dropdownlist-fields text="Name" value="Name"></e-dropdownlist-fields>
                        </ejs-dropdownlist>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                        <ejs-dropdownlist id="endPoint" width="100%" dataSource="ViewBag.citiesData" placeholder="To">
                            <e-dropdownlist-fields text="Name" value="Name"></e-dropdownlist-fields>
                        </ejs-dropdownlist>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                        <ejs-datepicker id="date" width="100%" placeholder="Journey Date" min="ViewBag.min" max="ViewBag.max" focus="showDate"></ejs-datepicker>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 search-item">
                        <ejs-dropdownlist id="quota" dataSource="ViewBag.quota" placeholder="Ticket type">
                            <e-dropdownlist-fields text="Text" value="Text"></e-dropdownlist-fields>
                        </ejs-dropdownlist>
                    </div>
                </div>
                <div class="btn-container">
                    <button id="searchNext" class="e-btn">Search Train</button>
                </div>
                <span id="err1"></span>
            </div>
        </div>
        <div id="selectTrain" style="display: none">
            <div class="wizard-title">Select the train from the list </div>
            <ejs-grid id="availableTrain" rowSelected="trainSelected" width="100%">
                <e-grid-columns>
                    <e-grid-column field="TrainNo" headerText="Train No" width=120 type="number"></e-grid-column>
                    <e-grid-column field="Name" headerText="Name" width=140></e-grid-column>
                    <e-grid-column field="Departure" headerText="Departure" width=120></e-grid-column>
                    <e-grid-column field="Arrival" headerText="Arrival" width=140></e-grid-column>
                    <e-grid-column field="Availability" headerText="Availability" width=140 type="number"></e-grid-column>
                </e-grid-columns>
            </ejs-grid>
            <br />
            <div class="btn-container">
                <button id="goToSearch" class="e-btn">Back</button>
                <button id="bookTickets" class="e-btn">Continue</button>
            </div>
            <span id="err2"></span>
        </div>
        <div id="details" style="display: none">
            <div class="details-page wizard-title">Enter the passenger details</div>
            <div id="PassengersList">
                <table id="passenger-table">
                    <colgroup>
                        <col />
                        <col />
                        <col />
                        <col />
                        <col />
                        <col />
                    </colgroup>
                    <thead>
                        <tr>
                            <th class="name-header">Name</th>
                            <th class="age-header">Age</th>
                            <th class="gender-header">Gender</th>
                            <th class="type-header">Berth Preference</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input id="pass_name1" class="e-input" type="text" placeholder="Passenger Name">
                            </td>
                            <td>
                                <ejs-numerictextbox id="pass_age1" min=1 max=100 value=18 format=n0 showSpinButton="false"></ejs-numerictextbox>
                            </td>
                            <td>
                                <ejs-dropdownlist id="pass_gender1" text="Male" dataSource="ViewBag.gender">
                                    <e-dropdownlist-fields text="Text" value="Text"></e-dropdownlist-fields>
                                </ejs-dropdownlist>
                            </td>
                            <td>
                                <ejs-dropdownlist id="pass_berth1" placeholder="Optional" dataSource="ViewBag.berth">
                                    <e-dropdownlist-fields text="Text" value="Text"></e-dropdownlist-fields>
                                </ejs-dropdownlist>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="pass_name2" class="e-input" type="text" placeholder="Passenger Name">
                            </td>
                            <td>
                                <ejs-numerictextbox id="pass_age2" min=1 max=100 value=18 format=n0 showSpinButton="false"></ejs-numerictextbox>
                            </td>
                            <td>
                                <ejs-dropdownlist id="pass_gender2" text="Male" dataSource="ViewBag.gender">
                                    <e-dropdownlist-fields text="Text" value="Text"></e-dropdownlist-fields>
                                </ejs-dropdownlist>
                            </td>
                            <td>
                                <ejs-dropdownlist id="pass_berth2" placeholder="Optional" dataSource="ViewBag.berth">
                                    <e-dropdownlist-fields text="Text" value="Text"></e-dropdownlist-fields>
                                </ejs-dropdownlist>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="pass_name3" class="e-input" type="text" placeholder="Passenger Name">
                            </td>
                            <td>
                                <ejs-numerictextbox id="pass_age3" min=1 max=100 value=18 format=n0 showSpinButton="false"></ejs-numerictextbox>
                            </td>
                            <td>
                                <ejs-dropdownlist id="pass_gender3" text="Male" dataSource="ViewBag.gender">
                                    <e-dropdownlist-fields text="Text" value="Text"></e-dropdownlist-fields>
                                </ejs-dropdownlist>
                            </td>
                            <td>
                                <ejs-dropdownlist id="pass_berth3" placeholder="Optional" dataSource="ViewBag.berth">
                                    <e-dropdownlist-fields text="Text" value="Text"></e-dropdownlist-fields>
                                </ejs-dropdownlist>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <br />
            <div class="btn-container">
                <button id="goBackToBook" class="e-btn">Back</button>
                <button id="confirmTickets" class="e-btn">Continue</button>
            </div>
            <span id="err3"></span>
        </div>
        <div id="confirm" style="display: none">
            <div class="tab-title1 wizard-title">Confirm the details and proceed</div>
            <ejs-grid id="ticketDetailGrid" width="100%">
                <e-grid-columns>
                    <e-grid-column field="TrainNo" headerText="Train No" width=120 type="number"></e-grid-column>
                    <e-grid-column field="PassName" headerText="Name" width=140></e-grid-column>
                    <e-grid-column field="Gender" headerText="Gender" width=120></e-grid-column>
                    <e-grid-column field="Berth" headerText="Berth" width=140></e-grid-column>
                </e-grid-columns>
            </ejs-grid>
            <br />
            <div id="amount"></div>
            <br />
            <div class="btn-container">
                <button id="goBackDetails" class="e-btn">Back</button>
                <button id="makePayment" class="e-btn">Pay</button>
            </div>
        </div>
        <ejs-tab id="ej2Tab" heightAdjustMode="None" height="390" created="tabCreated" selecting="tabSelecting">
            <e-tab-tabitems>
                <e-tab-tabitem header="ViewBag.headerTextOne" content="ViewBag.content1"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerTextTwo" content="ViewBag.content2" disabled="true"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerTextThree" content="ViewBag.content3" disabled="true"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerTextFour" content="ViewBag.content4" disabled="true"></e-tab-tabitem>
            </e-tab-tabitems>
        </ejs-tab>
        <div>
            <ejs-dialog id="alertDialog" header="Success" width=250 target="@dlgTarget" isModal=true created="dlgCreated" visible=false showCloseIcon="true"></ejs-dialog>
        </div>
    </div>
</div>

<script>
    var tabObj;
    var endPoint;
    var alertDlg;
    var locations;
    var ticketType;
    var startPoint;
    var journeyDate;
    var selectedTrain;
    var availTrainGrid;
    var ticketDetailGrid;

    var cities = [
        { name: "Chicago", fare: 300 },
        { name: "San Francisco", fare: 125 },
        { name: "Los Angeles", fare: 175 },
        { name: "Seattle", fare: 250 },
        { name: "Florida", fare: 150 }
    ];

    function tabCreated() {
        document.getElementById("searchNext").onclick = function (e) { tabNavigations(e); };
        document.getElementById("bookTickets").onclick = function (e) { tabNavigations(e); };
        document.getElementById("confirmTickets").onclick = function (e) { tabNavigations(e); };
        document.getElementById("makePayment").onclick = function (e) { tabNavigations(e); };
        document.getElementById("goToSearch").onclick = function (e) { tabNavigations(e); };
        document.getElementById("goBackToBook").onclick = function (e) { tabNavigations(e); };
        document.getElementById("goBackDetails").onclick = function (e) { tabNavigations(e); };

        tabObj = document.getElementById("ej2Tab").ej2_instances[0];
        startPoint = document.getElementById("startPoint").ej2_instances[0];
        endPoint = document.getElementById("endPoint").ej2_instances[0];
        ticketType = document.getElementById("quota").ej2_instances[0];
        journeyDate = document.getElementById("date").ej2_instances[0];
        availTrainGrid = document.getElementById("availableTrain").ej2_instances[0];
        ticketDetailGrid = document.getElementById("ticketDetailGrid").ej2_instances[0];
    }

    function showDate() {
        journeyDate = document.getElementById("date").ej2_instances[0];
        journeyDate.show();
    }

    function tabSelecting(e) {
        if (e.isSwiped) {
            e.cancel = true;
        }
    }

    function dlgCreated() {
        alertDlg = document.getElementById("alertDialog").ej2_instances[0];
        alertDlg.content = "Your payment successflly processed";
        alertDlg.buttons = [{
            buttonModel: { content: "Ok", isPrimary: true },
            click: function () {
                alertDlg.hide();
                tabObj.enableTab(0, true);
                tabObj.enableTab(1, false);
                tabObj.enableTab(2, false);
                tabObj.enableTab(3, false);
                tabObj.select(0);
            }
        }];
        alertDlg.dataBind();
        alertDlg.hide();
    }

    function trainSelected(args) {
        selectedTrain = args.data;
    }

    function filterTrains(args) {
        /* Generating trains based on source and destination chosen */
        var result = [];
        var fromCity = startPoint.text;
        var toCity = endPoint.text;
        var count = Math.floor((Math.random() * 3) + 2);
        for (var i = 0; i < count; i++) {
            var details = [];
            details.TrainNo = Math.floor((Math.random() * 20) + 19000);
            details.Name = "Train " + i;
            details.Departure = fromCity;
            details.Arrival = toCity;
            details.Availability = Math.floor((Math.random() * 20) + 20);
            result.push(details);
        }
        availTrainGrid.dataSource = result;
    }
    function finalizeDetails(args) {
        /* Get the passenger details and update table with name and other details for confirmation */
        var reserved = [];
        var passCount = 0;
        for (var i = 1; i <= 3; i++) {
            var name = document.getElementById("pass_name" + i);
            var berthSelected = document.getElementById("pass_berth" + i);
            var gender = document.getElementById("pass_gender" + i);
            if (name.value !== "") {
                var details = [];
                var berth = berthSelected.value;
                details.TrainNo = selectedTrain.TrainNo.toString();
                details.PassName = name.value;
                details.Gender = gender.value;
                details.Berth = (berth === "") ? "Any" : berth;
                reserved.push(details);
                passCount++;
            }
            var calcFare = 0;
            for (var i in cities) {
                if (startPoint.value == cities[i].name)
                    calcFare = calcFare + cities[i].fare;
                if (endPoint.value == cities[i].name)
                    calcFare = calcFare + cities[i].fare;
            }
            var displayAmt = document.getElementById("amount");
            if (ticketType.value === "Economy Class") {
                displayAmt.innerText = "Total payable amount: $" + passCount * (300 + calcFare)
            } else if (ticketType.value === "Business Class") {
                displayAmt.innerText = "Total payable amount: $" + passCount * (500 + calcFare)
            } else if (ticketType.value === "Common Class") {
                displayAmt.innerText = "Total payable amount: $" + passCount * (150 + calcFare)
            }
        }
        ticketDetailGrid.dataSource = reserved;
    }

    function tabNavigations(args) {
        switch (args.target.id) {
            case "searchNext":
                /* Validate the Source, Destination, Date and Class chosen and proceed only if all the fields are selected */
                if (!ej.base.isNullOrUndefined(startPoint.value) && !ej.base.isNullOrUndefined(endPoint.value) &&
                    !ej.base.isNullOrUndefined(ticketType.value) && !ej.base.isNullOrUndefined(journeyDate.value)) {
                    if (!ej.base.isNullOrUndefined(startPoint.value) && startPoint.value === endPoint.value) {
                        document.getElementById("err1").innerText = "* Arrival point can\"t be same as Departure";
                    }
                    else {
                        tabObj.enableTab(0, false);
                        tabObj.enableTab(1, true);
                        filterTrains(args);
                        tabObj.select(1);
                        document.getElementById("err1").innerText = "";
                        document.getElementById("err2").innerText = "";
                    }
                }
                else {
                    document.getElementById("err1").innerText = "* Please fill all the details before proceeding";
                }
                break;
            case "bookTickets":
                /* Based on the selected station generate Grid content to display trains available */
                if (availTrainGrid.getSelectedRecords() === undefined || availTrainGrid.getSelectedRecords().length === 0) {
                    document.getElementById("err2").innerText = "* Select your convenient train";
                }
                else {
                    tabObj.enableTab(2, true);
                    tabObj.select(2);
                    tabObj.enableTab(1, false);
                    document.getElementById("err2").innerText = "";
                }
                break;
            case "confirmTickets":
                /* Get the Passenger details and validate the fields must not be left empty */
                var name = document.getElementById("pass_name1");
                var age = document.getElementById("pass_age1");
                var gender = document.getElementById("pass_gender1");
                if (name.value === "" || age.value === "" || gender.value === "") {
                    document.getElementById("err3").innerText = "* Please enter passenger details";
                }
                else {
                    tabObj.enableTab(3, true);
                    tabObj.select(3);
                    tabObj.enableTab(2, false);
                    document.getElementById("err3").innerText = "";
                    finalizeDetails(args);
                }
                break;
            case "makePayment":
                alertDlg.show();
                break;
            case "goToSearch":
                /* Go back to change class, date or boarding places */
                selectedTrain = [];
                tabObj.enableTab(0, true);
                tabObj.select(0);
                tabObj.enableTab(1, false);
                break;
            case "goBackToBook":
                /* Change the preferred train chosen already */
                tabObj.enableTab(1, true);
                tabObj.select(1);
                tabObj.enableTab(2, false);
                break;
            case "goBackDetails":
                /* Update passenger detail before confirming the payment */
                tabObj.enableTab(2, true);
                tabObj.select(2);
                tabObj.enableTab(3, false);
                break;
        }
    }
</script>

<style>
    .e-content .e-item {
        font-size: 12px;
        margin: 10px;
    }

    #amount {
        text-align: right;
        font-size: 15px;
        padding: 15px 0px;
    }

    #passenger-table th {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        border: 1px solid gainsboro;
    }

    #passenger-table td,
    th {
        padding: 10px;
    }

    #passenger-table td {
        border: 1px solid gainsboro;
    }

    .name-header {
        width: 200px;
    }

    .age-header {
        width: 80px;
    }

    .gender-header {
        width: 120px;
    }

    .type-header {
        width: 150px;
    }

    .btn-container {
        text-align: center;
    }

    .search-item {
        padding-right: 50px;
        padding-bottom: 20px;
    }

    .item-title {
        font-weight: 500;
        padding-top: 10px;
    }

    @@media (max-width: 450px) {
        .e-sample-resize-container {
            height: 450px;
        }
        .responsive-align {
            width: 75%;
            margin: 0 auto;
        }

        .search-item {
            padding: 0 0 20px 0;
            width: 100%;
        }
    }

    #err1,
    #err2,
    #err3 {
        font-weight: bold;
        color: red;
        display: block;
        margin-top: 15px;
    }

    .wizard-title {
        font-size: 15px;
    }
    #PassengersList {
        overflow: auto;
    }

    #passenger-table {
        min-width: 500px;
        width: 100%;
    }

    .e-tab-section {
        padding: 0 15px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public class DataFields
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        public class CitiesFields
        {
            public string Name { get; set; }
            public int Fare { get; set; }
        }

        List<DataFields> quotaData = new List<DataFields>();
        List<DataFields> genderData = new List<DataFields>();
        List<DataFields> berthData = new List<DataFields>();
        List<CitiesFields> citiesData = new List<CitiesFields>();
        public IActionResult wizard()
        {
            quotaData.Add(new DataFields { ID = "1", Text = "Business Class" });
            quotaData.Add(new DataFields { ID = "2", Text = "Economy Class" });
            quotaData.Add(new DataFields { ID = "3", Text = "Common Class" });

            genderData.Add(new DataFields { ID = "1", Text = "Male" });
            genderData.Add(new DataFields { ID = "2", Text = "Female" });

            berthData.Add(new DataFields { ID = "1", Text = "Upper" });
            berthData.Add(new DataFields { ID = "2", Text = "Lower" });
            berthData.Add(new DataFields { ID = "3", Text = "Middle" });
            berthData.Add(new DataFields { ID = "4", Text = "Window" });
            berthData.Add(new DataFields { ID = "5", Text = "Aisle" });

            citiesData.Add(new CitiesFields { Name = "Chicago", Fare = 300 });
            citiesData.Add(new CitiesFields { Name = "San Francisco", Fare = 125 });
            citiesData.Add(new CitiesFields { Name = "Los Angeles", Fare = 175 });
            citiesData.Add(new CitiesFields { Name = "Seattle", Fare = 250 });
            citiesData.Add(new CitiesFields { Name = "Florida", Fare = 150 });

            ViewBag.headerTextOne = new TabHeader { Text = "New Booking" };
            ViewBag.headerTextTwo = new TabHeader { Text = "Train List" };
            ViewBag.headerTextThree = new TabHeader { Text = "Add Passenger" };
            ViewBag.headerTextFour = new TabHeader { Text = "Make Payment" };

            ViewBag.quota = quotaData;
            ViewBag.gender = genderData;
            ViewBag.berth = berthData;
            ViewBag.citiesData = citiesData;

            ViewBag.content1 = "#booking";
            ViewBag.content2 = "#selectTrain";
            ViewBag.content3 = "#details";
            ViewBag.content4 = "#confirm";

            ViewBag.min = DateTime.Now;
            ViewBag.max = DateTime.Now.AddMonths(3);

            return View();
        }
    }
}

Load tab with DataSource

You can bind any data object to Tab items, by mapping it to a header and content  property.

In the below demo, Data is fetched from an OData service using DataManager. The result data is formatted as a JSON object with header and content fields, which is set to items property of Tab.

tagHelper
data.cs
<div class="col-lg-12 control-section">
    <div class="e-sample-resize-container">
        <div id="ej2Tab"></div>
    </div>
</div>

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }

    .e-content .e-item {
        font-size: 12px;
        margin: 10px;
        text-align: justify;
    }

    .container {
        min-width: 350px;
        max-width: 500px;
        margin: 0 auto;
    }
</style>

<script type="text/javascript">
    var itemsData = [];
    var mapping = { header: 'FirstName', content: 'Notes' };

    const SERVICE_URI = 'http://services.odata.org/V4/Northwind/Northwind.svc/Employees';

    new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor })
        .executeQuery(new ej.data.Query().range(1, 4)).then((e) => {

    var result = e.result;

    for (var i = 0; i < result.length; i++) {
        itemsData.push({ header: { text: result[i][mapping.header] }, content: result[i][mapping.content] });
    }

    //Initialize Tab component
    var tabObj = new ej.navigations.Tab({
        items: itemsData
    });
    //Render initialized Tab component
    tabObj.appendTo('#ej2Tab');
});
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public IActionResult data()
        {
            return View();
        }
    }
}

Add nested Tabs

Tab supports to render the nested level of Tabs by using content property. You can add the nested Tab element inside the parent Tab content property. To render the nested Tab, initialize the component using the id of Tab from a selected event handler.

tagHelper
nested.cs
@{
    var content0 = "<div id='usa_tab'></div>";
    var content1 = "<div id='france_tab'></div>";
    var content2 = "<div id='australia_tab'></div>";
}

<div class="col-lg-12 control-section">
    <div class="e-sample-resize-container">
        <ejs-tab id="ej2Tab" selected="handleSelectEvent">
            <e-tab-tabitems>
                <e-tab-tabitem header="ViewBag.headerTextOne" content="@content0"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerTextTwo" content="@content1"></e-tab-tabitem>
                <e-tab-tabitem header="ViewBag.headerTextThree" content="@content2"></e-tab-tabitem>
            </e-tab-tabitems>
        </ejs-tab>
    </div>
</div>

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }

    .e-content .e-item {
        font-size: 12px;
        margin: 10px;
        text-align: justify;
    }

    .container {
        min-width: 350px;
        max-width: 500px;
        margin: 0 auto;
    }
</style>

<script type="text/javascript">
    function handleSelectEvent(e) {
        if (e.selectedIndex === 0 && ej.base.isNullOrUndefined(document.querySelector('#usa_tab.e-tab'))) {
            var usa_obj = new ej.navigations.Tab({
                items: [
                    {
                        header: { 'text': 'New York' },
                        content: 'New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers. Its iconic sites include skyscrapers such as the Empire State Building and sprawling Central Park. Broadway theater is staged in neon-lit Times Square.'
                    },
                    {
                        header: { 'text': 'Los Angeles' },
                        content: 'Los Angeles is a sprawling Southern California city and the center of the nation’s film and television industry. Near its iconic Hollywood sign, studios such as Paramount Pictures, Universal and Warner Brothers offer behind-the-scenes tours. On Hollywood Boulevard, TCL Chinese Theatre displays celebrities’ hand- and footprints, the Walk of Fame honors thousands of luminaries and vendors sell maps to stars’ homes.'
                    },
                    {
                        header: { 'text': 'Chicago' },
                        content: 'Chicago, on Lake Michigan in Illinois, is among the largest cities in the U.S. Famed for its bold architecture, it has a skyline punctuated by skyscrapers such as the iconic John Hancock Center, 1,451-ft. Willis Tower (formerly the Sears Tower) and the neo-Gothic Tribune Tower. The city is also renowned for its museums, including the Art Institute of Chicago with its noted Impressionist and Post-Impressionist works.'
                    }
                ]
            });
            usa_obj.appendTo('#usa_tab');
        } else if (e.selectedIndex === 1 && ej.base.isNullOrUndefined(document.querySelector('#france_tab.e-tab'))) {
            var france_obj = new ej.navigations.Tab({
                items: [
                    {
                        header: { 'text': 'Paris' },
                        content: 'Paris, France capital, is a major European city and a global center for art, fashion, gastronomy and culture. Its 19th-century cityscape is crisscrossed by wide boulevards and the River Seine. Beyond such landmarks as the Eiffel Tower and the 12th-century, Gothic Notre-Dame cathedral, the city is known for its cafe culture and designer boutiques along the Rue du Faubourg Saint-Honoré.'
                    },
                    {
                        header: { 'text': 'Marseille' },
                        content: 'Marseille, a port city in southern France, has been a crossroads of immigration and trade since its founding by the Greeks circa 600 B.C. At its heart is the Vieux-Port (Old Port), where fishmongers sell their catch along the boat-lined quay. Basilique Notre-Dame-de-la-Garde is a Romanesque-Byzantine church. Modern landmarks include Le Corbusier’s influential Cité Radieuse complex and Zaha Hadid’s CMA CGM Tower.'
                    },
                    {
                        header: { 'text': 'Lyon' },
                        content: 'Lyon, the capital city in France’s Auvergne-Rhône-Alpes region, sits at the junction of the Rhône and Saône rivers. Its center reflects 2,000 years of history from the Roman Amphithéâtre des Trois Gaules, medieval and Renaissance architecture in Vieux (Old) Lyon, to the modern Confluence district on Presquîle peninsula. Traboules, covered passageways between buildings, connect Vieux Lyon and La Croix-Rousse hill.'
                    }
                ]
            });
            france_obj.appendTo('#france_tab');
        } else if (e.selectedIndex === 2 && ej.base.isNullOrUndefined(document.querySelector('#australia_tab.e-tab'))) {
            var australia_obj = new ej.navigations.Tab({
                items: [
                    {
                        header: { 'text': 'Sydney' },
                        content: 'Sydney, capital of New South Wales and one of Australia largest cities, is best known for its harbourfront Sydney Opera House, with a distinctive sail-like design. Massive Darling Harbour and the smaller Circular Quay port are hubs of waterside life, with the arched Harbour Bridge and esteemed Royal Botanic Garden nearby. Sydney Tower’s outdoor platform, the Skywalk, offers 360-degree views of the city and suburbs.'
                    },
                    {
                        header: { 'text': 'Melbourne' },
                        content: 'Melbourne is the coastal capital of the southeastern Australian state of Victoria. At the city centre is the modern Federation Square development, with plazas, bars, and restaurants by the Yarra River. In the Southbank area, the Melbourne Arts Precinct is the site of Arts Centre Melbourne – a performing arts complex – and the National Gallery of Victoria, with Australian and indigenous art.'
                    },
                    {
                        header: { 'text': 'Brisbane' },
                        content: 'Brisbane, capital of Queensland, is a large city on the Brisbane River. Clustered in its South Bank cultural precinct are the Queensland Museum and Sciencentre, with noted interactive exhibitions. Another South Bank cultural institution is Queensland Gallery of Modern Art, among Australia major contemporary art museums. Looming over the city is Mt. Coot-tha, site of Brisbane Botanic Gardens.'
                    }
                ]
            });
            australia_obj.appendTo('#australia_tab');
        }
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public IActionResult nested()
        {
            ViewBag.headerTextOne = new TabHeader { Text = "USA" };
            ViewBag.headerTextTwo = new TabHeader { Text = "France" };
            ViewBag.headerTextThree = new TabHeader { Text = "Australia" };
            return View();
        }
    }
}

Load Tab items dynamically

Tabs can be added dynamically by passing array of items and index value to the addTab method.

In the following demo, you can add the tab content by clicking the +. Enter the new Tab heading and content details in the available text boxes, click ‘Add Tab’ button to pass the details as an array and here last index is calculated to append the new tab at the end.

tagHelper
dynamic.cs
@using Syncfusion.EJ2

@section ControlsSection{
    <div class="col-lg-12 control-section">
        <div class="e-sample-resize-container">
            <div id="tab1_content" style="display: none">
                <ul>
                    <li>Click on the "+" header to add dynamic tab items. </li>
                    <li>It displays input elements to get the new tab information. </li>
                    <li>Add details and click the "Add Tab" button to open the newly added tab.</li>
                </ul>
            </div>
            <div id="form-container" style="display: none">
                <div class="e-float-input">
                    <input type="text" id="tab-title" required="" />
                    <span class="e-float-line"></span>
                    <label class="e-float-text">Enter header title</label>
                </div>
                <br />
                <div class="e-float-input">
                    <textarea rows="5" type="text" id="tab-content" required=""></textarea>
                    <span class="e-float-line"></span>
                    <label class="e-float-text">Enter content</label>
                </div>
                <br />
                <div class="btn-section">
                    <button id="btn-add" class="btn btn-default" onclick="btnClicked(this)">Add Tab</button>
                    <br />
                    <br />
                    <span class="info"> * Title is mandatory to add a new Tab</span>
                </div>
            </div>
            <ejs-tab id="ej2Tab" created="tabCreated" Selected = "tabSelected">
                <e-tab-tabitems>
                    <e-tab-tabitem header="ViewBag.headerTextOne" content="#tab1_content"></e-tab-tabitem>
                    <e-tab-tabitem header="ViewBag.headerTextTwo" content="#form-container"></e-tab-tabitem>
                </e-tab-tabitems>
            </ejs-tab>
        </div>
    </div>
}

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }

    .e-content .e-item {
        font-size: 12px;
        margin: 10px;
        text-align: justify;
    }

    .container {
        min-width: 350px;
        max-width: 500px;
        margin: 0 auto;
    }

    #form-container {
        margin: 0 auto;
        max-width: 300px;
    }

    .btn-section {
        text-align: center;
    }

    .add-tab-btn-section td {
        padding: 10px;
    }

    .info {
        font-weight: bold;
    }

    .e-add-icon::before {
        content: '\e7d5';
    }
</style>

<script type="text/javascript">
    function tabCreated() {
        var totalItems = 0;
        var addBtn = document.querySelectorAll(".e-ileft.e-icon");
        addBtn[0].setAttribute("title", "Add Tab");
    }

    function tabSelected(args) {
        if (args.selectedIndex === document.querySelectorAll('#ej2Tab .e-toolbar-item').length - 1) {
            document.getElementById('tab-title').value = '';
            document.getElementById('tab-content').value = '';
        }
    }

    function btnClicked(e) {
        var title = document.getElementById('tab-title').value;
        var content = document.getElementById('tab-content').value;
        var tabObj = document.getElementById("ej2Tab").ej2_instances[0];
        // Required tab item object formed by using textbox inputs
        var item = { header: { text: title }, content: ej.base.createElement('pre', { innerHTML: content.replace(/\n/g, '<br>\n') }).outerHTML };

        totalItems = document.querySelectorAll('#ej2Tab .e-toolbar-item').length;
        // Item object and the index argument passed into the addTab method to add a new tab
        tabObj.addTab([item], totalItems - 1);
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public IActionResult dynamic()
        {
            ViewBag.headerTextOne = new TabHeader { Text = "USA" };
            ViewBag.headerTextTwo = new TabHeader { IconCss = "e-add-icon" };
            return View();
        }
    }
}

Create collapsible Tabs

You can achieve collapse and expand functionality in Tab by adding/removing a custom CSS class in the click event handler for each tab.

  • Define a CSS class to set the style property display as none. Here ‘collapse’ class is added to the content element for hiding it.
  • Bind the select event for Tab to collapse the initially selected Tab item and bind custom click handler for the Tab headers.
  • In the event handler, add and remove ‘collapse’ class to hide and show the corresponding Tab content.
tagHelper
collapsible.cs
@using Syncfusion.EJ2

@{
    var content0 = "Twitter is an online social networking service that enables users to send and read short 140-character" +
                   "messages called 'tweets'.Registered users can read and post tweets, but those who are unregistered can only read" +
                   "them.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San" +
                   "Francisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey," +
                   "Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity," +
                   "with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion" +
                   "search queries per day.";
    var content1 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was" +
                   "launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo" +
                   "Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the websites" +
                   "membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford" +
                   "University.It gradually added support for students at various other universities and later to high-school students.";
    var content2 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates" +
                   "under a subscription business model.It uses the Internet to send text messages, images, video, user location and" +
                   "audio media messages to other users using standard cellular mobile numbers.As of February 2016, WhatsApp had a user" +
                   "base of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based in" +
                   "Mountain View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion.";
}

@section ControlsSection{
    <div class="col-lg-12 control-section">
        <div class="e-sample-resize-container">
            <div class="info">
                Collapsible Tabs
            </div>
            <span style="margin: 10px;">
                <i>The active tab can be toggled to expand and collapse its content.</i>
            </span>
            <br /><br />
            <ejs-tab id="ej2Tab" cssClass="e-background" created="tabCreated" Selected = "tabSelected">
                <e-tab-tabitems>
                    <e-tab-tabitem header="ViewBag.headerTextOne" content="@content0"></e-tab-tabitem>
                    <e-tab-tabitem header="ViewBag.headerTextTwo" content="@content1"></e-tab-tabitem>
                    <e-tab-tabitem header="ViewBag.headerTextThree" content="@content2"></e-tab-tabitem>
                </e-tab-tabitems>
            </ejs-tab>
        </div>
    </div>
}

<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }

    .e-content .e-item {
        font-size: 12px;
        margin: 10px;
        text-align: justify;
    }

    .container {
        min-width: 350px;
        margin: 0 10px;
    }

    .info {
        margin: 10px;
        font-weight: bold;
    }

    #ej2Tab.e-tab .e-content > .e-item.e-active.collapse {
        display: none;
    }

    #ej2Tab.e-tab .e-tab-header .e-indicator.collapse {
        display: none;
    }
</style>

<script type="text/javascript">
    var trgIndex;
    var actLine;
    var target;

    function tabCreated() {
        actLine = document.querySelector('#ej2Tab.e-tab .e-indicator');
        target = document.querySelector('#ej2Tab.e-tab .e-content .e-item.e-active');
        target.classList.add('collapse');
        actLine.classList.add('collapse');
    }

    function tabSelected(e) {
        var cnttrgs = document.querySelectorAll('#ej2Tab.e-tab > .e-content > .e-item');
        for (var i = 0; i < cnttrgs.length; i++) {
            cnttrgs[i].classList.remove('collapse');
        }
        if (actLine !== undefined) {
            actLine.classList.remove('collapse');
        }
        trgIndex = e.selectedIndex;
        // Custom click event binding for each tab item to make collapse/expand
        e.selectedItem.addEventListener('click', function (e) {
            updateCollapseClass();
        });
    }

    function updateCollapseClass() {
        // Custom classes are added/removed from tab content and active line element, when the same tab item again clicked
        var cntEle = document.querySelector('#ej2Tab.e-tab .e-content .e-item.e-active');
        if (cntEle.classList.contains('collapse')) {
            cntEle.classList.remove('collapse');
            actLine.classList.remove('collapse');
        }
        else {
            cntEle.classList.add('collapse');
            actLine.classList.add('collapse');
        }
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Navigations;

namespace WebApplication1.Controllers
{
    public partial class TabController : Controller
    {
        public IActionResult collapsible()
        {
            ViewBag.headerTextOne = new TabHeader { Text = "Twitter" };
            ViewBag.headerTextTwo = new TabHeader { Text = "Facebook" };
            ViewBag.headerTextThree = new TabHeader { Text = "WhatsApp" };
            return View();
        }
    }
}