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

How to Fire Event on SFDiagram Node Selection


So I'm bashing my head against a wall trying to figure out what should be simple.  However the documentation doesn't really give a good answer.

I have an SFDiagram filled with nodes.  I am using MVVM design.

I want to be able to click one of the nodes, and have it do something.

I tried to add an event handler for clicking on the SFDiagram, but it doesn't seem to work:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using Syncfusion;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Syncfusion.UI.Xaml.Diagram.Layout;
using Syncfusion.UI.Xaml.Diagram;
using System.Collections.ObjectModel;
using Link_Map.Classes;
using Syncfusion.SfSkinManager;
using Syncfusion.Windows.Shared;
using Syncfusion.Windows.Tools.Controls;
using Syncfusion.UI.Xaml.Diagram.Controls;

namespace Link_Map
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : ChromelessWindow
        Controller controller = new Controller();
        DirectedTreeLayout tree = new DirectedTreeLayout();

        public MainWindow()
            Link_Grid.ItemsSource = controller.viewmodel.Links;

        private void InitDiagram()
            lmWindow.Nodes = new ObservableCollection<Node>();
            lmWindow.Connectors = new ObservableCollection<Connector>();
            DataSourceSettings settings = new DataSourceSettings();
            settings.DataSource = controller.viewmodel.Links;
            settings.ParentId = "ParentID";
            settings.Id = "LinkID";
            settings.Root = "0";
            lmWindow.DataSourceSettings = settings;
            settings.DataSource = controller.viewmodel.Links;
            (lmWindow.Info as IGraphInfo).ItemAdded += MainWindow_ItemAdded;


            lmWindow.LayoutManager = new LayoutManager()
                Layout = new RadialTreeLayout()

            (lmWindow.LayoutManager.Layout as RadialTreeLayout).HorizontalSpacing = 10;
            (lmWindow.LayoutManager.Layout as RadialTreeLayout).VerticalSpacing = 35;

            lmWindow.Menu = null;
            lmWindow.Tool = Tool.ZoomPan;

            lmWindow.DefaultConnectorType = ConnectorType.Line;
            lmWindow.PageSettings.PageBorderBrush = new SolidColorBrush(Colors.Transparent);
                         Diagrammy.Constraints = Diagrammy.Constraints &
                                         ~(GraphConstraints.Draggable | GraphConstraints.Selectable);


        private void Metro_Theme_Click(object sender, RoutedEventArgs e)
            SkinStorage.SetVisualStyle(this, "Metro");

        private void Blend_Theme_Click(object sender, RoutedEventArgs e)
            SkinStorage.SetVisualStyle(this, "Blend");

        private void Add_Click(object sender, RoutedEventArgs e)
            for(int i=0; i<100; i++)

        //Apply Node and Connector Style
        private void MainWindow_ItemAdded(object sender, ItemAddedEventArgs args)
            if (args.Item is INode)
                (args.Item as INode).UnitWidth = 10;
                (args.Item as INode).UnitHeight = 10;
                (args.Item as INode).ContentTemplate = this.lmWindow.Resources["contentTemplate"] as DataTemplate;
            else if (args.Item is IConnector)
                SolidColorBrush solid = new SolidColorBrush();
                solid.Color = Color.FromArgb(255, 186, 186, 186);
                (args.Item as IConnector).TargetDecoratorStyle = this.Resources["style"] as Style;

2 Replies

JR John Rewolinski November 12, 2016 03:51 AM UTC

Also, if I could figure out which node I selected?  And what the collections index of the node is?

KR Keerthivasan Ramamoorthy Syncfusion Team November 14, 2016 12:38 PM UTC

 Hi John, 
Thank you for contacting Syncfusion Support. 
Please find the responses to your queries as below. 
I want to be able to click one of the nodes, and have it do something. 
Requirement:” Need to fire an Event When the Node is Selected”. 
We have ItemSelectedEvent support for Diagram which will fire when an item (Node and Connector) is Selected. We have provided a code Example to represent this. Please refer to the code example as below.  
Code Example: 
(diagram.Info as IGraphInfo).ItemSelectedEvent += MainWindow_ItemSelectedEvent; 
private void MainWindow_ItemSelectedEvent(object sender, DiagramEventArgs args) 
   if (args.Item != null && args.Item is INode) 
       INode node = args.Item as INode; 
Here, diagram is instance of SfDiagram. 
Also, if I could figure out which node I selected?   
We have IsSelected Property for Node/Connector which is used to know the Selected item from the Diagram (Nodes and Connector). Please refer the above code example. 
And what the collections index of the node is? 
We have ZIndex Property for Node/Connector which is used to know the Index. Please refer the above code example. 
Keerthivasan R. 

Live Chat Icon For mobile
Up arrow icon