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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding layer with HTML data in it at creation time.

Thread ID:

Created:

Updated:

Platform:

Replies:

146646 Aug 12,2019 04:15 PM UTC Aug 19,2019 05:21 AM UTC JavaScript - EJ 2 8
loading
Tags: Diagram
Chad Carey
Asked On August 12, 2019 04:15 PM UTC

Trying to find the best method to do the following and I am not sure if this is the way to go. So we have a org chart diagram. On this diagram we would like to display some table data about it on the diagram somewhere so that when we export/print, it shows up.

My first thought was to add a layer, put a node in the layer and then load HTML into it from some source (like a partial view) and place that HTML layer in one of the corners of the entire diagram or figure out how to place it so it doesn't overlap diagram nodes.

Is this the best way to go about this or is there some other kind of object type that can display something like this on a diagram? 

Do you have any examples of adding a layer with a node using nothing but JS? 

this is what I was trying to do during the create event but it doesn't seem to work and I suspect I'm missing something.


var node = {
            id: 'htmlNode1', offsetX: 0, offsetY: 0, height: 500, width: 400, strokeColor: 'red', strokeWidth: 5,
            shape: {type:'HTML',content:'HELLO WORLD'}
        }

        diagram.addLayer({
            id: 'testLayer',
            objects: node,
            visible: true,
            zIndex: 100
        });


Shyam G [Syncfusion]
Replied On August 13, 2019 06:54 AM UTC

Hi Chad, 

Query 
Response 
Is this the best way to go about this or is there some other kind of object type that can display something like this on a diagram?  
Yes, the best way is to use our HTML node to display a table data in diagram. 
Do you have any examples of adding a layer with a node using nothing but JS?  
 
this is what I was trying to do during the create event but it doesn't seem to work and I suspect I'm missing something. 
In your code example, you have set a node object in layers objects collection in the addLayer method, but the node object should be passed as a second parameter in addLayer method. Please refer to a code example, help documentation and sample below. 

Code example: 
 
  //Initializes diagram control 
    var diagram = new ej.diagrams.Diagram({  
        created: function create() { 
          var diagram = document.getElementById("diagram").ej2_instances[0]; 
          //define node 
          var node = { 
            id: 'htmlNode1', offsetX: 0, offsetY: 0, height: 500, width: 400, strokeColor: 'red', strokeWidth: 5, 
            shape: {type:'HTML',content:'HELLO WORLD'} 
        }; 
        // add layers 
          diagram.addLayer({ 
            id: 'testLayer', 
            objects: [], 
            visible: true, 
            zIndex: 0 
        }, [node]) 
       
         
    }); 
    diagram.appendTo('#diagram'); 
 
 
 


Regards, 
Shyam G 


Chad Carey
Replied On August 13, 2019 04:19 PM UTC

Just realized you can't export the html data. What option is there to do something like this and allow for it to be exported into an image format with the diagram?

Also, is there a way to get the print option to actually print the entire diagram if it doesn't fit in the window? (it scrolls)

Another question is, is there a way to add titles to the diagrams so that when you print or export you can display something?

Shyam G [Syncfusion]
Replied On August 14, 2019 11:19 AM UTC

Hi Chad, 
 
Query 
Response 
Just realized you can't export the html data. What option is there to do something like this and allow for it to be exported into an image format with the diagram? 
We can export native or HTML node to image format using webkit rendering engine. Please refer to a KB link and sample below. 
 
 
 
Also, is there a way to get the print option to actually print the entire diagram if it doesn't fit in the window? (it scrolls) 
Yes, the diagram content within/outside the viewport will be printed/exported in a single image. In webkit, we don’t have option to print multiple image. Please refer to the sample provided above. 
Another question is, is there a way to add titles to the diagrams so that when you print or export you can display something? 
You can use our TextNode to add titles in the diagram control. Please refer to a help documentation.  
 
 
 
 
 
Regards, 
Shyam G 


Chad Carey
Replied On August 14, 2019 02:23 PM UTC

So... I started using the webkit to for the HTML to an image and we need an explanation of how this actually works because CrowdStrike started going NUTS with critical no nos because the webkit binaries or whatever were writing something and executing something every time we tried to run the code to generate the image.

It looks as if it writes a file under w3wp.exe into a temp location and the executes that file when it runs. Can you give us any incite on this and how this process actually works so we can determine how to make sure CrowdStrike does not flag this process as some kind of injection/virus?

Chad Carey
Replied On August 14, 2019 08:06 PM UTC

Also, when adding a layer and a node into that layer, why does setting offsetX and offsetY not seem to do anything? I assume there is no way to just place a node at the top/center or such?

Shyam G [Syncfusion]
Replied On August 15, 2019 12:10 PM UTC

Hi Chad, 

Query 
Response 
So... I started using the webkit to for the HTML to an image and we need an explanation of how this actually works because CrowdStrike started going NUTS with critical no nos because the webkit binaries or whatever were writing something and executing something every time we tried to run the code to generate the image. 
 
It looks as if it writes a file under w3wp.exe into a temp location and the executes that file when it runs. Can you give us any incite on this and how this process actually works so we can determine how to make sure CrowdStrike does not flag this process as some kind of injection/virus? 

We use webkit rendering engine to convert HTML to image format. Please refer to a help documentation to know more about webkit. 




Also, when adding a layer and a node into that layer, why does setting offsetX and offsetY not seem to do anything? I assume there is no way to just place a node at the top/center or such? 
No, you can position the nodes with offset and add that nodes into layer. We have created a sample in which we have created nodes and added into layers. Please refer to a sample and help documentation below. 





Regards, 
Shyam G 


Chad Carey
Replied On August 15, 2019 03:35 PM UTC

Even if I follow this sample, it does not place the node in that new layer where I put the offsets. It always seems to show up to the right of the top right most node in the normal diagram.

Shyam G [Syncfusion]
Replied On August 19, 2019 05:21 AM UTC

Hi Chad, 

We have created a sample by defining two layers and added nodes in it. We are unable to replicate an issue at our end. Could you please share us more details such as how you are adding nodes into layer and modify the below sample. 


Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon