Activity on element tap

[Brian]

when a user taps on a node in the treeview I want it to show some type of animation to show there is work being performed in the background.  This is not a node expansion just work being performed before jumping to the next page to show the file.  

brian

[Lakshmi Natarajan]

Hi Brian, 

 

Could you please share your requirement along with a video demonstrating it so that we can better understand it on our end which will be helpful for us to provide you the appropriate solution at the earliest? 

 

Regards, 

Lakshmi Natarajan 

  

 

[Brian]

Here is my xaml code: 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
             xmlns:local="clr-namespace:asbuiltgui_mobile.helpers"
             xmlns:local1="clr-namespace:asbuiltgui_mobile.ViewModels" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:busyIndicator="clr-namespace:Syncfusion.SfBusyIndicator.XForms;assembly=Syncfusion.SfBusyIndicator.XForms"
             x:Class="asbuiltgui_mobile.Views.ItemsPage"
             Title="{Binding Title}"
             x:Name="BrowseItemsPage">
    <ContentPage.BindingContext>
        <local1:FileManagerViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <ScrollView  d:HorizontalScrollBarVisibility="Always" HorizontalScrollBarVisibility="Always">
            <StackLayout>
                <!-- ItemHeight="40" -->
                <syncfusion:SfTreeView x:Name="treeView"
                             Indentation="15"
                             ExpanderWidth="40"
                             SelectionMode="Single"
                             ChildPropertyName="SubFiles"
                             ItemsSource="{Binding ImageNodeInfo}"
                             AutoExpandMode="None"
                             WidthRequest="1000"
                             LoadOnDemandCommand="{Binding AsBuiltOnDemandCommand}"
                             ItemTapped="treeView_ItemTapped"
                             >
                    <!-- <syncfusion:SfTreeView.Behaviors>
                        <local:SfTreeviewBehaviors viewModels="{x:Reference viewModel}">
                        </local:SfTreeviewBehaviors>
                    </syncfusion:SfTreeView.Behaviors> -->
                    <syncfusion:SfTreeView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <ViewCell.View>
                                    <Grid x:Name="grid" RowSpacing="0" BackgroundColor="Transparent">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="1" />
                                        </Grid.RowDefinitions>
                                        <Grid RowSpacing="0" Grid.Row="0">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="40" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Grid Padding="5,5,5,5">
                                                <Image
                                               Source="{Binding ImageIcon}"
                                               VerticalOptions="Center"
                                               HorizontalOptions="Center"
                                               HeightRequest="35"
                                               WidthRequest="35"/>
                                            </Grid>
                                            <Grid Grid.Column="1"
                                              RowSpacing="1"
                                              Padding="1,0,0,0"
                                              VerticalOptions="Center">
                                                <Label LineBreakMode="NoWrap"
                                                   Text="{Binding ItemName}"
                                                   VerticalTextAlignment="Center">
                                                </Label>
                                            </Grid>
                                        </Grid>
                                        <StackLayout Grid.Row="1" HeightRequest="1"/>
                                    </Grid>
                                </ViewCell.View>
                            </ViewCell>
                        </DataTemplate>
                    </syncfusion:SfTreeView.ItemTemplate>
                </syncfusion:SfTreeView>
                <busyIndicator:SfBusyIndicator x:Name="busyIndicator"
                                       AnimationType="ECG"
                                       IsBusy="{Binding IsLoading, Mode=TwoWay}"
                                       BindingContext="{x:Reference Name=BrowseItemsPage}"
                                       Title="Loading Data...."
                                       TextColor="Magenta"
                                       ViewBoxWidth="150"
                                       ViewBoxHeight="150"/>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

Code Behind...

using asbuiltgui_mobile.Utils;
using asbuiltgui_mobile.ViewModels;
using Syncfusion.XForms.PopupLayout;
using Syncfusion.XForms.TreeView;
using Xamarin.Forms;
using Syncfusion.SfBusyIndicator;
using Syncfusion.SfBusyIndicator.XForms;
using System.Collections.Generic;
using System.IO;
using Microsoft.AppCenter.Analytics;
using System.Threading.Tasks;


namespace asbuiltgui_mobile.Views
{
    public partial class ItemsPage : ContentPage
    {


        private bool _isLoading = false;
        public bool IsLoading
        {
            get
            {
                return _isLoading;
            }
            set
            {
                _isLoading = value;
                OnPropertyChanged("IsLoading");
            }
        }


        public ItemsPage()
        {
            InitializeComponent();




        }


        private void treeView_NodeExpanding(object sender, NodeExpandingCollapsingEventArgs e)
        {


        }


        private async void treeView_ItemTapped(object sender, Syncfusion.XForms.TreeView.ItemTappedEventArgs e)
        {


            IsLoading = true;


            string nodepath = viewModel.GetNodePath(e.Node);


                  string[] nc = nodepath.Split('/');
                  if (nc.Length < 5)
                  {
                      IsLoading = false;
                      return;
                  }
                  if (!nc[nc.Length - 1].Contains("."))
                  {
                      IsLoading = false;
                      return;
                  }


                  Analytics.TrackEvent("Opened Document", new Dictionary<string, string> {
                                            { "Category", "File View" },
                                            { "Path", nodepath}
                  });




                //await App.Current.MainPage.DisplayAlert("Path ", nodepath, "Ok");
                App.stream = UtilityCalls.streamPDF(nodepath);
                  App.stream.Position = 0;




                      IsLoading = false;
                    //await Navigation.PushAsync(new pdfview());
                    await Shell.Current.GoToAsync(nameof(pdfview));




        }
    }
}

The view code populates the treeview and works just fine.  I am trying to figure out how I can activate the busy indicator from C# code behind tapped event when it begins to load the file streams from the REST API.  I have also observed that when running in an iphone simulator the busy indicator will load when expanding treeview nodes.  However when I expand and its running on an actual iphone it does not display.  

[Lakshmi Natarajan]

Hi Brian, 

 

We have prepared a sample based on the provided details. We suggest you load the SfTreeView and SfBusyIndicator in the same row of the Grid to show the BusyIndicator.  

 

Please find the code snippets for the same, 

<ScrollView HorizontalScrollBarVisibility="Always"> 

    <Grid> 

        <!-- ItemHeight="40" --> 

        <syncfusion:SfTreeView x:Name="treeView" 

                    Indentation="15" 

                    ExpanderWidth="40" 

                    SelectionMode="Single" 

                    ItemsSource="{Binding Menu}" 

                    AutoExpandMode="None" 

                    ExpandActionTarget="Node" 

                    WidthRequest="1000" 

                    LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}" 

                    ItemTapped="treeView_ItemTapped" > 

           … 

        </syncfusion:SfTreeView> 

        <busyIndicator:SfBusyIndicator x:Name="busyIndicator" 

                            AnimationType="ECG" 

                            IsBusy="{Binding IsLoading, Mode=TwoWay}" 

                            IsVisible="{Binding IsLoading, Mode=TwoWay}" 

                            BindingContext="{x:Reference BrowseItemsPage}" 

                            Title="Loading Data...." 

                            TextColor="Magenta" 

                            ViewBoxWidth="150" 

                            ViewBoxHeight="150"/> 

    </Grid> 

</ScrollView> 

 

We have attached the tested sample and video in the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/172578/ze/TreeView643038946 

Video: https://www.syncfusion.com/downloads/support/forum/172578/ze/iPad_5th_Generation-iOS_14.4.MP4337106212 

 

Please check our sample and let us know if you still facing the same issue? If not, please modify our sample based on your requirement and revert us back with the demo video which will be helpful for us to check on it and provide you the solution at the earliest. 

 

Regards, 

Lakshmi Natarajan