Skip to content

SyncfusionExamples/sorting-treeview-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

How to sort TreeView nodes in Xamarin.Forms (SfTreeView)

You can sort the TreeView nodes based on the node properties in Xamarin.Forms SfTreeView.

You can also refer th following article.

https://www.syncfusion.com/kb/11315/how-to-sort-treeview-nodes-in-xamarin-forms-sftreeview

XAML

ViewModel command bound to sort the nodes of the TreeView.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TreeViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.XForms.TreeView;assembly=Syncfusion.SfTreeView.XForms"
             x:Class="TreeViewXamarin.MainPage">
 
    <ContentPage.BindingContext>
        <local:FileManagerViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
 
    <StackLayout>
        <Button Text="Sort TreeView" Command="{Binding TreeViewSortCommand}" HeightRequest="50"/>
        <syncfusion:SfTreeView x:Name="treeView" ChildPropertyName="SubFiles" ItemTemplateContextType="Node" AutoExpandMode="AllNodesExpanded" ItemsSource="{Binding ImageNodeInfo}">
            <syncfusion:SfTreeView.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="grid" RowSpacing="0" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding Content.ImageIcon}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="35" WidthRequest="35"/>
                        <Grid Grid.Column="1" RowSpacing="1" Padding="1,0,0,0" VerticalOptions="Center">
                            <Label LineBreakMode="NoWrap" Text="{Binding Content.ItemName}" VerticalTextAlignment="Center"/>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </syncfusion:SfTreeView.ItemTemplate>
        </syncfusion:SfTreeView>
    </StackLayout>
</ContentPage>

C#

To sort the collection, create a new collection and sort the ViewModel collection based on the model property using OrderBy linq method. Assign the new collection to the ViewModel collection in the command execute method.

namespace TreeViewXamarin
{
    public class FileManagerViewModel : INotifyPropertyChanged
    {
        public Command TreeViewSortCommand { get; set; }
 
        public FileManagerViewModel()
        {
            TreeViewSortCommand = new Command(OnTreeViewSortClicked);
        }
        
        private void OnTreeViewSortClicked(object obj)
        {
            this.ImageNodeInfo = new ObservableCollection<FileManager>(ImageNodeInfo.OrderBy(i => i.ItemName));
        }
         }
}

C#

To notify the collection changed, implement INotifyPropertyChanged for ViewModel and raise PropertyChanged event for collection.

namespace TreeViewXamarin
{
    public class FileManagerViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<FileManager> ImageNodeInfo
        {
            get
            {
                return imageNodeInfo;
            }
            set
            {
                this.imageNodeInfo = value;
                this.RaisedOnPropertyChanged("ImageNodeInfo");
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
        public void RaisedOnPropertyChanged(string _PropertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(_PropertyName));
            }
        }
    }
}

About

This repository contains sample about how to sort TreeView nodes in Xamarin.Forms (SfTreeView)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages