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