Load tab with data source in EJ2 JavaScript Tab control

4 Jan 20254 minutes to read

You can bind any data object to Tab items by mapping it to the header and content properties.

In the example below, we’ll demonstrate how to fetch data from an OData service using DataManager. The retrieved data is formatted as a JSON object with header and content fields, which are then set to the items property of the Tab control.

var itemsData = [];
var mapping =  { header: 'FirstName', content: 'Notes' };

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

new ej.data.DataManager({ url: SERVICE_URI, adaptor: new ej.data.ODataV4Adaptor, crossDomain: true})
    .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('#element');
    });
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Tab</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Tab">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
    <style>
        .e-content .e-item {
            font-size: 12px;
            margin: 10px;
            text-align: justify;
        }
    
        .container {
            min-width: 350px;
            max-width: 500px;
            margin: 0 auto;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>