I have created a drag-and-drop workflow builder where all of the shapes are complex (i.e. non-standard shapes comprised of several appended SVG commands). Each of these shapes was created using one of six (6) custom visual templates ("Author", "Transmittal", "Review", "Print", "Publish" and "Email"). Unfortunately, I cannot rely on the built-in diagram.save method to store the finished diagrams as complex shapes reference visual templates which are functions and the JSON serialization process strips out all non-data (i.e. no functions). When I attempt to reload the diagram from the file system, the diagram is correctly recreated but the complex shapes are replaced by squares.
The solution to this problem recommended to me was to include a "type" property with each complex shape and then interrogate this property after diagram.load to reinstantiate the correct visual template for each shape. At a high level, this sounds very logical and straight-forward. While I have successfully assigned a "type" to each shape and have encountered no problems saving and subsequently re-loading a diagram, I have yet to figure out the correct way change existing shapes after re-load per the visual template functions originally used to create them. The approach I envision (but have yet to figure out the specifics) goes something like this:
- Re-load the diagram using the diagram.load method.
- Enumerate all of the shapes in a diagram by looping through the ShapesCollection.
- For each shape in the collection, somehow assign the correct visual template to the shape based on its "type" property.
Am I close? <grin> Is there a better way to go about doing what I'm trying to achieve? For what it's worth, I did try an alternative approach to this problem. Knowing that the crux of the dilemma centers around the fact that serialization strips function info from the result object, I tried saving the raw diagram.save object without serialization. It appears that diagram.save does indeed save all of the original diagram info as I was able to successfully reload the diagram from this object and everything looked great but... I have yet to find a successful way to move the raw object from the client-side Javascript where it is created over to the the codebehind and subsequently write the object to disk. The conventional approach I would normally take would be to use a hidden form field (e.g. <asp:HiddenField...), retrieve it in the codebehind and then do whatever I need to do. Unfortunately, hidden fields do not allow storing objects (just text) so all I ever end up in the codebehind is the string "[object Object]" instead of the actual object itself. <grrr>
Any help you can provide me with with either of the two approaches above would be very much appreciated. Thanks.
Lloyd
1 Answer, 1 is accepted
The described by you approach is exacyly the one I would suggest you in order to achieve the desired custom shape loading. You can use the redrawVisual() method of the shapes in order to redraw the already loaded template.
You can also take a look at the approach demonstrated in the followin How-to article:
https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/diagram/how-to/changing-shape-visual-elements
Regards,
Vessy
Progress Telerik