TabPanel
TabPanel
Detached Panels
This view shows how to hide built-in content element in TabPanel control.
Features
Sample
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.
Source
DetachedPanelsController.cs
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(); } } }
DetachedPanels.cshtml
<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> }
Documentation