TabPanel
TabPanel
Disabled and Invisible Tabs
This view shows how to disable or hide individual tabs in TabPanel control.
Features
Sample
Settings
Description
You can disable or hide individual tabs using the Tab's IsDisabled and IsVisible properties.
Source
DisabledInvisibleTabsController.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: DisabledInvisibleTabs public ActionResult DisabledInvisibleTabs(IFormCollection collection) { var settings = new ClientSettingsModel("tabDisableHide") { Settings = CreateDisabledInvisibleSettings(), DefaultValues = GetDisabledInvisibleDefaultValues() }; ViewBag.DemoSettingsModel = settings; return View(); } private static IDictionary<string, object[]> CreateDisabledInvisibleSettings() { var settings = new Dictionary<string, object[]> { {"DisableEurope", new object[]{false, true}}, {"ShowOceania", new object[]{false, true}}, }; return settings; } private static IDictionary<string, object> GetDisabledInvisibleDefaultValues() { var defaultValues = new Dictionary<string, object> { {"DisableEurope",true}, {"ShowOceania",true}, }; return defaultValues; } } }
DisabledInvisibleTabs.cshtml
@{ ClientSettingsModel demoSettingModel = ViewBag.DemoSettingsModel; ViewBag.DemoSettings = true; } <script> function customChangeDisableEurope(control, value) { control.getTab('tab-europe').isDisabled = value; } function customChangeShowOceania(control, value) { control.getTab('tab-oceania').isVisible = value; } </script> <c1-tab-panel id="@demoSettingModel.ControlId"> <div> <a>Africa</a> <div> <ul> <li>Algeria</li> <li>Angola</li> <li>Benin</li> <li>Botswana</li> </ul> </div> </div> <div> <a>America</a> <div> <ul> <li>Canada</li> <li>Chile</li> <li>Mexico</li> <li>United States</li> </ul> </div> </div> <div> <a>Asia</a> <div> <ul> <li>China</li> <li>Korea</li> <li>India</li> <li>Japan</li> </ul> </div> </div> <div> <a id="tab-europe" class="wj-state-disabled">Europe</a> <div> <ul> <li>Austria</li> <li>England</li> <li>France</li> <li>Germany</li> <li>Netherlands</li> <li>Switzerland</li> </ul> </div> </div> <div> <a id="tab-oceania">Oceania</a> <div> <ul> <li>Australia</li> <li>Fiji</li> <li>New Zealand</li> <li>Samoa</li> </ul> </div> </div> </c1-tab-panel> @section Summary{ <p>@Html.Raw(TabPanelRes.DisabledInvisibleTabs_Text0)</p> } @section Description{ <p>@Html.Raw(TabPanelRes.DisabledInvisibleTabs_Text1)</p> }
Documentation