We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Loading content in sfTabView

Thread ID:

Created:

Updated:

Platform:

Replies:

147281 Sep 5,2019 06:43 AM UTC Oct 6,2020 11:50 AM UTC Xamarin.Forms 9
loading
Tags: SfTabView
Benjamin
Asked On September 5, 2019 06:43 AM UTC

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.


Muneesh Kumar G [Syncfusion]
Replied On 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 
 


Saeed
Replied On 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

Ramya Soundar Rajan [Syncfusion]
Replied On 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 


Saeed
Replied On April 24, 2020 10:24 AM UTC

Thanks, will wait for your response

Sakthivel Palaniyappan [Syncfusion]
Replied On 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.
 
  


Saeed
Replied On 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.

Jeya Kasipandi [Syncfusion]
Replied On 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 


Sakthivel Palaniyappan [Syncfusion]
Replied On 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.
 


Sakthivel Palaniyappan [Syncfusion]
Replied On 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.   
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon