New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Import from JSON

You can import the shapes and connections of RadDiagram from a data object in JSON format on the client. This is done in two simple steps (Example 1):

  1. Get a reference to the client-side object of the underlying Kendo UI diagram as described in the Overview help article.

  2. Call the load method of the client-side object of the diagram and pass a JSON object literal with the diagram data as an argument. The JSON object literal uses a specific format that you can check by exporting an already declared diagram in JSON format.

Example 1: Import a diagram from a JSON object literal.

<telerik:RadDiagram ID="RadDiagram1" runat="server">
    <ClientEvents OnLoad="onLoad" />
</telerik:RadDiagram>
<script type="text/javascript">
    function onLoad(diagram) {
        var diagramWidget = diagram.get_kendoWidget();
        var json = {
            "shapes": [{
                "id": "DiagramShape1",
                "content": {
                    "align": "center middle",
                    "text": "Diagram Shape 1",
                    "color": "#fff",
                    "fill": {
                        "color": "#fff"
                    }
                },
                "type": "rectangle",
                "x": 160,
                "y": 125,
                "width": 140,
                "height": 30,
            }],
            "connections": []
        }
        diagramWidget.load(json);
    }
</script>

You can find a live example of the import from JSON functionality in the JSON Import and Export demo.

See Also

In this article