Loading content in sfTabView

[Benjamin]

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]

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.  

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewScroll-911764712.zip  

 

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]

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.  

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewScroll-911764712.zip  

 

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]

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]

Thanks, will wait for your response

[Sakthivel Palaniyappan]

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]

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]

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 

 

https://www.syncfusion.com/feedback/4707/provide-lazy-loading-of-tab-page-for-sftabview-greatly-improve-loading-performance

 

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]

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]

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.     

[Lorenz Becislao]

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

[Sakthivel Palaniyappan]

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.