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

displaying information about the diagram node that is clicked

Hi,
We need to display information regarding a node that has been clicked. All the samples use client-side event handler. We need to develop server side even handler. I appreciate it if you can point me to a sample that help us with such an activity?
Regards
Al

5 Replies

RS Rajarajeswari S Syncfusion Team October 25, 2007 09:38 AM UTC



Hi Al,

In server side we can handle the node click event using NodeClickEventHandler. The DiagramWebControl fires the NodeClick event whenever the user clicks on a diagram node in the web browser client. Within the NodeClick event handler, examine the event arguments to determine the diagram node that was clicked and also the state of the various control keys and update the diagram model to reflect the clicked state. Please refer the below code snippet which illustrates this.

this.DiagramWebControl1.NodeClick += new NodeClickEventHandler(this.Diagram1_NodeClick);

protected void Diagram1_NodeClick(object sender, NodeClickEventArgs e)
{
...........
}

Please refer the sample from the following link which illustrates this:

C:\Documents and Settings\User Name\My Documents\Syncfusion\EssentialStudio\5.2.0.25\Web\diagram.web\Samples\2.0\BasicFeatures\ScriptyClient\CS

Regards,
S.Rajarajeswari


RK Ramesh Kumar K July 14, 2016 04:05 AM UTC

Is this feature available in version "14.2.0.26" for Asp.net web forms?


SG Shyam G Syncfusion Team July 14, 2016 09:46 AM UTC

Hi Ramesh, 

Currently we don’t have server side event handler support but it can be achieved using client side event handler. You can define the click event in the client side and using Ajax pageMethods, you call the method in the server side. please refer to the code example and sample below. 

Code example

//define the click event 
  Diagram1.Model.Click = "click"; 
 
function click() {              
            PageMethods.NodeClick(OnSuccess, OnError); 
    } 
 
 [WebMethod] 
 public static string NodeClick() 
 {       
     return null; 
 } 


Regards, 
Shyam G 



FL Fabian Lorenz May 11, 2017 02:08 PM UTC

Hi,
I downloaded the example and managed it to work.
But my problem is now, that I don't know how to access the diagram on server-side.
Let's say I want to change the size of a BasicShape, which i clicked, in my WebMethod on serverside.
Do I have to pass the Diagram (or Node) with PageMethods or can I access it somehow directly on serverside?
It would be nice if you give a short code example.
Regards,
Fabian


SG Shyam G Syncfusion Team May 12, 2017 09:20 AM UTC

Hi Fabian, 
 
In the client side, you need to stringify the selected node and send it to server side. In the server, you can deserialize the JSON string to dictionary object and process it further in the server side. Please refer to the code example below and sample below. 
 
Code example: 
 
   //define the click event 
                Diagram1.Model.Click = "click"; 
function click(args) { 
            if (args && args.element) { 
                //get the selected node 
                var node = { nodes: args.element }; 
                //JSON stringify the node 
                var stringvalue = JSON.stringify(node); 
                PageMethods.NodeClick(stringvalue, OnSuccess, OnError); 
            } 
        } 
 
[WebMethod] 
        public static string NodeClick(string stringvalue) 
        { 
            Dictionary<string, object> requestArgs = (Dictionary<string, object>)new JavaScriptSerializer().DeserializeObject(stringvalue); 
            //to get the selected node 
            Dictionary<string,object> nodes = (Dictionary<string,object>)requestArgs["nodes"]; 
            return null; 
        } 
 
 
Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon