ShapesCollection and ConnectionsCollection not updated after postback

8 posts, 0 answers
  1. Henry
    Henry avatar
    35 posts
    Member since:
    Mar 2009

    Posted 08 Sep 2015 Link to this post

    Hi,

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

    Thanks!
     
     
     
  2. Henry
    Henry avatar
    35 posts
    Member since:
    Mar 2009

    Posted 11 Sep 2015 Link to this post

    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!
     
     
     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 11 Sep 2015 Link to this post

    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
  5. Henry
    Henry avatar
    35 posts
    Member since:
    Mar 2009

    Posted 11 Sep 2015 in reply to Henry Link to this post

    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).


     
  6. Henry
    Henry avatar
    35 posts
    Member since:
    Mar 2009

    Posted 11 Sep 2015 in reply to Ianko Link to this post

    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 ?

     


     
  7. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 11 Sep 2015 Link to this post

    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
  8. Henry
    Henry avatar
    35 posts
    Member since:
    Mar 2009

    Posted 12 Sep 2015 Link to this post

    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);
            }
        }
    }

     

  9. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 12 Sep 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017