1. Home
  2. Forum
  3. Xamarin.Forms
  4. Create ViewModel from child parent (hierarchy) table to use in SfTreeView

Create ViewModel from child parent (hierarchy) table to use in SfTreeView

Hi

I have a hierarchical table that has 3 column : Id , TypeName , TypeParentId .

TypeParentId is allow nulls .

I want to create a ViewModel from Types table and Bind it to an SfTreeView .

How can I do That ?


3 Replies 1 reply marked as answer
LN Lakshmi Natarajan Syncfusion Team July 30, 2020 10:51 AM UTC

Hi Max, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “Create ViewModel from table to use in SfTreeView” from our end. We would like to inform you that you can achieve your requirement using the following steps, 
 
Step 1: Create DataTable in the ViewModel class and populate data. 
namespace TreeViewXamarin 
{ 
    public class FileManagerViewModel 
    { 
        public DataTable DataTable; 
 
        public FileManagerViewModel() 
        { 
            DataTable = GetDataTable(); 
        } 
 
        private DataTable GetDataTable() 
        { 
            DataTable dataTable = new DataTable("Types"); 
            dataTable.Columns.Add("Id", typeof(Int32)); 
            dataTable.Columns.Add("TypeName", typeof(string)); 
            dataTable.Columns.Add("TypeParentId", typeof(Int32)); 
 
            dataTable.Rows.Add(1001, "Australia", 1); 
            dataTable.Rows.Add(1002, "Brazil", 2); 
            dataTable.Rows.Add(1003, "India", 3); 
            dataTable.Rows.Add(1004, "Victoria", 5); 
            dataTable.Rows.Add(1005, "Rio", 6); 
            dataTable.Rows.Add(1006, "TamilNadu", 8); 
            dataTable.Rows.Add(1007, "Chennai", 3); 
          
            return dataTable; 
        } 
    } 
} 
 
Step 2: Create ViewModel collection. 
namespace TreeViewXamarin 
{ 
    public class FileManagerViewModel 
    { 
        private ObservableCollection<FileManager> imageNodeInfo; 
 
        public ObservableCollection<FileManager> ImageNodeInfo 
        { 
            get { return imageNodeInfo; } 
            set { this.imageNodeInfo = value; } 
        } 
    } 
} 
 
Step 3: Retrieve details from DataTable using ItemsArray of the DataRow and add to the ViewModel collection. 
public class FileManagerViewModel 
{ 
        public FileManagerViewModel() 
        { 
            DataTable = GetDataTable(); 
            GenerateSource(); 
        } 
 
        private void GenerateSource() 
        { 
            ImageNodeInfo = new ObservableCollection<FileManager>(); 
            ImageNodeInfo.Add(new FileManager() { ID = (int)DataTable.Rows[0].ItemArray[0], ItemName = (string)DataTable.Rows[0].ItemArray[1], TypeParentId = (int)DataTable.Rows[0].ItemArray[2] }); 
            ImageNodeInfo.Add(new FileManager() { ID = (int)DataTable.Rows[1].ItemArray[0], ItemName = (string)DataTable.Rows[1].ItemArray[1], TypeParentId = (int)DataTable.Rows[1].ItemArray[2] }); 
            ImageNodeInfo.Add(new FileManager() { ID = (int)DataTable.Rows[2].ItemArray[0], ItemName = (string)DataTable.Rows[2].ItemArray[1], TypeParentId = (int)DataTable.Rows[2].ItemArray[2] }); 
 
            ImageNodeInfo[0].SubFiles = new ObservableCollection<FileManager>() 
            { 
                new FileManager() 
                { 
                    ID = (int)DataTable.Rows[3].ItemArray[0], 
                    ItemName = (string)DataTable.Rows[3].ItemArray[1], 
                    TypeParentId = (int)DataTable.Rows[3].ItemArray[2] 
                } 
            }; 
 
            ImageNodeInfo[1].SubFiles = new ObservableCollection<FileManager>() 
            { 
                new FileManager() 
                { 
                    ID = (int)DataTable.Rows[4].ItemArray[0], 
                    ItemName = (string)DataTable.Rows[4].ItemArray[1], 
                    TypeParentId = (int)DataTable.Rows[4].ItemArray[2] 
                } 
            }; 
 
            ImageNodeInfo[2].SubFiles = new ObservableCollection<FileManager>() 
            { 
                new FileManager() 
                { 
                    ID = (int)DataTable.Rows[5].ItemArray[0], 
                    ItemName = (string)DataTable.Rows[5].ItemArray[1], 
                    TypeParentId = (int)DataTable.Rows[5].ItemArray[2] 
                } 
            }; 
 
            ImageNodeInfo[2].SubFiles[0].SubFiles = new ObservableCollection<FileManager>() 
            { 
                new FileManager() 
                { 
                    ID = (int)DataTable.Rows[6].ItemArray[0], 
                    ItemName = (string)DataTable.Rows[6].ItemArray[1], 
                    TypeParentId = (int)DataTable.Rows[6].ItemArray[2] 
                } 
            }; 
        } 
} 
 
Step 4: Bind the collection to the SfTreeView.ItemsSource. 
<syncfusion:SfTreeView x:Name="treeView" ChildPropertyName="SubFiles" ItemsSource="{Binding ImageNodeInfo}"> 
    <syncfusion:SfTreeView.ItemTemplate> 
        <DataTemplate> 
            <Grid x:Name="grid" RowSpacing="0" > 
                <Grid.ColumnDefinitions> 
                    <ColumnDefinition Width="40" /> 
                    <ColumnDefinition Width="*" /> 
                    <ColumnDefinition Width="*" /> 
                </Grid.ColumnDefinitions> 
                <Label Text="{Binding ID}" LineBreakMode="NoWrap" VerticalTextAlignment="Center"/> 
                <Label Text="{Binding ItemName}" Grid.Column="1" LineBreakMode="NoWrap" VerticalTextAlignment="Center"/> 
            </Grid> 
        </DataTemplate> 
    </syncfusion:SfTreeView.ItemTemplate> 
</syncfusion:SfTreeView> 
 
We have prepared a sample based on your requirement and you can download it from the following link, 
 
 
 
Please check the sample and let us know if you need further assistance. 
 
Lakshmi Natarajan 


MP Max Payne August 1, 2020 06:36 AM UTC

Hi
Thank you a lot for your answer . In this sample GetDataTable and GenerateSource are hard code . is there any way to read data from an unlimited multilevel parent child table in SQL Server

LN Lakshmi Natarajan Syncfusion Team August 3, 2020 12:37 PM UTC

Hi Max, 
 
Thank you for the update. 
 
We have prepared a sample to retrieve data from SQL server. We have updated the sample in the following link, 
 
C#: Retrieve data from sql server and add it to the ViewModel collection. 
       public ObservableCollection<FileManager> GetItemsAsync() 
        { 
            ImageNodeInfo = new ObservableCollection<FileManager>(); 
            var items = database.Table<DataBase>().ToList(); 
            int j = 3; 
            for (int i = 0; i<3; i++) 
            { 
                var node = new FileManager(items[i].ID, items[i].Name); 
                node.SubFiles = new ObservableCollection<FileManager>() { new FileManager(items[j].ID, items[j].Name) }; 
                ImageNodeInfo.Add(node); 
                j++; 
            } 
            return ImageNodeInfo; 
        } 
 
Set ItemsSource for TreeView. 
    public partial class MainPage : ContentPage 
    { 
        public MainPage() 
        { 
            InitializeComponent(); 
            var nodes = App.Database.GetItemsAsync(); 
            treeView.ItemsSource = nodes; 
        } 
    } 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


Marked as answer
Loader.
Up arrow icon