TabPanel
TabPanel
Detached Panels
This view shows how to hide built-in content element in TabPanel control.
Features
Description
The TabPanel has a built-in panel that shows the content of the selected tab. In some cases, you may want to display the content in a different element. To do that, simply hide the built-in content element and use the SelectedIndexChanged event to update the content.
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: DetachedPanels public ActionResult DetachedPanels(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 | <script> c1.documentReady(function () { var tabDetached = wijmo.Control.getControl('#tabDetached'); // hide the built-in content area tabDetached.hostElement.querySelector('.wj-tabpanes').style.display = 'none'; tabDetached_selectedIndexChanged(tabDetached); }); function tabDetached_selectedIndexChanged(s, e) { var div = document.getElementById('detachedContent'); div.innerHTML = 'Content for tab <b>' + s.selectedTab.header.textContent + '</b>...'; } </script> <c1-tab-panel id="tabDetached" selected-index-changed="tabDetached_selectedIndexChanged"> <!-- tab without any content --> <div> <a>Africa</a> <div></div> </div> <div> <a>America</a> <div></div> </div> <div> <a>Asia</a> <div></div> </div> <div> <a>Europe</a> <div></div> </div> <div> <a>Oceania</a> <div></div> </div> </c1-tab-panel> <p></p> <div class="panel panel-success"> <!-- separate div to show the content --> <div class="panel-heading"> <h3 id="detachedContent" class="panel-title"></h3> </div> </div> @section Summary{ <p>@Html.Raw(TabPanelRes.DetachedPanels_Text0)</p> } @section Description{ <p>@Html.Raw(TabPanelRes.DetachedPanels_Text1)</p> } |