Diagram - JSON Import and Export

US Open Men's Singles

Brackets

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The Telerik ASP.NET Diagram control is based on the Telerik HTML5 Diagram widget, part of Kendo UI. In order to save and load data in JSON format with RadDiagram for ASP.NET AJAX, you need to reference the Kendo UI Diagram and call its save() and load() functions or create it from JSON data.

var diagram = $find( "<%= brackets.ClientID %>" ).get_kendoWidget();
var json = diagram.save(); //the diagram shapes and connections are saved in the JSON variable
//or
diagram.load( /* JSON code */ ); //load the JSON in the diagram

This ASP.NET Diagramming demo shows a possible implementation of the save/load functionality. By clicking on Download you will start a download of a .json file that contains the data of the diagram. If you click Upload you can select a .json file with data that will be used for generating a new diagram.

The set of buttons Serialize to JSON and Load from JSON provide the same functionality, however in this case you can copy and paste the data directly from the textarea that is positioned between the buttons.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Diagram.SaveLoad.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src='<%= ResolveUrl("~/Common/Scripts/beautify.js")%>'></script>
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="ajaxManager" runat="server" OnAjaxRequest="Ajax_Request" />
    <div class="demo-container size-wide">
        <div id="title-container">
            <div class="buttons">
                <telerik:RadButton RenderMode="Lightweight" ID="DownloadBtn" Text="Download" OnClientClicked="downloadJSON" AutoPostBack="false" runat="server" />
                <telerik:RadAsyncUpload RenderMode="Lightweight" ID="jsonUpload" runat="server" HideFileInput="true" AllowedFileExtensions=".json" Width="75px" UploadedFilesRendering="BelowFileInput" OnFileUploaded="JsonUpload_FileUploaded" OnClientFileUploaded="fileUploadedHandler" MaxFileSize="2097152">
                    <Localization Select="Upload" />
                </telerik:RadAsyncUpload>
            </div>
            <h2>US Open Men's Singles</h2>
            <h3>Brackets</h3>
        </div>
        <telerik:RadDiagram ID="brackets" runat="server" Width="800" Height="480">
            <ClientEvents OnLoad="diagram_load" />
            <ShapeDefaultsSettings Width="140" Height="30">
                <StrokeSettings Color="#fff" />
            </ShapeDefaultsSettings>
            <ShapesCollection>
                <telerik:DiagramShape Id="nadal_winner">
                    <FillSettings Color="#f18100" />
                    <ContentSettings Text="R. Nadal" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="djokovic_quarterfinal">
                    <FillSettings Color="#8cb20f" />
                    <ContentSettings Text="N. Djokovic" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="youzhny_quarterfinal">
                    <FillSettings Color="#ae5e08" />
                    <ContentSettings Text="M. Youzhny" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="murray_quarterfinal">
                    <FillSettings Color="#d75234" />
                    <ContentSettings Text="A. Murry" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="wawrinka_quarterfinal">
                    <FillSettings Color="#f8c43a" />
                    <ContentSettings Text="S. Wawrinka" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="gasquet_quarterfinal">
                    <FillSettings Color="#5f9fee" />
                    <ContentSettings Text="R. Gasquet" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="ferrer_quarterfinal">
                    <FillSettings Color="#1958a6" />
                    <ContentSettings Text="D. Ferrer" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="robredo_quarterfinal">
                    <FillSettings Color="#6da000" />
                    <ContentSettings Text="T. Robredo" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="nadal_quarterfinal">
                    <FillSettings Color="#f18100" />
                    <ContentSettings Text="R. Nadal" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="djokovic_semifinal">
                    <FillSettings Color="#8cb20f" />
                    <ContentSettings Text="N. Djokovic" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="wawrinka_semifinal">
                    <FillSettings Color="#f8c43a" />
                    <ContentSettings Text="S. Wawrinka" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="gasquet_semifinal">
                    <FillSettings Color="#5f9fee" />
                    <ContentSettings Text="R. Gasquet" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="nadal_semifinal">
                    <FillSettings Color="#f18100" />
                    <ContentSettings Text="R. Nadal" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="djokovic_final">
                    <FillSettings Color="#8cb20f" />
                    <ContentSettings Text="N. Djokovic" Color="#fff" />
                </telerik:DiagramShape>
                <telerik:DiagramShape Id="nadal_final">
                    <FillSettings Color="#f18100" />
                    <ContentSettings Text="R. Nadal" Color="#fff" />
                </telerik:DiagramShape>
            </ShapesCollection>
            <ConnectionsCollection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="djokovic_quarterfinal" />
                    <ToSettings ShapeId="djokovic_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="youzhny_quarterfinal" />
                    <ToSettings ShapeId="djokovic_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="murray_quarterfinal" />
                    <ToSettings ShapeId="wawrinka_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="wawrinka_quarterfinal" />
                    <ToSettings ShapeId="wawrinka_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="gasquet_quarterfinal" />
                    <ToSettings ShapeId="gasquet_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="ferrer_quarterfinal" />
                    <ToSettings ShapeId="gasquet_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="robredo_quarterfinal" />
                    <ToSettings ShapeId="nadal_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="nadal_quarterfinal" />
                    <ToSettings ShapeId="nadal_semifinal" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="djokovic_semifinal" />
                    <ToSettings ShapeId="djokovic_final" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="wawrinka_semifinal" />
                    <ToSettings ShapeId="djokovic_final" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="gasquet_semifinal" />
                    <ToSettings ShapeId="nadal_final" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="nadal_semifinal" />
                    <ToSettings ShapeId="nadal_final" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="djokovic_final" />
                    <ToSettings ShapeId="nadal_winner" />
                </telerik:DiagramConnection>
                <telerik:DiagramConnection>
                    <FromSettings ShapeId="nadal_final" />
                    <ToSettings ShapeId="nadal_winner" />
                </telerik:DiagramConnection>
            </ConnectionsCollection>
        </telerik:RadDiagram>
    </div>
    <script type="text/javascript">
        //<![CDATA[
function getAjaxManager() { return $find("<%= ajaxManager.ClientID %>"); }
        //]]>
    </script>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <div id="diagram-json-container">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button ID="SerializeJSON" Text="Serialize to JSON" OnClientClicked="serializeToJSON" AutoPostBack="false" runat="server" />
                        </li>
                        <li>
                            <qsf:TextBox ID="JsonText" runat="server" TextMode="MultiLine" Height="200" Width="500">
                                <ClientEvents OnLoad="jsonText_load" />
                            </qsf:TextBox>
                        </li>
                        <li>
                            <qsf:Button ID="LoadJSON" Text="Load from JSON" OnClientClicked="loadFromJSON" AutoPostBack="false" runat="server" />
                        </li>
                    </ul>
                </div>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?