TabPanel
TabPanel
Disabled and Invisible Tabs
This view shows how to disable or hide individual tabs in TabPanel control.
Features
Settings
DisableEurope: True
ShowOceania: True
Description
You can disable or hide individual tabs using the Tab's IsDisabled and IsVisible properties.
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 | 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; } } } |
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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | @{ 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> } |