Hide tabs in tab panes

Radzen Studio Blazor Server
1

I am a long time Java developer and my company is looking to make a change to .net core. I am new to Blazor and am currently researching blazor components. Radzen looks great and has been easy to pick up. I have a use case where I need to hide tabs in a tab pane based on a checkbox in another tab. Is it possible to hide tabs? Or at a minimum disable a tab?

Michael

2

Hi Michael,

Not possible at the moment however we will add Visible and Disabled properties for the tab items.

3

Great! Thank you very much.

4

I see the Visible property in the tab now so I thought I would try it out. I'm getting some strange behavior but I don't know if it's my inexperience or maybe the visible property isn't finished in which case I apologize for jumping ahead. My code is below. The first time I check the box, it doesn't hide the tab like I was expecting. The text is updating on the first click. Toggles to the checkbox after that work as expected hiding the tab at the appropriate time.
So I tried to just use a button to toggle the tab. I get the same response. The tab will not hide on the first click even thought the button text changes correctly. Clicks after that work as expected.

Also if I throw another checkbox on to hide a different tab. It gets confused on which tab to actually hide or show.

Thank you for your assistance.

@page "/tabPane"

<h3>Tabs</h3>


<RadzenTabs >
	<Tabs>
		<RadzenTabsItem Text="Orders">
			Orders Tab
			<br /><br />
			<RadzenCheckBox Name="HideTabCheck" Change="@(args => toggleTab(args))" />
			<RadzenLabel Text="Hide Employee Tab" Component="HideTabCheck" /> @employeeText
			<br /><br />
			<RadzenButton Click="@Click" Text="@buttonText" />
		</RadzenTabsItem>

		<RadzenTabsItem Text="Employee" Visible="@showEmployeeTab" >
			Employee Tab
		</RadzenTabsItem>

		<RadzenTabsItem Text="Customers" >
			Customers Tab
		</RadzenTabsItem>
	</Tabs>
</RadzenTabs>


@code {
	private bool showEmployeeTab = true;

	private string employeeText = " ";
	private string buttonText = "Hide Employee Tab";

	void toggleTab(bool? value) {
		if (value != null) {
			if (value.Value) {
				showEmployeeTab = true;
				employeeText = " (Hidden)";
			} else {
				showEmployeeTab = false;
				employeeText = " (Visible)";
			}
		}
		StateHasChanged();
	}

	void Click() {
		if (buttonText.StartsWith("Show")) {
			showEmployeeTab = false;
			buttonText = "Hide Employee Tab";
		} else {
			showEmployeeTab = true;
			buttonText = "Show Employee Tab";
		}
		StateHasChanged();
	}


}
5

Reproduced and fixed immediately! The NuGet will be published later today.

6

Radzen.Blazor 0.0.70 just released with fix for this problem included!

7

I have to say I'm very impressed. Very quick turn around and it works great now. Thank you!

1 Like
8

@enchev are you still planning to have the disabled option for the RadzenTabsItems?

9

Yes, it will be available with the next update!