1. Home
  2. Forum
  3. Xamarin.Forms
  4. TreeMap does not drill down more then 1 level with HierarchicalLevel

TreeMap does not drill down more then 1 level with HierarchicalLevel

I've been trying to display financial stock data and the TreeView has been working very well. Except it doesn't respond to CollectionChanged events. I've been able to work around that. My main issue is that the TreeMap does not display the data with many levels (which is working for TreeView). It will only drill down once or show the first level children when drilldown is set to false. 

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"
    xmlns:gestures="clr-namespace:App.Gestures"
    xmlns:behavior="clr-namespace:App.Behaviors"
    xmlns:fonts="clr-namespace:App.Fonts"
    xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
    xmlns:mr="clr-namespace:MR.Gestures;assembly=MR.Gestures"
    xmlns:buttons="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
    xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
    xmlns:lineargauge="clr-namespace:Syncfusion.SfGauge.XForms;assembly=Syncfusion.SfGauge.XForms"
    xmlns:controls="clr-namespace:App.Controls"
    xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"
    xmlns:converters="clr-namespace:App.Converters"
    xmlns:treemap="clr-namespace:Syncfusion.SfTreeMap.XForms;assembly=Syncfusion.SfTreeMap.XForms"
    xmlns:treeview="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
    xmlns:treeviewengine="clr-namespace:Syncfusion.TreeView.Engine;assembly=Syncfusion.SfTreeView.XForms"
    x:Class="App.AssetFinancialsPage">
    <ContentPage.Content>
        <tabView:SfTabView BackgroundColor="Transparent">
            <tabView:SfTabItem Title="TreeView">
                <tabView:SfTabItem.Content>
                    <treeview:SfTreeView
                        x:Name="treeView"
                        ChildPropertyName="Children"
                        ItemsSource="{Binding LineItems }">
                        <treeview:SfTreeView.ItemTemplate>
                            <DataTemplate>
                                <Grid Padding="5,0,0,0">
                                    <Label
                                        Grid.Column="0"
                                        Text="{Binding Name}"
                                        HorizontalTextAlignment="Start" 
                                        VerticalTextAlignment="Center"/>
                                    <Label
                                        Grid.Column="1"
                                        Text="{Binding WeightString}"
                                        HorizontalTextAlignment="End"
                                        VerticalTextAlignment="Center"/>
                               </Grid>
                            </DataTemplate>
                        </treeview:SfTreeView.ItemTemplate>
                    </treeview:SfTreeView>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Title="TreeMap">
                <tabView:SfTabItem.Content>
                    <treemap:SfTreeMap
                        x:Name="TreeMap"
                        EnableDrilldown="True"
                        LayoutType="Squarified"
                        ShowTooltip="False"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand"
                        DataSource="{Binding LineItems }"
                        WeightValuePath="WeightAbs"
                        BackgroundColor="White" >

                        <treemap:SfTreeMap.LeafItemSettings>
                            <treemap:LeafItemSettings LabelPath="Name" OverflowMode="Trim"/>
                        </treemap:SfTreeMap.LeafItemSettings>

                        <treemap:SfTreeMap.Levels>
                            <treemap:TreeMapHierarchicalLevel ChildPadding="4" ChildBackground="White" ShowHeader = "True"  HeaderHeight = "20"  LabelPath="Name"
                                                              HeaderPath = "Name"  ChildPath = "Children" >
                                <treemap:TreeMapHierarchicalLevel.HeaderStyle>
                                    <treemap:Style Color= "Black"/>
                                </treemap:TreeMapHierarchicalLevel.HeaderStyle>
                            </treemap:TreeMapHierarchicalLevel>


                       </treemap:SfTreeMap.Levels>
                    </treemap:SfTreeMap>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
        </tabView:SfTabView>
    </ContentPage.Content>
</ContentPage>

```



14 Replies
KC Keston Crandall April 26, 2020 10:55 PM UTC

Model
```

public class FinancialLineItem : ObservableObject
    {
        private string _Name;
        public string Name
        {
            get
            {
                return _Name;
            }
            set
            {
                SetProperty(ref _Name, value);
            }
        }

        public bool IsPositive
        {
            get
            {
                if (this.Weight >= 0)
                    return true;
                else
                    return false;
            }
        }

        private bool _ExcludeWeight;
        public bool ExcludeWeight
        {
            get
            {
                return _ExcludeWeight;
            }
            set
            {
                SetProperty(ref _ExcludeWeight, value);
            }
        }

        public string WeightString
        {
            get
            {
                if (!ExcludeWeight)
                    return $"{Weight.ToShortString(1)}";
                else
                    return null;
            }
        }

        private double _Weight;
        public double Weight
        {
            get
            {
                if(Children != null && Children.Count > 0)
                {
                    double weight = 0;
                    foreach(var child in this.Children)
                    {
                        weight += child.Weight;
                    }
                    return weight;
                }
                return _Weight;
            }
            set
            {
                SetProperty(ref _Weight, value);
                NotifyPropertyChanged(nameof(this.WeightAbs));
                NotifyPropertyChanged(nameof(this.IsPositive));
            }
        }

        public double WeightAbs
        {
            get
            {
                if (Children != null && Children.Count > 0)
                {
                    double weight = 0;
                    foreach (var child in this.Children)
                    {
                        weight += child.WeightAbs;
                    }
                    return weight;
                }
                return Math.Abs(Weight);
            }
        }

        private ICollection<FinancialLineItem> _Children;
        public ICollection<FinancialLineItem> Children
        {
            get
            {
                return _Children;
            }
            set
            {
                SetProperty(ref _Children, value);
            }
        }
    }

```

KC Keston Crandall April 26, 2020 11:04 PM UTC

I've uploaded two screenshots. One is of the functional TreeView. The other is the max level the TreeMap will drill down to. Both are bound to the same collection so one would expect them to have the same ability to keep drilling down.

Attachment: Archive_6f262d35.zip

RS Ramya Soundar Rajan Syncfusion Team April 27, 2020 12:53 PM UTC

Hi Keston, 
 
Currently we are checking on your reported problem and update you the status on tomorrow April 28, 2020. 
 
Regards, 
Ramya S 


RS Ramya Soundar Rajan Syncfusion Team April 28, 2020 03:21 PM UTC

Hi Keston, 
 
Still we are validating on this and update the status about the issue on April 30, 2020.If possible, can you please provide the view model data to investigate further about the issue .This will be helpful to provide better solution at earliest. 
 
Regards, 
Ramya S 


KC Keston Crandall April 28, 2020 07:43 PM UTC

Here is the view model attached 

Attachment: Archive_c65c76a3.zip

KC Keston Crandall April 28, 2020 07:46 PM UTC

The data is being loaded asynchronously after OnAppear and i am replacing the ObservableCollection and invoking the NotifyPropertyChanged(because the view doesn't update when you add an item to the observablecollection... you have to replace the whole collection). I don't think anything going on in the view model would have any effect on the levels as the levels have already been constructed ahead of time.

RS Ramya Soundar Rajan Syncfusion Team April 29, 2020 05:05 PM UTC

Hi Keston,  
 
Currently we have the support to drilldown hierarchical data for one level. We would like to suggest that you can use the flat level for drill down to a multiple level. Please find the sample for the flat level from the below location. 
 
Sample Link: 
 
Please refer the sample for the hierarchical level from the below location. 
 
 
Regards, 
Ramya S 


KC Keston Crandall April 29, 2020 05:10 PM UTC

It's impossible to do for flat level as each one can have anywhere from 1 to 5 levels and its not like it can be grouped by certain keys. Balance sheets and other financial statements have various parts that can be drilled down in different ways. When will you add support for hierarchical? 

RS Ramya Soundar Rajan Syncfusion Team April 30, 2020 02:46 PM UTC

Hi Keston, 
 
Thanks for the update. 
 
We would like to inform that we have considered this as feature request and you can track the status of feature from the below link, 
  
  
If you have any more specifications/suggestions to the feature report, you can add it as a comment in the portal.   
  
We will include this feature in our upcoming Volume 3, 2020 main release, which is expected to be rolled out on end of September 2020.  
  
Regards, 
Ramya S 


KC Keston Crandall April 30, 2020 07:10 PM UTC

Ok thank you. If you had working by September that would be fantastic! Also, no rush, but could you look into TreeView not responding to items getting added to an ObservableCollection. I have to manually reset the Collection for the UI to change as you can see from my VM code where I am adding FinancialLineItems after OnAppearing. It's find for now, but a bit clunky. Thanks!

RS Ramya Soundar Rajan Syncfusion Team May 1, 2020 06:15 AM UTC

Hi Keston,  
 
Thanks for your update. 
 
As we informed earlier, we will include this feature in our upcoming Volume 3, 2020 main release, which is expected to be rolled out on end of September 2020. 
 
Regards, 
Ramya S 


LN Lakshmi Natarajan Syncfusion Team May 1, 2020 06:53 AM UTC

Hi Keston, 
 
#Regarding TreeView query 
 
We have checked the reported query “TreeView not responding collection changed” from our end. We would like to inform you that to update the collection changes in UI at run time, we need to define the NotificationSubscriptionMode to TreeView. 
 
Please refer the NotificationSubscriptionMode definition and its values, 
Enum 
Description 
CollectionChange  
Updates its tree structure when child items collection gets changed. 
PropertyChange  
Updates its ChildItems when associated collection property gets changed. 
None  
It is a default mode and it doesn’t reflect collection/property changes in UI. 
 
Please refer the following code snippets to define NotificationSubscriptionMode to notify the collection changes, 
Xaml 
<syncfusion:SfTreeView x:Name="treeView" NotificationSubscriptionMode="CollectionChange,PropertyChange" ItemHeight="40" Indentation="15" ExpanderWidth="40" ChildPropertyName="SubFiles" ItemsSource="{Binding ImageNodeInfo}" AutoExpandMode="AllNodesExpanded"> 
 
You can also refer our document regarding the same from the following links, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


KC Keston Crandall May 1, 2020 11:59 PM UTC

Thank you that solved it for me. I must not have seen that in the docs. Never seen a control where you to have to opt in for collection changes lol

LN Lakshmi Natarajan Syncfusion Team May 4, 2020 06:10 AM UTC

Hi Keston, 
 
Thank you for the update. 
 
#Regarding SfTreeView 
  
We are glad that the reported issue have been resolved at your end. Please let us know if you need any further update. As always we are happy to help you out. 
  
Regards, 
Lakshmi Natarajan 


Loader.
Up arrow icon