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

Load on demand

Thread ID:

Created:

Updated:

Platform:

Replies:

150136 Dec 22,2019 11:51 AM UTC Jan 29,2020 12:36 PM UTC Xamarin.Forms 10
loading
Tags: SfTreeView
Emad Afaq
Asked On December 22, 2019 11:51 AM UTC

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"


Lakshmi Natarajan [Syncfusion]
Replied On December 23, 2019 04:40 PM UTC

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 


Lakshmi Natarajan [Syncfusion]
Replied On December 24, 2019 01:35 PM UTC

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 


Emad Afaq
Replied On December 24, 2019 03:25 PM UTC

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.











Lakshmi Natarajan [Syncfusion]
Replied On December 24, 2019 06:02 PM UTC

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 


Emad Afaq
Replied On December 25, 2019 10:47 AM UTC


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.


Emad Afaq
Replied On December 25, 2019 03:06 PM UTC

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

Emad Afaq
Replied On December 25, 2019 05:17 PM UTC

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. 



Lakshmi Natarajan [Syncfusion]
Replied On December 30, 2019 01:21 PM UTC

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 


Lakshmi Natarajan [Syncfusion]
Replied On January 22, 2020 04:26 AM UTC

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 


Lakshmi Natarajan [Syncfusion]
Replied On January 29, 2020 12:36 PM UTC

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 


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