Edit this page

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" />
<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": []

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

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article