Using Windows Forms Control as a Node on a Diagram in MVC

[Neill]

This link takes reference:

https://www.syncfusion.com/forums/33028/essential-diagram-custom-properties-and-custom-controls

I want to be able to add a CheckBox to my diagram that can save the checkbox state.

The above link reads: "InDepth\ControlsGalore sample that ships with the product."

I am using version 15.3.0.33 and cannot find any reference to this sample, perhaps it is outdated as the link is a post from 2005.

How can I use custom controls, such as CheckBox, on the diagram in my ASP.NET MVC application?

I also cannot find the Symbol Designer application that is referenced so I can create my own Symbols?

Thanks,

Neill

[Aravind Ravi]

Hi Neil, 

 

By using the HTML node we can able to add check box to the Node. The shape property of node allows you to set the type of node and to create a HTML node it should be set as HTML. Please refer below code snippet for how to embed HTML node in the diagram 

 

List < DiagramNode > nodes = new List < DiagramNode > (); 

            nodes.Add(new DiagramNode() { 

                Id = "node1", 

                    Width = 100, 

                    Height = 100, 

                    OffsetX = 100, 

                    OffsetY = 100, 

                    Shape = new { type = "HTML", content= "<div style='height:100%;width:100%;'><input type='checkbox' value='checked'></div>" 

}, 

            }); 

            ViewBag.nodes = nodes; 

 

For more information about node shapes, please refer to below UG documentation link 

 

UG link: https://ej2.syncfusion.com/aspnetmvc/documentation/diagram/shapes/#html 

 

Regards 

Aravind Ravi 

[Neill]

Thank you Aravind,

I figured it out after reading through the documentation.

I see however that an HtmlNode cannot be exported to an image, which is a requirement so i'm not able to use that.

Thanks

Neill

[Aravind Ravi]

Hi Neil, 

 

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/10213/how-to-print-or-export-the-html-and-native-node-into-image-format 

 

Regards 

Aravind Ravi 

[Neill]

Hi Aravind,

That's great, I will definitely look into it. 

For saving the diagram, in javascript, I save the diagram JSON string to the database using diagram.save().

If I use the HtmlNode to add a CheckBox to the diagram, how can I save the CheckBox checked / unchecked status to the diagram JSON string?

Thank,

Neill

[Aravind Ravi]

Hi Neil, 

 

By default, in the diagram, if we use saveDiagram method to save the diagram means only diagram properties are get saved as string. After JSON object get returned from the saveDiagram method, parse the JSON string, so that you can get the individual objects in the diagram i.e. nodes, connectors. In that get the nodes and check if the checkbox is checked or not. If it is checked means , then change the content of the HTML node, if it does not checked means then do not change the content of the HTML node. After change the content again stringfy the JSON object and load the diagram. So that when you load the diagram, diagram is loaded with checkbox as checked. Please refer to the below code snippet 

 

var save; 

    document.getElementById('Save').onclick = function() { 

       save =  diagram.saveDiagram(); 

    } 

    document.getElementById('Load').onclick = function() { 

        var data = JSON.parse(save); 

        if (document.getElementById('check').checked) { 

        data["nodes"][0].shape.content = "<div style='height:100%;width:100%;'><input type='checkbox' value='checked' checked></div>"; 

        } 

        data = JSON.stringify(data); 

        diagram.loadDiagram(data); 

    } 

 

In the above code snippet, we have changed the content of the HTML node for the first node, similarly you can change the content of the other HTML node in JSON object, if check box is checked or not. 

 

Regards 

Aravind Ravi 

[Neill]

Thank you for the information.

I can't seem to access the checkbox element directly?

Class code:

    HtmlNode HtmlNode = new HtmlNode();

    HtmlNode.TemplateId = "htmlTemplateCheckBox";

    model.Nodes.Add(HtmlNode);

View:

$('#btnSave').off().on('click', function () {

            var diagram = $("#Pictogram").ejDiagram("instance"); 

            var save = diagram.save();

            console.log(save.nodes[1]);      

        });

Apologies, had to add an image as the editor doesn't seem to allow script tags.

The console.log(save.nodes[1]) text:

1. {fillColor: "white", borderColor: "black", borderWidth: 0, borderDashArray: "", opacity: 1, …}
1. addInfo: {}
2. borderColor: "black"
3. borderDashArray: ""
4. borderWidth: 0
5. children: []
6. collapseIcon: {shape: "none", width: 13, height: 10, margin: {…}, offset: {…}, …}
7. connectorPadding: 0
8. constraints: 11026430
9. contentAlignment: "xmidymid"
10. cornerRadius: 0
11. cssClass: ""
12. excludeFromLayout: false
13. expandIcon: {shape: "none", width: 13, height: 10, margin: {…}, offset: {…}, …}
14. fillColor: "white"
15. gradient: null
16. height: 50
17. horizontalAlign: "left"
18. inEdges: []
19. isExpanded: true
20. labels: []
21. marginBottom: 0
22. marginLeft: 0
23. marginRight: 0
24. marginTop: 0
25. maxHeight: 0
26. maxWidth: 0
27. minHeight: 0
28. minWidth: 0
29. name: "node_OFXr"
30. offsetX: 200
31. offsetY: 150
32. opacity: 1
33. outEdges: []
34. paletteItem: {enableScale: true, wrapping: "nowrap", label: null, margin: {…}}
35. parent: ""
36. pathData: ""
37. pivot: {x: 0.5, y: 0.5}
38. points: []
39. ports: []
40. rotateAngle: 0
41. scale: "meet"
42. shadow: {distance: 5, angle: 45, opacity: 0.7}
43. shape: ""
44. source: ""
45. templateId: "htmlTemplateCheckBox"
46. textBlock: null
47. type: "html"
48. verticalAlign: "top"
49. visible: true
50. width: 150
51. zOrder: 1
52. _cssClass: ""
53. _scaled: false
54. _shape: "html"
55. _status: "update"
56. _type: "node"
57. __proto__: Object

shape: "" ?

How do I access the checkbox element? 

EDIT - I'm following this: https://help.syncfusion.com/aspnetmvc/diagram/shapes

Thanks,

Neill

[Aravind Ravi]

Hi Neill, 

In EJ1 MVC we do not have support to change the HTML content at run time, because we set the template in nodeTemplate script in EJ1. So we do not able to access the HTML element used in node and cannot able to change it during save and load the diagram. 

Regards 

Aravind Ravi