Declined
Last Updated: 25 May 2022 14:54 by ADMIN
Brandon
Created on: 28 Apr 2022 02:28
Category: TabView
Type: Bug Report
2
telerik:TabViewItem IsVisible = "False" is not work and Header tab bar cannot be viewed in Android Emulator

 

4 comments
ADMIN
Didi
Posted on: 25 May 2022 14:54

Hello,

I have changed the status of the item to "Declined". This is not an issue in the TabView control.

Here is more information about the tabs: Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. All tabs are in one panel - the header panel. When one header item is not visible - it is not visible inside the panel. When there are not visible items at all, the panel is also not visible. This is by design and the way how the TabView works.

Regards,
Didi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

ADMIN
Lance | Senior Manager Technical Support
Posted on: 29 Apr 2022 13:37

Hi Brandon,

My apologies for making it more complicated that it have needed to be.  Let me be more direct with a few statements directly addressing your numbered items.

  1. This is by design, but still contains a bug that we are investigating
  2. I cannot replicate this.

Now, please let me go into more detail to explain and offer a way you can solve both problems

#1) The TabViewItem's IsVisible property will technically only show/hide the tab header... it has no effect on the TabView's content area unless that TabViewItem is currently selected.

This is by design, because there are no "offscreen" tab contents (explained below)... however, there is still a bug. The bug is that the content area is not being hidden when that TabViewItem is currently selected (or it is the only TabViewItem).

If you want to hide everything, use IsVisible on the RadTabView itself (instead of the the TabViewItem):

<telerik:RadTabView IsVisible="False" .../>

More Detail: What I was trying to explain, in my overly complicated answer, is that the tab header and the content area are not connected together as a single continuous UI element that can be hidden as a whole. Although they are visually designed to appear connected, there is only ever 1 primary tab content area and area is shared by all the tab headers. When the user tabs on a tab header, we programmatically swap out the content area's content to that tab item's content (i.e. there are no "offscreen" tab content areas).

#2) This is not what I observed during my test. 

Please run try my example and click the button multiple times (which sets IsVisible = !IsVisible), it will show and hide that TabViewItem's header accordingly.

Important: If you have the TabView inside a parent that "squeezes", like a VerticalStackLayout or Auto-sized Grid RowDefiniton, then that space may not be given back to the TabView. This is a long-known problem in Xamarin.Forms that is still present in MAUI, you can see a solution here Controls Are Not Appearing.

Further Investigation

If you can update my demo so that it replicates the header problem (without being inside a StackLayout or Auto-sized Grid row), please do that and send the project back to me. I will include it with the backlog item for the dev team.

Alternate Production-Ready Solution

Now that you've explained what you're trying to do, I have another idea for you to try. Instead of trying to manually handle IsVisible for that TabViewItem, you can just remove and add it to the TabView as needed using Items.Add() (and Items.Remove()).

To explain:

1) Move the CT TabViewItem's definition to local Resources, instead of inside the TabView.

2) Now you can add it, if needed.

Regards,
Lance | Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Brandon
Posted on: 29 Apr 2022 07:22

Hi Lance,

Thank you for your reply. You may misunderstood my message.  Actually, there are 2 problems. Let me elaborate.

1. Cannot set whole tab item as invisible when open the whole TabView.

I want to use the same tab view for different scenario and the CT is not the first tab item. I do not want to show it when I open this page for some cases. But the IsVisible field is no effect when I set it to false during open this page.

2. The tab Header is always invisible and it is not related to the IsVisible Field. I am not using the IsVisible field to control the header, I am using IsVisible to control the whole tab item. Even when I removed the IsVisible setting. The header is still hidden.

 

Regards,

Brandon

 

ADMIN
Lance | Senior Manager Technical Support
Posted on: 28 Apr 2022 17:53

Hello Brandon,

Thank you for reporting this behavior, and sharing a screenshot. Before I go into my findings, I should back up and explain how the TabView works.

This is because the RadTabView is a UI virtualized control that reuses the main content area. You can conceptualize the TabView as having 1 main content area and many tab headers, each of those tab headers invoke content updates of that main area.

Here's a visual representation:

When you select a tab header, the main content area gets replaced with the selected TabViewItem.Content. The main content area is supposed to always be visible with the currently selected tab's contents.

Problem - Situation

I have a few comments to explain the situation.

  • The tab header is supposed to be hidden when IsVisible = false (intended behavior).
  • If there are no headers left, the header panel collapses (intended behavior).

The problem you're experiencing is because you've set IsVisible to the currently selected TabViewItem. Also, since there is only 1 TabViewItem, that it is going to be the selected item by default. This has a couple issues associated with it:

  • The TabView does not automatically change the SelectedItem to the next available TabViewItem
  • If that TabViewItem is the last item, there is no tab to switch to so the content will remain.

I will add this issue to the backlog. Since we're still in preview and are actively working multiple items, I cannot make any sort of promise as to when this can get handled.

So, I have an idea that you can use as a workaround for this.

Problem - Combine Two Workarounds

Add a blank "placeholder" TabViewItem, this will allow you to keep the tab header's panel always visible AND will allow you to switch to blank content when you hide the last TabViewItem.

I have attached a demo project that shows these in action. Run it and click the button. You will see the following at runtime:

Here's the relevant code:

<telerik:RadBorder BorderColor="LightBlue"
                   BorderThickness="1"
                   CornerRadius="15">
    <Grid RowDefinitions="*,Auto">
        <telerik:RadTabView x:Name="tabView">
            <telerik:TabViewItem HeaderText="CT">
                <Label Text="This is the content of the CT tab" />
            </telerik:TabViewItem>

            <!-- This is a placeholder item that will allow the TabView to be empty -->
            <telerik:TabViewItem HeaderText=""/>
        </telerik:RadTabView>

        <Button Text="Toggle Tab1 Visibility"
                Grid.Row="1"
                Clicked="Button_OnClicked" />
    </Grid>
</telerik:RadBorder>

private void Button_OnClicked(object sender, EventArgs e)
{
    // To demonstrate the approach, change the IsVisible value for the first TabViewItem
    tabView.Items[0].IsVisible = !tabView.Items[0].IsVisible;

    // Important: Only if we are still on Tab 1, we need to change to the next tab
    if (tabView.SelectedItem == tabView.Items[0])
    {
        tabView.SelectedItem = tabView.Items[1];
    }
}

Feature Request - Header Panel Visibility

I have opened a separate Feature Request on your behalf to ask the developers to consider adding a property or feature that allows you to prevent hiding the header items panel if there are no remaining header items. See > Keep TabHeader panel visible when no headers are remaining.

Regards,
Lance | Manager Technical Support
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Attached Files: