Importing the file with ejdiagram contents that has been exported

[AB]

Hello Aravind Ravi,

I have a few questions regarding the exporting and importing the contents of the ejDiagram.

I have ej-diagram in which user can create the HTML NODES and after all the addition I am trying to export the contents of my ej-diagram using the following function:

//Export the Nodes in the digaram

$scope.ExportDiagram = function(){

var diagram =  angular.element("#diagram").ejDiagram("instance");

var options = {

fileName : "EventsDiagram",

mode : ej.datavisualization.Diagram.ExportModes.Download,

format : ej.datavisualization.Diagram.FileFormats.SVG,

stretch : "fill"

};

diagram.exportDiagram(options);

}

* I am able to get the SVG file now I wanted to know if there is a way to import this file back to the ej-diagram so that the shapes I have created would be automatically created. I tried searching in the documentation but could not find anything.

* When I use the MODE as DATA in the EXPORT function then nothing happens. It does not throw the error as well so I am just confused why it does not export.

[Aravind Ravi]

Hi AB, 

Please find the response for queries in below table 

I am able to get the SVG file now I wanted to know if there is a way to import this file back to the ej-diagram so that the shapes I have created would be automatically created. I tried searching in the documentation but could not find anything.

By default, in the diagram, we want to set the nativeTemplate in the script. We cannot able to directly load the exported SVG in the diagram.

When I use the MODE as DATA in the EXPORT function then nothing happens. It does not throw the error as well so I am just confused why it does not export.

HTML node cannot be exported to image format, like JPEG, PNG, and BMP. It is by design that while exporting, Diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible. Hence, this limitation.  We have already mentioned this in the documentation  https://help.syncfusion.com/angularjs/diagram/shapes#html

Regards 

Aravind Ravi 

[AB]

Hello Aravind Ravi,

Thanks a lot for the response.

I did not understand completely what is meant by "By default, in the diagram, we want to set the nativeTemplate in the script."

Does that mean I should use the type NATIVE while creating the NODES instead of HTML shapes? Can you please provide some explanation.

[Aravind Ravi]

Hi AB, 

 

In the diagram , same as HTML node , for SVG node we need to set Node type as ‘Native’.  Also you need to define the id of the SVG template by using the templateId property of node. Create a script for the templateId , in that we define the SVG content. So that respective content of the SVG has been bind for the SVG node. Please refer below code snippet 

 

var nodes = [{ 

    name: "NativeNode", 

    offsetX: 100, 

    offsetY: 100, 

 

    //Sets type as Native 

    type: ej.datavisualization.Diagram.Shapes.Native, 

 

    //Sets id of SVG element 

    templateId: "svgTemplate", 

    labels: [{ 

        text: "Mail" 

    }] 

}]; 

 

<!--dependency scripts--> 

<script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script> 

<!--define html element--> 

<script id="svgTemplate" type="text/x-jsrender"> 

    <g> 

        <path d="M 58.813 0 H 3.182 L 30.998 24.141 L 58.813 0 Z M 32.644 34.425 C 32.133 34.87 31.567 35.095 31 35.095 S 29.867 34.87 29.353 34.425 L 1 9.826V 60 H 61 V 9.826 L 32.644 34.425Z"></path> 

    </g> 

</script> 

 

For more information about native node, please refer below documentation 

 

UG documentation: https://help.syncfusion.com/angularjs/diagram/shapes#native 

 

Regards 

Aravind Ravi 

 

 

 

 

[AB]

Hello Aravind Ravi,

Thanks a lot for the response. I have a few doubts with regards to using the Native type.

Bit of background:

As of now, I am using the ej-diagram with the HTML type where I am associating a button with each NODE and on click of it, I am displaying some modals where users can provide some values. Now, I am trying to convert it to NATIVE type so that I can use the functionalities of the EXPORT and IMPORT  but for some reason, I am unable to add BUTTON within each SVG element that I am creating. Is it possible to add a button within each SVG element I am creating and add the click event? Following is the code:

https://jsfiddle.net/B_AV_B/df3j2w98/5/

* Also, If I continue to use the HTML type then I would not have any alternative approach to EXPORT and IMPORT the NODE and templates back to my ej-diagram right?

* If I use NATIVE then I can export the diagram that I have created and I can import them back, right?

I have some confusion as I am proceeding so if I need to change the complete thing then I needed a few confirmation so wanted to get your clarification.

Following is the screenshot from my HTML type diagram:

[Aravind Ravi]

Hi AB, 

Please find the response for queries in below table 

I am unable to add BUTTON within each SVG element that I am creating. Is it possible to add a button within each SVG element I am creating and add the click event?	Button is an HTML element, we cannot able to add directly in SVG element.   For more information please refer to below link  https://stackoverflow.com/questions/39917883/button-element-inside-svg#:~:text=is%20an%20HTML%20element,directly)%20in%20an%20SVG%20element.&text=This%20works%20in%20most%20browsers,ll%20work%20just%20fine%20too.
Also, If I continue to use the HTML type then I would not have any alternative approach to EXPORT and IMPORT the NODE and templates back to my ej-diagram right?	Yes, Currently, support to export the diagram into image format with the HTML nodes is not available. Since while exporting, the diagram will be drawn in a canvas, and then canvas is converted to image format. Currently, drawing in a canvas equivalent from all possible HTML is not feasible and rendering the SVG content in a canvas and convert canvas to image will get the security issues in IE browser.
If I use NATIVE then I can export the diagram that I have created and I can import them back, right?	Like HTML node, Native node also cannot be exported to image format.  We have mentioned this limitation in the documentation. Please refer to below UG documentation link  UG Link: https://help.syncfusion.com/angularjs/diagram/shapes#native

Regards 

Aravind Ravi 

[AB]

Thanks a lot, Aravind Ravi for the response.

If that's the case, is there an alternative approach that I can try? What do you suggest there is no other option?

[Aravind Ravi]

Hi AB,  

  

Currently, support to export the diagram into image format with the native and HTML nodes is not available. Since while exporting, the diagram will be drawn in a canvas, and then canvas is converted to image format. However, by using the Syncfusion Essential PDF library we can convert the HTML content to the image.  Syncfusion Essential PDF library is used, which supports HTML Content to Image conversion by using the advanced Qt WebKit rendering engine.   

  

We have already prepared a KB for How to print or export the HTML and Native node into image format using PDF. Similarly, you can refer this KB to export the HTML node into image format.  

  

KB: https://www.syncfusion.com/kb/8160/export-html-native-node-into-image-format  

  

Regards  

Aravind Ravi  

[AB]

Thanks again Aravind for the response. I will try this and reach out to you in case if I have any further doubts.

[Aravind Ravi]

Hi AB, 

 

Thanks for the update 

 

Regards 

Aravind Ravi