Add/Remove tabs Programatically

[john]

Hi,

 

I'm trying to implement a scenario where I can add remove tabs dynamically. 

The tabs items would be defined in the XAML, however, depending on the results of a rest call they would be removed.

I know I can remove them via the Items object in the tab view but could a re-add the removed item again without having to provide a new definition?

I was thinking of a possible backup list and to use that, however, I'm not a huge fan of that implementation.

 

Thanks,

 

John

[Lance | Senior Manager Technical Support]

Hi John,

The TabView's Items property is an ObservableCollection<TabViewItem>. As with any ObservableCollection, if you remove an item, and don't keep a reference to it, that item is gone.

If you want to keep track of what's been removed then I suggestion you have a second collection to act as a cache to hold the removed item. Then when you want to re-add, it a simple check the cache list.


Demo

See my attached demo, with just a few lines of code you can have a cache to manage removed items

For example:

public partial class StartPage : ContentPage
{
    private ObservableCollection<TabViewItem> RemovedTabs { get; set; } = new ObservableCollection<TabViewItem>();

    public StartPage()
    {
        InitializeComponent();
    }

    private void Remove_OnClicked(object sender, EventArgs e)
    {
        // Find the tab you want to remove
        var folderTab = tabView.Items.FirstOrDefault(t => t.HeaderText == "Folder");

        // place it in the cache
        if(!RemovedTabs.Contains(folderTab)) RemovedTabs.Add(folderTab);

        // remove it from the TabView
        if(tabView.Items.Contains(folderTab)) tabView.Items.Remove(folderTab);
    }

    private void Add_OnClicked(object sender, EventArgs e)
    {
        // Check the cache
        var folderTab = RemovedTabs.FirstOrDefault(t => t.HeaderText == "Folder");

        if (folderTab != null)
        {
            // If the tab was in the cache, go ahead and add it..

            tabView.Items.Insert(1, folderTab); // Use Insert() to re-add at a specific index
            // tabView.Items.Add(folderTab); Use Add to add at the end of the collection


            // Finally, remove it from the cache
            if(RemovedTabs.Contains(folderTab)) RemovedTabs.Remove(folderTab);
        }
        else
        {
            // If the tab doesn't exist in the cache, create a new one
            tabView.Items.Add(new TabViewItem {HeaderText = "Folder"});
        }
    }
}

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <telerikPrimitives:RadTabView x:Name="tabView">
        <telerikPrimitives:RadTabView.Items>
            <telerikPrimitives:TabViewItem HeaderText="Home">
                <telerikPrimitives:TabViewItem.Content>
                    <Label Margin="10" Text="This is the content of the Home tab" />
                </telerikPrimitives:TabViewItem.Content>
            </telerikPrimitives:TabViewItem>
            <telerikPrimitives:TabViewItem HeaderText="Folder">
                <telerikPrimitives:TabViewItem.Content>
                    <Label Margin="10" Text="This is the content of the Folder tab" />
                </telerikPrimitives:TabViewItem.Content>
            </telerikPrimitives:TabViewItem>
            <telerikPrimitives:TabViewItem HeaderText="View">
                <telerikPrimitives:TabViewItem.Content>
                    <Label Margin="10" Text="This is the content of the View tab" />
                </telerikPrimitives:TabViewItem.Content>
            </telerikPrimitives:TabViewItem>
        </telerikPrimitives:RadTabView.Items>
    </telerikPrimitives:RadTabView>

    <StackLayout Orientation="Horizontal"
                 Grid.Row="1">
        <Button Text="1 - Remove 'Folder' Tab" Clicked="Remove_OnClicked"/>
        <Button Text="2 - Add 'Folder' Tab back" Clicked="Add_OnClicked"/>
    </StackLayout>
</Grid>

Here's the result at runtime:




Then I clicked the step 1 button:




Lastly, click the Step 2 button:



Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[john]

Hi Lance,

 

For the time being that solution will do, however, what might be looked at is an IsVisible property on the ?

Seems like it would be a useful feature for the tabView

What do you think?

 

John

[Lance | Senior Manager Technical Support]

Hello John,

That is excellent feedback, thank you.

For your convenience, I have added a feature request here in the Feedback Portal (you can up vote and follow the item there).

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik