Grid Tree Control MVVM

[Darwin Cyril Turingan]

Good Day Syncfusion,

I wanna ask if the GridTreeControl has a support on MVVM? I am experiencing trouble on getting the SelectedNode on my GridTreeControl that is binded to my ViewModel.

Here is my sample Code Snippet of my GridTreeControl

--GridTreeControlSnipper

<syncfusion:GridTreeControl ItemsSource="{Binding  AccountCollection,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"

                                       SelectedNode="{Binding SelectedAccountInfo,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"

                                            Name="treeGrid"

                                        AllowAutoSizingNodeColumn="False"

                                        AllowDragColumns="False"

                                        AllowSort="True"

                                        AutoPopulateColumns="False"

                                        ChildPropertyName="Children"

                                        EnableHotRowMarker="False"

                                        EnableNodeSelection="True"

                                            

                                        ExpandStateAtStartUp="AllNodesExpanded"

                                        NotifyPropertyChanges="True"

                                        PercentSizingBehavior="SizeAlwaysPercent"

                                            Grid.Row="1"

                                            VisualStyle="Metro" Width="Auto"

                                            HorizontalAlignment="Stretch" Background="#FFBAC3C3"

                                            FontSize="20" >

                    <I:Interaction.Behaviors>

                        <behavior:RequestTreeItemsBehavior />

                    </I:Interaction.Behaviors>

                    <syncfusion:GridTreeControl.Columns>

                        <syncfusion:GridTreeColumn  TextBlock.TextAlignment="Justify"

                                                    MappingName="AccountNo" Width="200"/>

                        <syncfusion:GridTreeColumn  MappingName="Name" Width="200"/>

                        <syncfusion:GridTreeColumn  MappingName="Description" Width="200"/>

                        <syncfusion:GridTreeColumn  MappingName="AccountGeneralTypeAccountGeneralTypeId.Name"

                                                    HeaderText="Account General Type" Width="200"/>

                        <syncfusion:GridTreeColumn  MappingName="AccountParentAccountId.AccountNo" Width="200"/>

                        <syncfusion:GridTreeColumn  Width="200"

                                            MappingName="Balance"

                                            HeaderText="Balance" />

                        <syncfusion:GridTreeColumn  Width="200"

                                            MappingName="CurrencyCurrencyId.Name"

                                            HeaderText="Currency" />

                    </syncfusion:GridTreeControl.Columns>

                </syncfusion:GridTreeControl>

I hope you respond immediately to my problem. Thanks Syncfusion! :)

Darwin

[Jai Ganesh S]

Hi Darwin, 

We have analyzed your query. Yes, the GridTreeControl will supports to bind the SelectedNode from viewmodel. You can get the notification while selecting any node from GridTreeControl by using the below code, 

<syncfusion:GridTreeControl Name="treeGrid" 

                                    AllowDragColumns="True" 

                                    AllowDrop="False" 

                                    AllowSort="False" 

                                    SelectedNode="{Binding Path=SelectedNode,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged,NotifyOnSourceUpdated=True,NotifyOnTargetUpdated=True}" 

                                    ChildPropertyName="Children" 

                                    EnableHotRowMarker="True" 

                                    EnableNodeSelection="True" 

                                    ExpandStateAtStartUp="AllNodesExpanded" 

                                    ItemsSource="{Binding PersonDetails}" 

                                    NotifyPropertyChanges="True" 

                                    VisualStyle="Metro" 

                                    syncfusion:LayoutControl.SetMetroMode="True"> 

             

</syncfusion:GridTreeControl> 

 

 

 

And, you can assign the SeletedNode to a viewmodel property by using behavior like below, 

public class InitialSetupBehaviour : Behavior<GridTreeControl> 

{ 

    protected override void OnAttached() 

    { 

        this.AssociatedObject.Loaded += AssociatedObject_Loaded; 

    } 

 

    private void AssociatedObject_Loaded(object sender, System.Windows.RoutedEventArgs e) 

    { 

        this.AssociatedObject.SelectedNodes.CollectionChanged += SelectedNodes_CollectionChanged; 

    } 

 

    private void SelectedNodes_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) 

    { 

        var viewModel = this.AssociatedObject.DataContext as ViewModel; 

        if (e.NewItems != null) 

        { 

            viewModel.SelectedNode = (e.NewItems[0] as GridTreeNode).Item; 

        } 

    } 

 

    protected override void OnDetaching() 

    { 

        this.AssociatedObject.Loaded -= AssociatedObject_Loaded; 

        this.AssociatedObject.SelectedNodes.CollectionChanged -= SelectedNodes_CollectionChanged; 

    } 

} 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_SelectAndAddNode-1290397348.zip 

Regards, 

Jai Ganesh S 

[Darwin Cyril Turingan]

Good day.

Can I get an example where the GridTreeControl ItemSource is Binded to an ObservableCollection in a ViewModel that is automatically updating when I change data in the collection in viewmodel. I got problems in updating the GridTreeControl item source that is binded in a collection in ViewModel.

PS. The collection in my ViewModel  is already implementing INotifyPropertyChanged

[Jai Ganesh S]

Hi Darwin,  

The GridTreeControl ItemsSource will automatically updated while we change the data by setting the NotifyPropertyChanges as true in grid. 

<syncfusion:GridTreeControl Name="treeGrid" 

                                    AllowDragColumns="True" 

                                    AllowDrop="False" 

                                    AllowSort="False" 

                                    SelectedNode="{Binding Path=SelectedNode,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged,NotifyOnSourceUpdated=True,NotifyOnTargetUpdated=True}" 

                                    ChildPropertyName="Children" 

                                    EnableHotRowMarker="True" 

                                    EnableNodeSelection="True" 

                                    ExpandStateAtStartUp="AllNodesExpanded" 

                                    ItemsSource="{Binding PersonDetails}" 

                                    NotifyPropertyChanges="True" 

                                    VisualStyle="Metro" 

                                    syncfusion:LayoutControl.SetMetroMode="True"/> 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_SelectAndAddNode1523774838.zip 

In the above sample, we have added the data at runtime. 

Regards, 

Jai Ganesh S 

[Darwin Cyril Turingan]

Good day,

Thanks and I got the idea on manually adding node but the real problem is here.

I've retrieve a new collection of data coming from the database and I want it to be place on the gridtree so that it can be updated. But unfortunately even if I've set the new collection to the grid, it doesnt update on the UI.

Sorry for my grammar. Hope you can help me on this. Thanks more power

-Darwin

[Jai Ganesh S]

Hi Darwin,   

We have modified a sample for adding a new collection to the grid and it working fine in our end. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_SelectAndAddNode-608791050.zip 

Could you please check it in your side and if you still facing the issue please replicate the issue in above sample. This would be more helpful for us to proceed further. 

Regards, 

Jai Ganesh S