Search results

Load tab with DataSource in ASP.NET MVC Tabs control

19 Oct 2021 / 1 minute to read

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.

Copied to clipboard
@using Syncfusion.EJ2.Navigations;

<div id="ej2Tab"></div>

    #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;

<script type="text/javascript">
    var itemsData = [];
    var mapping = { header: 'FirstName', content: 'Notes' };
    const SERVICE_URI = '';
    new{ url: SERVICE_URI, adaptor: new })
        .executeQuery(new, 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
Copied to clipboard
public ActionResult Index()
    return View();