How to Fire Event on SFDiagram Node Selection

[John Rewolinski]

Hi,

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()

        {

            InitializeComponent();

            InitDiagram();

            controller.AddRoot();

            Link_Grid.ItemsSource = controller.viewmodel.Links;

        }

        private void InitDiagram()

        {

            controller.Init();

            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++)

            {

                controller.AddLink();

            }

            lmWindow.LayoutManager.Layout.UpdateLayout();

        }

        //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;

            }

        }      

    }

}

[John Rewolinski]

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

[Keerthivasan Ramamoorthy]

 Hi John, 

 

Thank you for contacting Syncfusion Support. 

 

Please find the responses to your queries as below. 

S.no	Query	Response
1	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:  //ItemSelectedEvent  (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;         //node.IsSelected         //node.ZIndex;          }  }    Here, diagram is instance of SfDiagram.
2	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.
3	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.

 

 

Regards, 

Keerthivasan R.