Diagram click

[Kamel Gazzah]

Hello

I have a diagram displayed in a web form

I want to let the user click on a particular item in the diagram (a round rectangle for example) and then the program should detect this item properties (Label for example)  to do a further treatment

How can I do that ?

[Amsath Ali M]

Hi kamel,

 

Thanks for your interest in Syncfusion products.

 

We suggest you to use either the DiagramWebControl’s  client side ‘OnClientNodeClick or the server side OnNodeClick” events to get the clicked node. Please refer the below code snippet to achieve your requirement.

 

Here is the code:

[Default.aspx]

 

<script type="text/javascript">

        function NodeClick(oData) {

            var Labels = oData.Node.Labels;

            for (var i = 0; i < Labels.length; i++) {

                if (Labels[i].Text != "")

                { alert("Clicked Node label's Text:"+" " +Labels[i].Text); }

            }

        }

    </script>

 

[Default.aspx.cs]

 

protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

 

                DiagramWebControl1.ClientObjectId = "_sfDiagramWebControl";

 

                Rectangle nodeA = new Rectangle(100, 100, 100, 70);

                nodeA.Name = "NodeA";

                nodeA.Labels.Add(new Syncfusion.Windows.Forms.Diagram.Label(nodeA, "Rectangle"));

                DiagramWebControl1.Model.AppendChild(nodeA);

 

                Ellipse nodeB = new Ellipse(300, 100, 100, 70);

                nodeB.Name = "NodeB";

                nodeB.Labels.Add(new Syncfusion.Windows.Forms.Diagram.Label(nodeB, "Ellipse"));

                DiagramWebControl1.Model.AppendChild(nodeB);

            }

        }

 

 

Please let us know if you have any queries.

 

Regards,

Amsath Ali. M

 

103352_4488fbbb.zip