ShapesCollection and ConnectionsCollection not updated after postback

[Henry]

Hi,

is there a work-around so that the ConnectionsCollection and ShapesCollection will be updated after a post-back?

Thanks!

 

 

 

[Henry]

Hi,

I am able to post-back to the server the diagram's json object.

 

<telerik:RadDiagram ID="theDiagram" runat="server" Width="500" Height="500">
    <%--<ClientEvents OnSelect="diagramSelect" OnItemBoundsChange="diagramItemBoundsChange" OnLoad="diagram_load" />--%>
    <ShapesCollection>
        <telerik:DiagramShape Id="EagleShape" Type="circle">
            <FillSettings Color="#fca651" />
            <ContentSettings Text="Eagle" Color="#fff" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="ZebraShape" Type="circle">
            <FillSettings Color="#e26c60" />
            <ContentSettings Text="Zebra" Color="#fff" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="ButterflyShape" Type="circle">
            <FillSettings Color="#a84186" />
            <ContentSettings Text="Butterfly" Color="#fff" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="PeacockShape" Type="circle">
            <FillSettings Color="#fca651" />
            <ContentSettings Text="Peacock" Color="#fff" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="ElephantShape" Type="circle">
            <FillSettings Color="#e26c60" />
            <ContentSettings Text="Elephant" Color="#fff" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="SpiderShape" Type="circle">
            <FillSettings Color="#a84186" />
            <ContentSettings Text="Spider" Color="#fff" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="KangarooShape" Type="circle">
            <FillSettings Color="#fca651" />
            <ContentSettings Text="Kangaroo" Color="#fff" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="OwlShape" Type="circle">
            <FillSettings Color="#e26c60" />
            <ContentSettings Text="Owl" Color="#fff" />
        </telerik:DiagramShape>
        <telerik:DiagramShape Id="BeeShape" Type="circle">
            <FillSettings Color="#a84186" />
            <ContentSettings Text="Bee" Color="#fff" />
        </telerik:DiagramShape>
    </ShapesCollection>
</telerik:RadDiagram>

 

<telerik:RadButton ID="testButton" runat="server" Text="test" OnClientClicked="testButton_ClientClicked" AutoPostBack="false"></telerik:RadButton>

 

<telerik:RadScriptBlock ID="uxRadScriptBlock" runat="server">
    <script type="text/javascript">
        function testButton_ClientClicked(sender, eventArgs) {
            var diagram = $find("<%= theDiagram.ClientID %>");
            var diagramWidget = diagram.get_kendoWidget();
            var diagramJson = diagramWidget.save();
            console.log(diagramJson);

            $.ajax(
            {
                type: "POST",
                async: true,
                url: 'http://localhost/Web/Diagram.aspx',
                data: JSON.stringify(diagramJson),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    console.log("SUCCESS:" + msg);
                },
                error: function (msg) {
                    console.log("ERROR:" + msg);
                }
            });
        }
    </script>
</telerik:RadScriptBlock>

 

protected void Page_Load(object sender, EventArgs e)
{
    var context = HttpContext.Current;

    if (context.Request.ContentType.Contains("json"))
    {

        var jsonString = String.Empty;

        context.Request.InputStream.Position = 0;

        using (var inputStream = new StreamReader(context.Request.InputStream))
        {
            jsonString = inputStream.ReadToEnd();
        }


        var results = JsonConvert.DeserializeObject<dynamic>(jsonString);

        var test = results["shapes"][0]["content"]["text"];
    }
}

 

 Although I able to go through one-by-one the diagram's shape & connection properties in the "result" dynamic variable :

results["shapes"][0]["content"]["text"]

results["shapes"][0]["content"]["color"]

results["shapes"][0]["content"]["align"]​

 

I was wondering if there's an easier way to populate the fields back to a server object.

I'm trying the following, but can't seem how to make it work:

 

JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
DiagramShapeConverter diagramShapeConverter =  new DiagramShapeConverter();
DiagramShape diagramShape = new DiagramShape();
diagramShape = diagramShapeConverter.Serialize(results["shapes"][0], javaScriptSerializer);

 

Please help how to use the "Converter", I see several of them, for DiagramShapeConverter, DiagramShapeConnectorConverter, etc

 

​

 

Thanks!

 

 

 

[Ianko]

Hi Henry,

RadDiagram is entirely client-side designed control and changes that occur on the client are not persisted somehow to the server. I am afraid, also, that there is no easy workaround for that to work. 

The only possible approach I can think of is to save and reload the JSON data of the RadDiagram—http://demos.telerik.com/aspnet-ajax/diagram/examples/saveload/defaultcs.aspx.


Regards,
Ianko
Telerik

[Henry]

I tried the following but got an error, please see below

  

An exception of type 'System.Exception' occurred in Telerik.Web.UI.dll but was not handled in user code

 

private JsonSerializerSettings _jsonSettings = new JsonSerializerSettings
{
    TypeNameHandling = TypeNameHandling.All,
    TypeNameAssemblyFormat = FormatterAssemblyStyle.Full
};

 

 

RadDiagramConverter radDiagramConverter = new RadDiagramConverter();
JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
var dict = JsonConvert.DeserializeObject<Dictionary<string, object>>(jsonString, _jsonSettings);
var radDiagram = radDiagramConverter.Deserialize(dict, typeof(RadDiagram), javaScriptSerializer);

 

I wish to convert the json string back to a new RadDiagram server-side object

- as RadDiagram server-side object doesn't seem to retain any changes made by the user (e.g move shape, .. x y coordinates does not update).

 

[Henry]

Hi Ianko,

Thanks for your feedback. Yes, it is indeed a client-side control.

Just wondering how to use the RadDiagramConverter ,

- what is for

- any sample code you can provide me ?

 

 

[Ianko]

Hello Henry,

RadDiagramConverter is a helper class that is used internally in RadDiagram to serialize some diagram options to the client. 

Its design is not to be used in a custom solution with diagram and I don't see how it could be useful in your scenario. 

Regards,
Ianko
Telerik

[Henry]

Thanks Ianko. I've managed to do a work-around to persist any client-side changes (e.g. shape's x & y axis movement) to the server by (1) save raddiagram's json to hidden field (2) access hidden field's json and re-build raddiagram.

A bit crude, but seems to work. Any future plans to make this control more server side? Use case would be to do server-side business rule processing after user creates a shape or connect shapes.

 some sample code below for sharing :

 

<telerik:RadScriptBlock ID="uxRadScriptBlock" runat="server">
    <script type="text/javascript">
        function testButton_ClientClicked(sender, eventArgs) {
            var diagram = $find("<%= theDiagram.ClientID %>");
                var diagramWidget = diagram.get_kendoWidget();
                var diagramJson = diagramWidget.save();
                console.log(diagramJson);

                var hidden = document.getElementById('<%= uxHiddenField.ClientID %>');
                hidden.value = JSON.stringify(diagramJson);
            }
    </script>
</telerik:RadScriptBlock>

<telerik:RadAjaxLoadingPanel ID="uxDiagramFormControlRadAjaxLoadPanel" runat="server"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="uxDiagramFormControlRadAjaxPanel" runat="server" LoadingPanelID="uxDiagramFormControlRadAjaxLoadPanel">
    <telerik:RadDiagram ID="theDiagram" CssClass="" runat="server" Editable="true" EnableViewState="true" ViewStateMode="Enabled">
        <%--<ClientEvents OnSelect="diagramSelect" />--%>
        <ShapesCollection>
            <telerik:DiagramShape Id="EagleShape" Type="circle" Editable="true" Selectable="true" X="10" Y="20">
                <FillSettings Color="#fca651" />
                <ContentSettings Text="Eagle" Color="#fff" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="ZebraShape" Type="circle">
                <FillSettings Color="#e26c60" />
                <ContentSettings Text="Zebra" Color="#fff" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="ButterflyShape" Type="circle">
                <FillSettings Color="#a84186" />
                <ContentSettings Text="Butterfly" Color="#fff" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="PeacockShape" Type="circle">
                <FillSettings Color="#fca651" />
                <ContentSettings Text="Peacock" Color="#fff" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="ElephantShape" Type="circle">
                <FillSettings Color="#e26c60" />
                <ContentSettings Text="Elephant" Color="#fff" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="SpiderShape" Type="circle">
                <FillSettings Color="#a84186" />
                <ContentSettings Text="Spider" Color="#fff" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="KangarooShape" Type="circle">
                <FillSettings Color="#fca651" />
                <ContentSettings Text="Kangaroo" Color="#fff" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="OwlShape" Type="circle">
                <FillSettings Color="#e26c60" />
                <ContentSettings Text="Owl" Color="#fff" />
            </telerik:DiagramShape>
            <telerik:DiagramShape Id="BeeShape" Type="circle">
                <FillSettings Color="#a84186" />
                <ContentSettings Text="Bee" Color="#fff" />
            </telerik:DiagramShape>
        </ShapesCollection>
    </telerik:RadDiagram>
    <asp:HiddenField ID="uxHiddenField" runat="server" />
    <telerik:RadButton ID="testButton" runat="server" Text="test" OnClientClicked="testButton_ClientClicked" OnClick="testButton_Click"></telerik:RadButton>
</telerik:RadAjaxPanel>

 

 

        protected void Page_Load(object sender, EventArgs e)
        {

            //Position shapes in a circle
            for (var i = 0; i < theDiagram.ShapesCollection.Count; i++)
            {
                var shape = theDiagram.ShapesCollection[i];
                shape.X = 180 * Math.Cos(2 * Math.PI * i / theDiagram.ShapesCollection.Count - Math.PI / 2) + 200;
                shape.Y = 180 * Math.Sin(2 * Math.PI * i / theDiagram.ShapesCollection.Count - Math.PI / 2) + 200;
            }
}

 

    protected void testButton_Click(object sender, EventArgs e)
    {
        var jsonString = uxHiddenField.Value;
        var results = JsonConvert.DeserializeObject<dynamic>(jsonString);

        DiagramShapesCollection diagramShapesCollection = new DiagramShapesCollection();
        foreach (var shape in results["shapes"])
        {
            DiagramShape diagramShape = new DiagramShape();

            foreach (var connector in shape["connectors"])
            {
                DiagramShapeConnector diagramShapeConnector = new DiagramShapeConnector();
                diagramShapeConnector.Description = connector["description"];
                diagramShapeConnector.Name = connector["name"];
                diagramShapeConnector.Position = connector["position"];

                diagramShape.ConnectorsCollection.Add(diagramShapeConnector);
            }

            diagramShape.ContentSettings.Align = shape["content"]["align"];
            diagramShape.ContentSettings.Color = shape["content"]["color"];
            //diagramShape.ContentSettings.Html = shape["content"]["html"];
            //diagramShape.ContentSettings.IsDefault
            diagramShape.ContentSettings.Text = shape["content"]["text"] + " test ";
            //diagramShape.Editable
            diagramShape.EditableSettings.Connect = Convert.ToBoolean(shape["editable"]["connect"]);
            //diagramShape.EditableSettings.IsDefault
            diagramShape.FillSettings.Color = shape["fill"]["color"];
            //diagramShape.FillSettings.IsDefault
            //diagramShape.FillSettings.Opacity = Convert.ToDouble(shape["fill"]["opacity"]);
            diagramShape.Height = Convert.ToDouble(shape["height"]);
            diagramShape.HoverSettings.FillSettings.Color = shape["hover"]["color"];
            //diagramShape.HoverSettings.FillSettings.IsDefault
            //diagramShape.HoverSettings.FillSettings.Opacity = Convert.ToDouble(shape["hover"]["opacity"]);
            //diagramShape.HoverSettings.IsDefault
            diagramShape.Id = shape["id"];
            diagramShape.MinHeight = Convert.ToDouble(shape["minHeight"]);
            diagramShape.MinWidth = Convert.ToDouble(shape["minWidth"]);
            diagramShape.Path = shape["path"];
            diagramShape.RotationSettings.Angle = Convert.ToDouble(shape["rotation"]["angle"]);
            //diagramShape.RotationSettings.IsDefault
            diagramShape.Selectable = Convert.ToBoolean(shape["selectable"]);
            //diagramShape.Source
            diagramShape.StrokeSettings.Color = shape["stroke"]["color"];
            //diagramShape.StrokeSettings.DashType = shape["stroke"]["dashType"];
            //diagramShape.StrokeSettings.IsDefault
            diagramShape.StrokeSettings.Width = Convert.ToDouble(shape["stroke"]["width"]);
            diagramShape.Type = shape["type"];
            //diagramShape.Visual = shape["Visual"];
            diagramShape.Width = Convert.ToDouble(shape["width"]);
            diagramShape.X = Convert.ToDouble(shape["x"]);
            diagramShape.Y = Convert.ToDouble(shape["y"]);

            diagramShapesCollection.Add(diagramShape);
        }

        theDiagram.ShapesCollection.Clear();
        foreach (var diagramShape in diagramShapesCollection)
        {
            theDiagram.ShapesCollection.Add((DiagramShape)diagramShape);
        }
    }
}

 

[Ianko]

Hi Henry,

The implemented solution seems accurate to me. Indeed, it is complex and crude, although, at this moment, it is the only possible way to achieve the required functionality. 

Regards,
Ianko
Telerik