This is a migrated thread and some comments may be shown as answers.

Setting x & y parameters, loaded in json

2 Answers 46 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
George
Top achievements
Rank 1
George asked on 03 Jun 2015, 08:44 AM

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 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 05 Jun 2015, 08:18 AM

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!
 
0
George
Top achievements
Rank 1
answered on 05 Jun 2015, 11:08 AM

Perfect!

Thanks :-)

Tags
Diagram
Asked by
George
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
George
Top achievements
Rank 1
Share this question
or