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. Image for the cookie policy date

Grid Tree Control MVVM

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

5 Replies

JG Jai Ganesh S Syncfusion Team January 31, 2017 01:03 PM UTC

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; 
    } 
} 
 
Regards, 
Jai Ganesh S 



DC Darwin Cyril Turingan February 14, 2017 03:01 AM UTC

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


JG Jai Ganesh S Syncfusion Team February 15, 2017 02:26 AM UTC

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"/> 
 
In the above sample, we have added the data at runtime. 
Regards, 
Jai Ganesh S 



DC Darwin Cyril Turingan February 17, 2017 09:09 AM UTC

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


JG Jai Ganesh S Syncfusion Team February 20, 2017 11:33 AM UTC

Hi Darwin,   
We have modified a sample for adding a new collection to the grid and it working fine in our end. 
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 


Loader.
Up arrow icon