Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
140825 | Nov 8,2018 02:10 PM UTC | Mar 4,2019 08:52 AM UTC | Angular - EJ 2 | 42 |
![]() |
Tags: Diagram |
let node: NodeModel = {
id: 'node1', width: 300, height: 160, offsetX: 250, offsetY: 180, annotations: [{ content: 'Node'}];
};
|
To create HTML element (button): The below div should be defined before diagram div.
|
<div id='button_div' style="height:100%;width:100%;border:none; background-color:white;"><img src="./app/diagram/diagram/Nodes_1.png" width="100%;height:50px"/></div> |
Angular : To get the button and show as content of the Node |
ngAfterViewInit(): void {
let node: NodeModel = this.diagram.nodes[6];
// ‘button_div’ id of div which want to show as content of node.
node.shape = { type: 'HTML', content: document.getElementById('button_div') };
this.diagram.dataBind();
}
|
Hi Ramya,Thank you for that sample. It works.I've modified that example. Now it has two shapes (which is an image). Each shape have another small circle shape on the right top which is also an image.I'm using binding to set the visibility of the small image. For the first shape, the small image is visible and for the second one, the small image is set as hidden.This works fine with binding.Now I've added a button. On click of the button, I'm trying to set visible for the small image of the second shape. But it is not enabling. Could you please help me? I've uploaded the modified sample.Regards,Kannan
Attachment: AngularEJ2HTML_ShapesBinding_c321fe31.zip
function exportHTMLContent() {
var diagram = $("#diagramCore").ejDiagram("instance");
// get the diagram content
var htmlData = diagram.getDiagramContent();
// get the diagram bounds
var size = diagram.getDiagramBounds();
var jsonResult = { htmlData: { htmlData: htmlData, width: size.width } };
$.ajax({
type: "POST",
crossDomain: true,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: JSON.stringify(jsonResult),
traditional: true,
async: false,
});
} |
[WebMethod]
public static object GenerateDocument(object htmlData)
{
Dictionary<string, object> htmlContent = (Dictionary<string,object>)htmlData;
// set the QTBinaries path
string qtBinariesPath =HttpContext.Current.Server.MapPath("~/App_Data/QtBinaries");
DiagramExportingUtility diagram = new DiagramExportingUtility();
// convert the html content to base64String image format.
return diagram.ConvertImage(htmlContent["htmlData"].ToString(),Convert.ToInt32(htmlContent["width"]), qtBinariesPath);
} |
$.ajax({
. . . . . .
success: function (data) {
// export the image into different format with certain export option.
diagram.exportImage(data.d, { fileName: "diagram", format: "png", region: "content" });
},
}); |
ngAfterViewInit() {
// get the diagram content
this.diagram.widget.getDiagramContent();
// get the diagram bounds
this.diagram.widget.getDiagramBounds();
}
|
import {
DiagramModule, PrintAndExportService
} from '@syncfusion/ej2-angular-diagrams';
|
Syncfusion.EJ
Syncfusion.EJ.Web
Syncfusion.HtmlConverter.Base
Syncfusion.Pdf.Base |
libeay32.dll
libssl32.dll
ssleay32.dll
|
Hi Ravi,Export is happening. Thank you.But, when export is processing, the image of the whole page is overlapped (since we have created one more div)Also our product have more no of nodes (like 100), the export is taking long time, more than 5 mins. Any idea to fix this?Regards,Kannan
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.
This page will automatically be redirected to the sign-in page in 10 seconds.