[Solved] Setting x & y parameters, loaded in json

[George]

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.

[T. Tsonev]

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

 

 

[George]

Perfect!

Thanks :-)