VisualTemplate with Drag & Drop

2 posts, 0 answers
  1. Peerayu
    Peerayu avatar
    6 posts
    Member since:
    May 2014

    Posted 26 Jan 2015 Link to this post

    I would like to create the diagram that
    • User can drag & drop the item (Image) into the diagram.
    • User can create the connection to link each item.
    • User can save the diagram into JSON.
    • User can load the diagram from JSON

    Now, I can archive the first, second and third requirements. However, I have the problem when I try to load data from JSON. The Images are missing, and the connections also lost. I try to solve the problem by using 'visualTemplate' by setting '<ShapeDefaultsSettings Visual="visualTemplate" />', but it breaks my diagram instead. I have attached my code below.

    This is my drag & drop event
    function setDropTargetOnDiagram(element) {
         $telerik.$(element).kendoDropTarget({
              drop: function (e) {
                   var draggable = e.draggable,
                        element = e.dropTarget,
                        diagram = element.getKendoDiagram();
     
                   if (draggable && draggable.hint) {
                        var item = draggable.hint.data("data"),
                             offset = draggable.hintOffset,
                             point = new kendo.dataviz.diagram.Point(offset.left, offset.top),
                             transformed = diagram.documentToModel(point);
     
                   item.id += "_" + generateUUID();
                   item.x = transformed.x;
                   item.y = transformed.y;
     
                   var shape = createCustomShape(item);                               
                 diagram.addShape(shape);
                   }
              }
         });
    }
     
    function createCustomShape(item) {
         var shape = new kendo.dataviz.diagram.Shape(item);
         var image = new kendo.dataviz.diagram.Image({
              source: "../Images/Diagram/" + item.content.ImageName,
              x: 0,
              y: 0,
              width: item.width,
              height: item.height,
              stroke: {
                   width: 0
              }
         });
         var textBlock = new kendo.dataviz.diagram.TextBlock({
              text: item.content.CustomText,
                   color: "#000",
                   fontSize: 12,
                   x: item.content.TextX,
                   y: item.content.TextY
         });
     
         shape.visual.append(image);
         shape.visual.append(textBlock);
     
         return shape;
    }

    This is my dragItem
    <div class="dragItem" data-data='{"id": "StartProcess", "content": {"CustomText":"Start", "TextX":"18", "TextY":"70", "ImageName":"64Play.png"}, "width":"64", "height":"64"}'>
         <asp:Image ID="imgPersonal" runat="server" ImageUrl="~/Images/Diagram/64Play.png" />
    </div>

    This is the code for Save and Load JSON
    function saveJSON() {
         var json = diagram.save();
         var jsonStr = Sys.Serialization.JavaScriptSerializer.serialize(json);
          
         var txtDiagramSave= document.getElementById("txtDiagramSave");
         txtDiagramSave.value = js_beautify(jsonStr);
    }
     
    function loadJSON() {
         var txtDiagramSave= document.getElementById("txtDiagramSave");
         diagram.load(Sys.Serialization.JavaScriptSerializer.deserialize(txtDiagramSave.value));
    }

    This is my saved JSON
    {
        "shapes": [{
            "id": "StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25",
            "hover": {},
            "cursor": "pointer",
            "content": {
                "align": "center middle",
                "text": "",
                "CustomText": "Start",
                "TextX": "18",
                "TextY": "70",
                "ImageName": "64Play.png"
            },
            "selectable": true,
            "serializable": true,
            "enable": true,
            "type": "rectangle",
            "path": "",
            "autoSize": true,
            "visual": null,
            "x": 134,
            "y": 104,
            "minWidth": 20,
            "minHeight": 20,
            "width": 65,
            "height": 65,
            "editable": {
                "connect": true
            },
            "connectors": [{
                "name": "Top",
                "description": "Top Connector"
            }, {
                "name": "Right",
                "description": "Right Connector"
            }, {
                "name": "Bottom",
                "description": "Bottom Connector"
            }, {
                "name": "Left",
                "Description": "Left Connector"
            }, {
                "name": "Auto",
                "Description": "Auto Connector"
            }],
            "rotation": {
                "angle": 0
            },
            "undoable": false
        }, {
            "id": "Personal_3993f4ff-956e-4d46-a939-18c84fcb4162",
            "hover": {},
            "cursor": "pointer",
            "content": {
                "align": "center middle",
                "text": "",
                "CustomText": "Personal",
                "TextX": "8",
                "TextY": "70",
                "ImageName": "64ManPencil.png"
            },
            "selectable": true,
            "serializable": true,
            "enable": true,
            "type": "rectangle",
            "path": "",
            "autoSize": true,
            "visual": null,
            "x": 295,
            "y": 99,
            "minWidth": 20,
            "minHeight": 20,
            "width": 65,
            "height": 65,
            "editable": {
                "connect": true
            },
            "connectors": [{
                "name": "Top",
                "description": "Top Connector"
            }, {
                "name": "Right",
                "description": "Right Connector"
            }, {
                "name": "Bottom",
                "description": "Bottom Connector"
            }, {
                "name": "Left",
                "Description": "Left Connector"
            }, {
                "name": "Auto",
                "Description": "Auto Connector"
            }],
            "rotation": {
                "angle": 0
            },
            "undoable": false
        }],
        "connections": [{
            "from": {
                "id": "StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25"
            },
            "to": {
                "id": "Personal_3993f4ff-956e-4d46-a939-18c84fcb4162"
            },
            "id": "h4upyHsjPm",
            "hover": {
                "stroke": {}
            },
            "cursor": "pointer",
            "content": {
                "align": "center middle",
                "text": "",
                "color": "#444444"
            },
            "selectable": true,
            "serializable": true,
            "enable": true,
            "startCap": "none",
            "endCap": "ArrowEnd",
            "points": [],
            "stroke": {
                "width": 2,
                "color": "#6c6c6c"
            },
            "selection": {
                "handles": {
                    "width": 8,
                    "height": 8,
                    "fill": {
                        "color": "white"
                    },
                    "stroke": {
                        "color": "#444444"
                    }
                }
            }
        }]
    }

    However, after I loaded the saved JSON, it was changed to be like this. (I lost the showing images, and connection is blank)
    {
        "shapes": [{
            "id": "StartProcess_1242084a-6aa2-4320-8b89-accf2cd22f25",
            "hover": {
                "opacity": 0.2
            },
            "cursor": "pointer",
            "content": {
                "align": "center middle",
                "text": "",
                "color": "#444444",
                "CustomText": "Start",
                "TextX": "18",
                "TextY": "70",
                "ImageName": "64Play.png"
            },
            "selectable": true,
            "serializable": true,
            "enable": true,
            "type": "rectangle",
            "path": "",
            "autoSize": true,
            "visual": null,
            "x": 134,
            "y": 104,
            "minWidth": 20,
            "minHeight": 20,
            "width": 65,
            "height": 65,
            "editable": {
                "connect": true
            },
            "connectors": [{
                "name": "Top",
                "description": "Top Connector"
            }, {
                "name": "Right",
                "description": "Right Connector"
            }, {
                "name": "Bottom",
                "description": "Bottom Connector"
            }, {
                "name": "Left",
                "Description": "Left Connector"
            }, {
                "name": "Auto",
                "Description": "Auto Connector"
            }],
            "rotation": {
                "angle": 0
            },
            "stroke": {
                "width": 0
            },
            "fill": {
                "color": "#4cc5da"
            },
            "connectorDefaults": {
                "fill": {
                    "color": "#444444"
                },
                "stroke": {
                    "color": "white"
                },
                "hover": {
                    "fill": {
                        "color": "white"
                    },
                    "stroke": {
                        "color": "#444444"
                    }
                }
            },
            "undoable": false
        }, {
            "id": "Personal_3993f4ff-956e-4d46-a939-18c84fcb4162",
            "hover": {
                "opacity": 0.2
            },
            "cursor": "pointer",
            "content": {
                "align": "center middle",
                "text": "",
                "color": "#444444",
                "CustomText": "Personal",
                "TextX": "8",
                "TextY": "70",
                "ImageName": "64ManPencil.png"
            },
            "selectable": true,
            "serializable": true,
            "enable": true,
            "type": "rectangle",
            "path": "",
            "autoSize": true,
            "visual": null,
            "x": 295,
            "y": 99,
            "minWidth": 20,
            "minHeight": 20,
            "width": 65,
            "height": 65,
            "editable": {
                "connect": true
            },
            "connectors": [{
                "name": "Top",
                "description": "Top Connector"
            }, {
                "name": "Right",
                "description": "Right Connector"
            }, {
                "name": "Bottom",
                "description": "Bottom Connector"
            }, {
                "name": "Left",
                "Description": "Left Connector"
            }, {
                "name": "Auto",
                "Description": "Auto Connector"
            }],
            "rotation": {
                "angle": 0
            },
            "stroke": {
                "width": 0
            },
            "fill": {
                "color": "#4cc5da"
            },
            "connectorDefaults": {
                "fill": {
                    "color": "#444444"
                },
                "stroke": {
                    "color": "white"
                },
                "hover": {
                    "fill": {
                        "color": "white"
                    },
                    "stroke": {
                        "color": "#444444"
                    }
                }
            },
            "undoable": false
        }],
        "connections": []
    }

    I try to solve the load JSON problem by using "visualTemplate" like this, but it breaks the diagram
    function visualTemplate(options) {
         var diagram = kendo.dataviz.diagram;
         var g = new diagram.Group();
         var dataItem = options.dataItem;
     
         g.append(createCustomShape(dataItem));
         return g;
    };


  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 29 Jan 2015 Link to this post

    Hi Peerayu,

    Currently complex shapes that include elements like images cannot be exported in the JSON object literal. There is a logged feature request item on the matter: http://feedback.telerik.com/Project/108/Feedback/Details/136031-allow-export-to-json-for-complex-shapes. You can use it to vote for the feature, comment it and follow its status.

    For the time being you can try setting a visual template in the ShapeDefaultsSettings property of RadDiagram. In the visual template method you can load different elements depending on a setting of the current shape, for example its id or type. A similar implementation is used for the Overview demo of the control: http://demos.telerik.com/aspnet-ajax/diagram/examples/overview/defaultcs.aspx.

    The visual template setup you tried most probably does not work, because you create a new shape in the method, however you are applying the visual template to an already created shape, which result in a problem. Please check the correct format the method in the following help article: http://www.telerik.com/help/aspnet-ajax/diagram-shape-templates.html

    Regards,
    Slav
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top