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
3 Answers, 1 is accepted
0
Accepted
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:
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
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
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
john
Top achievements
Rank 1
answered on 02 Feb 2018, 08:30 AM
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
0
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
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
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items