Setting x & y parameters, loaded in json

3 posts, 0 answers
  1. George
    George avatar
    7 posts
    Member since:
    Dec 2013

    Posted 03 Jun 2015 Link to this post

    Hello,

    We're trying to layout our diagram by specifying x & y parameters, and loading the datasource at runtime, via json.

    This is the client-side code we have:

    <script type="text/javascript">
       var serviceBaseUrl = "@dataAccessBase";
        var datasource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: serviceBaseUrl + "datasource",
                    type: "POST",
                    dataType: "json"
                }
            },
        });
        var conndatasource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: serviceBaseUrl + "dataconnectors",
                    type: "POST",
                    dataType: "json"
                }
            }
        });
      
        $(document).ready(function () {
            $("#@Model.SysName-diagram").kendoDiagram({
                dataSource: datasource,
                connectionsDataSource: conndatasource,
     
               layout: {
                            horizontalSeparation: 30,
                            verticalSeparation: 30
                                   type: "layered",

                            subtype: ""

                        },            
                 editable: false,
                 shapeDefaults: {
                    type: "rectangle",
                    content: {
                      template: "#= name #"
                    },
                    width: 200,
                    height: 50,
                    hover: {
                      fill: "Orange"
                }
            },
            connectionDefaults: {
                stroke: {
                    color: "#979797",
                    width: 1
                },
                startCap: "FilledCircle",
                endCap: "ArrowEnd",
                content:{
                    template:"#= label#"
                }
            },
     
            autoBind: true
            });
        });
    </script>

    And the server-side code is:

    public JsonResult dataconnectors()
    {
        var ret = new List<object>
            {
                new {from = "1", to = "2", label = ""},
                new {from = "1", to = "3", label = ""},
            };
     
        return Json(ret, JsonRequestBehavior.DenyGet);
    }
     
    public JsonResult datasource()
    {
        var ret = new List<object>
            {
                new {id = "1", name = "A1", x = "10", y = "10" },
                new {id = "2", name = "B2", x = "30", y = "30" },
                new {id = "3", name = "B3", x = "60", y = "60" },
            };
     
        return Json(ret, JsonRequestBehavior.DenyGet);
    }
     

    The question is, how do I use those x and y parameters, client-side to take effect?

     

    Thanks in advance.

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 05 Jun 2015 Link to this post

    Hello George,

    You need to disable the layout otherwise it will override the shape positions. See this snippet for reference.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. George
    George avatar
    7 posts
    Member since:
    Dec 2013

    Posted 05 Jun 2015 in reply to T. Tsonev Link to this post

    Perfect!

    Thanks :-)

Back to Top