Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic How to update Diagram node text in client side timer using js (Read 5454 times)
girikul
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Feb 25th, 2020
How to update Diagram node text in client side timer using js
Feb 25th, 2020 at 5:43am
Print Post  
I am using Diagram control as shown below
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <ndiag:DiagramView runat="server" ID="diagramView" ClientSideMode="Canvas" Width="1900px" Height="1050px" NodeDoubleClickedScript="onNodeDoubleClicked" Behavior="DoNothing">
        </ndiag:DiagramView>
    </ContentTemplate>
</asp:UpdatePanel>

We have collection of nodes in the Diagram
Based on some conditions we update the text of the node in the diagram in the server side as

For Each node As DiagramNode In diagramView.Diagram.Nodes
              If node.Tag.ToString.ToUpper = "TEST" Then
CType(node, ShapeNode).Text = myValue
  End If
Next

Now I need to update this node text value in client side which is received by web service. There is timer function
function myTimer() {

        $.ajax({

            url: webServiceURL,
            type: "POST",
            dataType: "xml",
            data: soapRequest,
            processData: false,
            contentType: "text/xml; charset=\"utf-8\"",
            success: OnSuccess,
            error: OnError
        });
    }

function OnSuccess(data, status, req) {
        if (status == "success") {
           //Here I need to put the code to update the node text.
        }
    }

Diagram object methods like Diagram.nodes not available in client side. Could you please provide sample code to achieve this?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: How to update Diagram node text in client side timer using js
Reply #1 - Feb 25th, 2020 at 6:02am
Print Post  
Hi,

In JavaScript that should look like -
Code
Select All
for (var node of diagram.getNodes())
{
    if (node.getTag().toUpperCase() == "TEST")
    {
        node.setText(myValue);
    }
} 


where 'diagram' is a reference to the client-side MindFusion.Diagramming.Diagram instance, which you get by calling $find or Diagram.find with DiagramView.ID as argument.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
girikul
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Feb 25th, 2020
Re: How to update Diagram node text in client side timer using js
Reply #2 - Feb 25th, 2020 at 8:14am
Print Post  
Hi,
When I try to get nodes using Digram.GetNodes() like below
function OnSuccess(data, status, req) {
if (status == "success")
{
var Diagram = document.getElementById('<%= diagramView.ClientID%>');
var obj = Diagram.getNodes();
}
}
It did not work and I get error as
TypeError: Diagram.getNodes is not a function
Is there mistake in my code?

Also
for (var node of diagram.getNodes())

doesn't compile.

Regards
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: How to update Diagram node text in client side timer using js
Reply #3 - Feb 25th, 2020 at 8:30am
Print Post  
Hi,

getElementById returns the view's DIV element. Call MindFusion.Diagramming.Diagram.find(id) or $find(id) instead to get the JS Diagram model object. E.g. see the OrgBrowser example for modifying diagram on client side from web service results.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
girikul
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Feb 25th, 2020
Re: How to update Diagram node text in client side timer using js
Reply #4 - Feb 25th, 2020 at 8:58am
Print Post  
Hi,
I tried with both methods as
MindFusion.Diagramming.Diagram.find(id) or $find(id) but still no luck. It is null somehow.

function OnSuccess(data, status, req) {
if (status == "success")
{
var Diagram = MindFusion.Diagramming.Diagram.find('diagramView');
var diagram1 = $find('diagramView');
var obj = Diagram.getNodes();
}
}

This gives me following errors as
Uncaught Sys.ArgumentException: Sys.ArgumentException: MindFusion.Diagramming.Diagram does not derive from Sys.Component.
Parameter name: type

and

Uncaught TypeError: Cannot read property 'getNodes' of null
at Object.OnSuccess [as success]

Regards,
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: How to update Diagram node text in client side timer using js
Reply #5 - Feb 25th, 2020 at 9:31am
Print Post  
Hi,

If I remember correctly UpdatePanel adds some prefix to DOM element IDs. Try passing '<%= diagramView.ClientID%>' as argument to the find method instead of 'diagramView'.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
girikul
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 4
Joined: Feb 25th, 2020
Re: How to update Diagram node text in client side timer using js
Reply #6 - Feb 28th, 2020 at 4:51pm
Print Post  
Hi Slavcho,
Sorry for late reply.
The issue was that, I was using control in .ascx page. It works OK in .aspx page. Thanks a lot for your help.
Regards,
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3146
Joined: Oct 19th, 2005
Re: How to update Diagram node text in client side timer using js
Reply #7 - Mar 2nd, 2020 at 7:19am
Print Post  
Hi,

It works from user control too in my test:

user control ascx -
Code
Select All
<%@ Control
    Language="C#"
    AutoEventWireup="true"
    CodeBehind="DiagUserCtrl.ascx.cs"
    Inherits="UserCtrlTest.DiagUserCtrl" %>

<%@ Register
    TagPrefix="diag"
    Namespace="MindFusion.Diagramming.WebForms"
    Assembly="MindFusion.Diagramming.WebForms" %>

<diag:DiagramView
    ID="diagView" runat="server"
    ControlLoadedScript="onControlLoaded" />

<script>

function onControlLoaded()
{
    var id = "<%= diagView.ClientID %>";
    //alert(id);
    var diagram = MindFusion.Diagramming.Diagram.find(id);
    //alert(diagram);
    var node = diagram.getFactory().createShapeNode(10, 10, 40, 40);
    node.setText("hello from user control");
}

</script>
 



default aspx -
Code
Select All
<%@ Page
    Title="Home Page"
    Language="C#"
    MasterPageFile="~/Site.Master"
    AutoEventWireup="true"
    CodeBehind="Default.aspx.cs"
    Inherits="UserCtrlTest._Default" %>

<%@ Register
    Src="~/DiagUserCtrl.ascx"
    TagPrefix="duc"
    TagName="DiagUserCtrl" %>

<asp:Content
    ID="BodyContent"
    ContentPlaceHolderID="MainContent"
    runat="server">

    <duc:DiagUserCtrl ID="test" runat="server" />

</asp:Content>
 



Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint