1. Home
  2. Forum
  3. Xamarin.Forms
  4. Loading content in sfTabView

Loading content in sfTabView

Hi,

I 6 tabs of content all pulling data from a remote web service.

Content of the tabs include doughnut chart, bar chart, line series, data grid

I am wondering if there is a way to load data only when the user click on the tab but when the user returns to the previous tab the data should not be reloaded

what i mean is when the user is in the tab with Doughnut Chart, we will load data and render the chart, then the user now clicks on the tab for line series, we will then load data for line series. After this when the user enters the Doughnut Chart, the previous data should stay and should not reload and re-render the doughnut chart.

While loading/ retrieving data, a loading icon should be shown

Why i am asking this is caused, due to a large amount of data, my iPhone Simulator on Visual Studio 2019 is hanged. i wished to solve this performance issue.


11 Replies
MK Muneesh Kumar G Syncfusion Team September 6, 2019 06:18 AM UTC

Hi Benjamin, 
 
Greetings from Syncfusion, 
 
We have analyzed your query and we have created sample based on this. Please find the sample link from below location.  
 
 
In this sample we have done the following things. 
 
1. Created TabItems without adding TabItem content and set TabItem content with the SelectedIndex as like below code snippet. 
 
  <tabView:SfTabView x:Name="tabView"  
         SelectionChanged="TabView_SelectionChanged"  
            VisibleHeaderCount="6"> 
             
            <tabView:SfTabItem Title="Bar"/> 
 
            <tabView:SfTabItem Title="Line"/> 
 
            <tabView:SfTabItem Title="PieChart"/> 
 
            <tabView:SfTabItem Title="Doughnut"/> 
 
            <tabView:SfTabItem Title="Column"/> 
 
            <tabView:SfTabItem Title="Bar"/> 
 
        </tabView:SfTabView> 
 
public MainPage() 
{ 
            InitializeComponent(); 
 
            if (tabView.Items[tabView.SelectedIndex].Content==null) 
            { 
                tabView.Items[tabView.SelectedIndex].Content = GetItemContent(tabView.SelectedIndex); 
            } 
} 
 
2. When Tab on the next Item, get the item using SelectionChangedEvent and set the Content if the content is empty as like below code snippet. 
 
private void TabView_SelectionChanged(object sender, Syncfusion.XForms.TabView.SelectionChangedEventArgs e) 
        { 
            if (tabView.Items[e.Index].Content == null) 
            { 
                tabView.Items[e.Index].Content = GetItemContent(e.Index); 
            } 
        } 
 
  private View GetItemContent(int index) 
        { 
            switch (index) 
            { 
                case 0: 
                    return new BarChartPage().Content; 
                case 1: 
                    return new LineSeriesPage().Content; 
                case 2: 
                    return new PieChartPage().Content; 
                case 3: 
                    return new DoughnutChart().Content; 
                case 4: 
                    return new ColumnChart().Content; 
                case 5: 
                    return new LineSeriesPage().Content; 
                default: 
                    return new BarChartPage().Content; 
            } 
        } 
 
Please let us know if you have any concern.   
  
Thanks, 
Muneesh Kumar G 
 


SA Saeed replied to Muneesh Kumar G April 22, 2020 09:20 AM UTC

Hi Benjamin, 
 
Greetings from Syncfusion, 
 
We have analyzed your query and we have created sample based on this. Please find the sample link from below location.  
 
 
In this sample we have done the following things. 
 
1. Created TabItems without adding TabItem content and set TabItem content with the SelectedIndex as like below code snippet. 
 
  <tabView:SfTabView x:Name="tabView"  
         SelectionChanged="TabView_SelectionChanged"  
            VisibleHeaderCount="6"> 
             
            <tabView:SfTabItem Title="Bar"/> 
 
            <tabView:SfTabItem Title="Line"/> 
 
            <tabView:SfTabItem Title="PieChart"/> 
 
            <tabView:SfTabItem Title="Doughnut"/> 
 
            <tabView:SfTabItem Title="Column"/> 
 
            <tabView:SfTabItem Title="Bar"/> 
 
        </tabView:SfTabView> 
 
public MainPage() 
{ 
            InitializeComponent(); 
 
            if (tabView.Items[tabView.SelectedIndex].Content==null) 
            { 
                tabView.Items[tabView.SelectedIndex].Content = GetItemContent(tabView.SelectedIndex); 
            } 
} 
 
2. When Tab on the next Item, get the item using SelectionChangedEvent and set the Content if the content is empty as like below code snippet. 
 
private void TabView_SelectionChanged(object sender, Syncfusion.XForms.TabView.SelectionChangedEventArgs e) 
        { 
            if (tabView.Items[e.Index].Content == null) 
            { 
                tabView.Items[e.Index].Content = GetItemContent(e.Index); 
            } 
        } 
 
  private View GetItemContent(int index) 
        { 
            switch (index) 
            { 
                case 0: 
                    return new BarChartPage().Content; 
                case 1: 
                    return new LineSeriesPage().Content; 
                case 2: 
                    return new PieChartPage().Content; 
                case 3: 
                    return new DoughnutChart().Content; 
                case 4: 
                    return new ColumnChart().Content; 
                case 5: 
                    return new LineSeriesPage().Content; 
                default: 
                    return new BarChartPage().Content; 
            } 
        } 
 
Please let us know if you have any concern.   
  
Thanks, 
Muneesh Kumar G 
 


Hi ,
I used the same logic that mention above but for my scenario  when i scroll to second or third tab it takes 3 to 4 seconds to load the full content of this page also set the background color for main page is green by scrolling it turn to white before loading the the content. please find the attach file below

Attachment: TabViewScroll_ef84ef06.zip

RS Ramya Soundar Rajan Syncfusion Team April 23, 2020 02:30 PM UTC

Hi Saeed, 
 
We can able to reproduce the reported issue in Android platform only and we will update the complete status on or before April 27, 2020. 
 
Regards, 
Ramya S 


SA Saeed April 24, 2020 10:24 AM UTC

Thanks, will wait for your response

SP Sakthivel Palaniyappan Syncfusion Team April 27, 2020 09:19 AM UTC

Hi Saeed,

While loading the SfTabItem content using SelectionChanged event, it takes some time to load the complex UI. So we suggest that you can load the SfTabItem Content using TabItemTapped event. 
 
Code Snippet:

 
private void tabView_TabItemTapped(object sender, TabItemTappedEventArgs e) 
        { 
            var tabIndex = tabView.Items.IndexOf(e.TabItem); 
            if (tabView.Items[tabIndex].Content == null) 
            { 
                tabView.Items[tabIndex].Content = GetItemContent(tabIndex); 
            } 
        } 
 

We have modified the provided sample  based on this, please find the sample from below link.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabView_ItemTapped-1517245074

Please let us know, if you have any other concern.

Regards,
Sakthivel P. 
  


SA Saeed April 27, 2020 10:53 AM UTC

Hi Sakthivel Palaniyappan,
thanks for your response, I don,t want to show header section DisplayMode="NoHeader". So TabItemTapped event did not work in my case. I just want to load content by scrolling.

JK Jeya Kasipandi Syncfusion Team April 28, 2020 08:43 AM UTC

Hi Saeed, 
 
Currently, we don't have any other possibilities to achieve your requirement other than TabItemTapped and Selection Changed event in SfTabview. We have already logged feedback for this, and you can track the status from below link 
 
If you have any more specifications/suggestions on this, you can add it as a comment in the portal.   
  
This feature will be available in our upcoming Volume 2 main release which is expected to be rolled out on end of June 2020. 

 Regards, 
 Jeya K 


SP Sakthivel Palaniyappan Syncfusion Team July 9, 2020 10:45 AM UTC

Hi Saeed,

Sorry for the inconvenience.

We have not included the feature in our Volume 2 , 2020 main release. We are currently working on this, and due to more architectural changes and to cover more working scenarios it is taking more time than expected. We will include the improvement in our upcoming Volume 3, 2020 main release. Which will be expected to be rolled out on end of September 2020. We are deeply sorry for this delay.

Regards,
Sakthivel P. 


SP Sakthivel Palaniyappan Syncfusion Team October 6, 2020 11:50 AM UTC

Hi Saeed,

We are glad to announce that our Essential Studio 2020 Volume 3 release v18.3.0.35 is rolled out and we have included the support in Android platform and is available for download under the following link.

https://www.syncfusion.com/forums/158306/essential-studio-2020-volume-3-release-v18-3-0-35-is-available-for-download

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,
Sakthivel P.     


LB Lorenz Becislao October 31, 2020 06:06 AM UTC

Hi, I've been waiting for lazyloading to be implemented in sftabview but I cant find any demo on how to use the new "IsSelected" API of tabview

SP Sakthivel Palaniyappan Syncfusion Team November 2, 2020 09:43 AM UTC

Hi Lorenz,

Greetings from Syncfusion.

Query1: I've been waiting for lazyloading to be implemented in sftabview

We have implemented and included the support in Android platform version (18.3.0.35).

Release notes:
https://help.syncfusion.com/xamarin/release-notes/v18.3.0.35?type=all#sftabview

Query 2: I can’t find any demo on how to use the new "IsSelected" API

We can get the IsSelected property from SfTabItem as like below code snippet.

XAML:

 
<tabView:SfTabView  EnableVirtualization="True" 
                         x:Name="tabView"  TabItemTapped="tabView_TabItemTapped" 
                         DisplayMode="Text"  
                         SelectedIndex="1" 
                         BackgroundColor="White"  
                         SelectionChanged="tabView_SelectionChanged" 
                         HorizontalOptions="FillAndExpand" 
                         VerticalOptions="FillAndExpand"> 
        <tabView:SfTabItem Title="Mail" x:Name="tabitem1"> 
            <tabView:SfTabItem.Content> 
                <StackLayout x:Name="AllContactsGrid" BackgroundColor="AliceBlue" > 
                </StackLayout> 
            </tabView:SfTabItem.Content> 
        </tabView:SfTabItem> 
        … 
        <tabView:SfTabItem Title="Contacts" x:Name="tabitem4"> 
            <tabView:SfTabItem.Content> 
                <StackLayout BackgroundColor="LightBlue" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"> 
                    <Label Text="Page 4" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/> 
                </StackLayout> 
            </tabView:SfTabItem.Content> 
        </tabView:SfTabItem> 
    </tabView:SfTabView> 

C#:

 
   void tabView_TabItemTapped(System.Object sender, Syncfusion.XForms.TabView.TabItemTappedEventArgs e) 
        {​​​​​​​ 
            bool isItemSelected = e.TabItem.IsSelected; 
        }​​​​​ 

We have created sample based on this and please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfTabViewSample-1639852073.zip

Please let us know if you have any other queries.

Regards,
Sakthivel P.



Loader.
Up arrow icon