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
  1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Adding layer with HTML data in it at creation time.

Adding layer with HTML data in it at creation time.

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
        });


8 Replies
SG Shyam G Syncfusion Team 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 


CC Chad Carey 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?

SG Shyam G Syncfusion Team 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 


CC Chad Carey 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?

CC Chad Carey 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?

SG Shyam G Syncfusion Team 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 


CC Chad Carey 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.

SG Shyam G Syncfusion Team 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 


Loader.
Up arrow icon