Creating TabPanels In Code

In some cases, you may want to add tabs to a TabPanel control programmatically rather than using HTML markup.

You can do this using the tabs property, which provides access to the collection of tabs in the TabPanel.

You can also use the tabs property to remove, modify, or reorder the tabs within the TabPanel.

// This file locates: "Scripts/Lesson/C1Nav/CreatingProgrammatically.js".
c1.documentReady(function () {
    var tabInCode = wijmo.Control.getControl('#tabInCode'),
        url = 'https://services.odata.org/Northwind/Northwind.svc/',
        headers = 'Products,Customers'.split(',');
    tabInCode.tabs.deferUpdate(function () { // update only when done
        headers.forEach(function (header) {
 
            // create the tab header element
            var elHeader = document.createElement('a');
            elHeader.textContent = header;
 
            // create the tab pane element
            var elPane = document.createElement('div'),
                elGrid = document.createElement('div'),
                grid = new wijmo.grid.FlexGrid(elGrid, {
                    isReadOnly: true,
                    itemsSource: new wijmo.odata.ODataCollectionView(url, header)
                });
            elPane.appendChild(elGrid);
 
            // add the new Tab to the TabPanel
            tabInCode.tabs.push(new wijmo.nav.Tab(elHeader, elPane));
        });
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Adding
        public ActionResult CreatingProgrammatically()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Nav.CreatingProgrammatically_Title)
     
</h1>
<p>
    @Html.Raw(Resources.C1Nav.CreatingProgrammatically_Text1)
     
</p>
<p>
    @Html.Raw(Resources.C1Nav.CreatingProgrammatically_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.CreatingProgrammatically_Text3)
</p>
 
<div>
    <div>
        <a id="headerEmployees">EMPLOYEES</a>
        <div id="paneEmployees">
            @(Html.C1().FlexGrid().IsReadOnly(true).AllowSorting(false)
                        .BindODataSource(os => os.ServiceUrl("https://services.odata.org/Northwind/Northwind.svc/").TableName("Employees").Fields("EmployeeID", "LastName", "FirstName", "Title", "TitleOfCourtesy")))
        </div>
    </div>
    <div>
        <a id="headerCategories">CATEGORIES</a>
        <div id="paneCategories">
            @(Html.C1().FlexGrid().IsReadOnly(true).AllowSorting(false)
                         .BindODataSource(os => os.ServiceUrl("https://services.odata.org/Northwind/Northwind.svc/").TableName("Categories").Fields("CategoryID", "CategoryName", "Description")))
        </div>
    </div>
</div>
@Html.C1().TabPanel().Id("tabInCode").Tabs(ts =>
{
    ts.Add().Header("#headerEmployees").Pane("#paneEmployees");
    ts.Add().Header("#headerCategories").Pane("#paneCategories");
})