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 OnClientSelectedIndexChanged event to update the content.
Source
DetachedPanelsController.cs
using MvcExplorer.Models; using System.Web.Mvc; using System.Collections.Generic; namespace MvcExplorer.Controllers { public partial class TabPanelController : Controller { // GET: DetachedPanels public ActionResult DetachedPanels(FormCollection 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> <div id="tabDetached"> <!-- 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> </div> @Html.C1().TabPanel("#tabDetached").OnClientSelectedIndexChanged("tabDetached_selectedIndexChanged") <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(Resources.TabPanel.DetachedPanels_Text0)</p> } @section Description{ <p>@Html.Raw(Resources.TabPanel.DetachedPanels_Text1)</p> }
Documentation