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. Image for the cookie policy date

Load on demand

How can I change the color of the loading icon when I expand a node and also is there any way I can use custom Icons based on different levels of the tree in "Load on demand"


10 Replies

LN Lakshmi Natarajan Syncfusion Team December 23, 2019 08:40 AM

Hi Emad, 
 
Thank you for contacting Syncfusion support. 
  
TreeView does not support customizing the LoadOnDemand busy indicator. You can achieve your requirement by hiding the default expander by setting ExpanderWidth as Zero. Then defining the expander UI in ItemTemplate itself and load custom busy indicator. We were currently validating the query and provide you further details on tomorrow (December 24, 2019). We appreciate your patience until then. 
  
Regards, 
Lakshmi Natarajan 



LN Lakshmi Natarajan Syncfusion Team December 24, 2019 05:35 AM

Hi Emad, 
 
We have checked the reported query from our end. We would like to let you know that we have prepared sample by customizing SfBusyIndicator in TreeView ItemTemplate. The application works fine in UWP and iOS platforms, but we faced issue in Android. We are currently validating the same and provide you the details on or before December 30, 2019. We appreciate your patience until then. 
 
Sample link: Sample 
 
Regards, 
Lakshmi Natarajan 



EA Emad Afaq December 24, 2019 07:25 AM

Hi 

Thank you very much, I will be waiting for your response. I am currently focusing on android with Xamarin Forms

The other question I asked about custom Icons is that i want each level to have some custom icon

For example


<static Icon> Level 1
             <static different icon> Level 2
                          <static different icon> Level 3


In each level all the icons are the same. They only differ on different levels.


So first question about activity indicator I understood and will be waiting for the your response. Second one is mentioned above in detail.












LN Lakshmi Natarajan Syncfusion Team December 24, 2019 10:02 AM

Hi Emad, 
  
We would like to let you know that TreeView allows to use custom icons for different level. You can use converter to achieve your requirement like below code snippet, 
  
<Image Source="{Binding Level, 
                Converter={StaticResource ExpanderIconConverter}}" 
       IsVisible="{Binding HasChildNodes, 
                   Converter={StaticResource ExpanderIconVisibilityConverter}, 
                   ConverterParameter={x:Reference grid}}" 
                                   VerticalOptions="Center" 
                                   HorizontalOptions="Center" 
                                   HeightRequest="35" 
                                   WidthRequest="35"/> 
  
public class ExpanderIconConverter : IValueConverter 
    { 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            Assembly assembly = typeof(App).GetTypeInfo().Assembly;          
            if ((int)value == 0) 
                return ImageSource.FromResource("GettingStartedBound.Icons.collapse.png", assembly); 
            else if ((int)value == 1) 
                return ImageSource.FromResource("GettingStartedBound.Icons.plus.png", assembly); 
            else 
                return ImageSource.FromResource("GettingStartedBound.Icons.minus.png", assembly); 
        } 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            throw new NotImplementedException(); 
        } 
    } 
  
We have attached the sample for your reference. 
  
Sample link: CustomIconSample 
  
Regards, 
Lakshmi Natarajan 



EA Emad Afaq December 25, 2019 02:47 AM


Hi, Thank you for your support.

When i changed only one value of the icon to a custom one Like below, in converter class,

            if ((int)value == 0)
                return ImageSource.FromResource("GettingStartedBound.Icons.iconepic.png", assembly);
            else if ((int)value == 1)
                return ImageSource.FromResource("GettingStartedBound.Icons.plus.png", assembly);
            else
                return ImageSource.FromResource("GettingStartedBound.Icons.minus.png", assembly);

It gave me the following :
Please advise 
It doesn't show any icon.



EA Emad Afaq December 25, 2019 07:06 AM

I have attached the sample code with few edits.

I think I am missing out on some basic stuff, please advise.

The icon "epic" is what i want to be displayed but it doesnt show but reverting is back to the icon you are using works fine. Is it something related to icon format etc? 

Thanks.


Xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GettingStartedBound.GettingStatred"
             xmlns:local="clr-namespace:GettingStartedBound"
             xmlns:treeview="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
             xmlns:sfbusyindicator="clr-namespace:Syncfusion.SfBusyIndicator.XForms;assembly=Syncfusion.SfBusyIndicator.XForms">
    <ContentPage.BindingContext>
        <local:MusicInfoRepository x:Name="viewModel"/>
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <ResourceDictionary>
            
            <local:ExpanderIconConverter x:Key="ExpanderIconConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <treeview:SfTreeView x:Name="treeView"
                             Indentation="40"
                             ItemHeight="40"
                             ExpanderWidth="10"
                             ExpandActionTarget="Node"
                             AutoExpandMode="None"
                             ItemTemplateContextType="Node"
                             LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}"
                             ItemsSource="{Binding Menu}">
            <treeview:SfTreeView.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="grid" Padding="5,5,5,5" RowSpacing="0" BackgroundColor="White">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Grid Grid.Column="1" RowSpacing="1"
                                      Padding="1,0,0,0"
                                      VerticalOptions="Center">
                            <Label LineBreakMode="NoWrap" TextColor="Black" HeightRequest="50"
                                           Text="{Binding Content.ItemName}" FontSize="20"
                                           VerticalTextAlignment="Center">
                            </Label>
                        </Grid>
                        <Grid Grid.Column="0">
                            <Image Source="{Binding Level, Converter={StaticResource ExpanderIconConverter}}"
                                   
                                   VerticalOptions="Center"
                                   HorizontalOptions="Center"
                                   HeightRequest="35"
                                   WidthRequest="35">
                                
                            </Image>

                            

                        </Grid>
                    </Grid>
                </DataTemplate>                
            </treeview:SfTreeView.ItemTemplate>
        </treeview:SfTreeView>

    </ContentPage.Content>
</ContentPage>










This is the Converter:

using Syncfusion.TreeView.Engine;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Reflection;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace GettingStartedBound
{
    public class ExpanderIconConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            Assembly assembly = typeof(App).GetTypeInfo().Assembly;

            if ((int)value == 0)
                return ImageSource.FromResource("GettingStartedBound.Icons.epic.png", assembly); // This is the change
            else if ((int)value == 1)
                return ImageSource.FromResource("GettingStartedBound.Icons.plus.png", assembly);
            else
                return ImageSource.FromResource("GettingStartedBound.Icons.minus.png", assembly);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    public class ExpanderIconVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var treeViewNode = (parameter as Grid).BindingContext as TreeViewNode;

            if ((bool)value && !treeViewNode.ShowExpanderAnimation)
                return true;

            if (treeViewNode.ShowExpanderAnimation)
                return false;

            else
                return false;

            //return ((bool)value) ? false : true;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    public class IndicatorColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (int)value == 0 ? Color.Red : Color.Green;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

    public class ImageRotationConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return 90;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}




Icon is attached



Attachment: epic_2047bc2e.zip


EA Emad Afaq December 25, 2019 09:17 AM

Ignore all my codes which I mentioned earlier. I managed to do it with the following:


Enabling images as embedded resource  

Binding to use Content.ItemName instead of ItemName (In my app I was using Item in the binding, but when changed to Content,ItemName then the Icons and text showed otherwise it was only icons). 
So ItemTemplateContextType="Node" was only showing Icons where as ItemTemplateContextType="Item" was showing only Label

I will go through the documentation to understand their difference

Thank you very much for the support. 




LN Lakshmi Natarajan Syncfusion Team December 30, 2019 05:21 AM

Hi Emad, 
 
We have checked the reported issue “Handling visibility for BusyIndicator loaded inside TreeView ItemTemplate does not work properly in Android” and logged issue report for the same. We will fix the issue and include the issue fix in our next Weekly Nuget release update which is planned to roll out on January 21, 2020. We appreciate your patience until then. 
  
You can track the status of this report through the following feedback link, 
  
Note: The provided feedback link is private, you need to login to view this feedback. 
 
Regards, 
Lakshmi Natarajan 



LN Lakshmi Natarajan Syncfusion Team January 21, 2020 08:26 PM

Hi Emad, 
 
Sorry for the inconvenience caused. 
 
Currently, we are analyzing the reported issue and due to its complexity we are still working on it. We will fix and include the issue fix in our upcoming Volume 4 – SP1 release which is planned to roll out on the end of January 2020. We will appreciate your patience until then. 
 
Please let us know if you need patch before release. 
 
Regards, 
Lakshmi Natarajan 



LN Lakshmi Natarajan Syncfusion Team January 29, 2020 04:36 AM

Hi Emad, 
 
Sorry for the delay caused. 
 
We would like to inform you that the reported issue `Handling visibility for BusyIndicator loaded inside TreeView ItemTemplate does not work properly in Android` is a framework issue and we have logged the bug report for the same. Kindly refer the following report for further reference from below for further updates.  
  
 
Meanwhile, we suggest you to set RowDefinition for the Grid as Auto and handle visibility for BusyIndicator like below code snippet, 
 
Xaml: 
 
<treeview:SfTreeView x:Name="treeView" 
                     ExpanderWidth="0" 
                     Indentation="40" 
                     ItemTemplateContextType="Node" 
                     QueryNodeSize="TreeView_QueryNodeSize" 
                     LoadOnDemandCommand="{Binding TreeViewOnDemandCommand}" 
                     ItemsSource="{Binding Menu}"> 
  <treeview:SfTreeView.ItemTemplate> 
     <DataTemplate> 
       <Grid x:Name="grid" Padding="5,5,5,5" RowSpacing="0" BackgroundColor="White"> 
          <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="50" /> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"/> 
          </Grid.RowDefinitions> 
          <Grid RowSpacing="1" 
                Padding="1,0,0,0" 
                VerticalOptions="Center"> 
          <Label LineBreakMode="NoWrap" TextColor="Black" 
                 Text="{Binding Content.ItemName}" FontSize="20" 
                 VerticalTextAlignment="Center"> 
          </Label> 
        </Grid> 
        <Grid Grid.Column="1"> 
          <Grid.RowDefinitions> 
             <RowDefinition Height="Auto"/> 
          </Grid.RowDefinitions> 
          <Image Source="{Binding IsExpanded, Converter={StaticResource ExpanderIconConverter}}" 
                 IsVisible="{Binding HasChildNodes, Converter={StaticResource ExpanderIconVisibilityConverter}, ConverterParameter={x:Reference grid}}" 
                 VerticalOptions="Center" 
                 HorizontalOptions="Center" 
                 HeightRequest="35" 
                 WidthRequest="35"> 
             <Image.GestureRecognizers> 
                 <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" /> 
             </Image.GestureRecognizers> 
           </Image> 
           <Grid IsVisible="{Binding ShowExpanderAnimation, Mode=TwoWay}" RowSpacing="0"> 
              <sfbusyindicator:SfBusyIndicator x:Name="grid1" IsVisible="True" 
                                                TextColor="{Binding Level, Converter={StaticResource IndicatorColorConverter}}" 
                                                IsBusy="True" 
                                                Margin="2" BackgroundColor="White" 
                                                ViewBoxHeight="25"  ViewBoxWidth="25" 
                                                HeightRequest="32"  AnimationType="SingleCircle"/> 
            </Grid> 
          </Grid> 
        </Grid> 
       </DataTemplate>                
   </treeview:SfTreeView.ItemTemplate> 
</treeview:SfTreeView>  
 
 
We have modified the sample with workaround. Please find the sample in the following link, 
 
 
Regards, 
Lakshmi Natarajan 


Loader.
Live Chat Icon For mobile
Up arrow icon