TabPanel
TabPanel
Creating Programmatically
This view shows how to programmatically add tabs to TabPanel control.
Features
Description
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.
In this example, we add several Tab objects to the tabs collection. Each Tab object is defined by a header and a pane elements.
You can also use the tabs property to remove, modify, or reorder the tabs within the TabPanel.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; using System.Linq; using System.Collections.Generic; using Microsoft.AspNetCore.Http; namespace MvcExplorer.Controllers { public partial class TabPanelController : Controller { // GET: CreatingProgrammatically public ActionResult CreatingProgrammatically(IFormCollection collection) { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <div> <div> <a id="headerEmployees">EMPLOYEES</a> <div id="paneEmployees"> <c1-flex-grid is-read-only="true" sorting-type="None"> <c1-odata-source service-url="https://services.odata.org/Northwind/Northwind.svc/" table-name="Employees" fields="EmployeeID,LastName,FirstName,Title,TitleOfCourtesy"></c1-odata-source> </c1-flex-grid> </div> </div> <div> <a id="headerCategories">CATEGORIES</a> <div id="paneCategories"> <c1-flex-grid is-read-only="true" sorting-type="None"> <c1-odata-source service-url="https://services.odata.org/Northwind/Northwind.svc/" table-name="Categories" fields="CategoryID,CategoryName,Description"></c1-odata-source> </c1-flex-grid> </div> </div> </div> <c1-tab-panel id="tabInCode"> <c1-tab header="#headerEmployees" pane="#paneEmployees"></c1-tab> <c1-tab header="#headerCategories" pane="#paneCategories"></c1-tab> </c1-tab-panel> <script> c1.documentReady(function () { var tabInCode = wijmo.Control.getControl('#tabInCode'), 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)); }); }); }); </script> @section Summary{ <p>@Html.Raw(TabPanelRes.CreatingProgrammatically_Text0)</p> } @section Description{ <p>@Html.Raw(TabPanelRes.CreatingProgrammatically_Text1)</p> <p>@Html.Raw(TabPanelRes.CreatingProgrammatically_Text2)</p> <p>@Html.Raw(TabPanelRes.CreatingProgrammatically_Text3)</p> <p>@Html.Raw(TabPanelRes.CreatingProgrammatically_Text4)</p> } |