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 +
"datac
onnectors"
,
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.