Hi,
I am trying to display a diagram with the following code. I took this from the "Editing" sample posted in Telerik site. After ensuring that it works with the Telerik's data services on my page, I am trying to use it with my own service. This doesn't work. Can someone please help?
Please note: I have intentionally commented the connection piece to first debug the data source piece. I am also attaching a sample of my connections service which returns connections between two entities using LE_Code & F_LE_Code (whose values can be same sometimes. So, we need to add a filter to filter out the items where LE_Code & F_LE_Code are the same). Please suggest how should I specify the connections code and schema?
Code
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle({
width: 240,
height: 67,
stroke: {
width: 0
},
fill: "#e8eff7"
}));
return g;
}
function onDataBound(e) {
var that = this;
setTimeout(function () {
that.bringIntoView(that.shapes);
}, 0);
}
//function createDiagram() {
//var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
var shapesDataSource = {
batch: false,
transport: {
read: {
url: "Server/SQLService.svc/GetLEData",
dataType: "jsonp"
}//,
//update: {
// url: serviceRoot + "/DiagramShapes/Update",
// dataType: "jsonp"
//},
//destroy: {
// url: serviceRoot + "/DiagramShapes/Destroy",
// dataType: "jsonp"
//},
//create: {
// url: serviceRoot + "/DiagramShapes/Create",
// dataType: "jsonp"
//}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "PID", type: "number", editable: false },
LE_Code: { type: "string" },
LE_Country: { type: "string" }
}
}
}
};
var connectionsDataSource = {
batch: false,
transport: {
read: {
url: serviceRoot + "/DiagramConnections",
dataType: "jsonp"
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "Id", type: "number", editable: false },
from: { from: "FromShapeId", type: "number" },
to: { from: "ToShapeId", type: "number" },
fromX: { from: "FromPointX", type: "number" },
fromY: { from: "FromPointY", type: "number" },
toX: { from: "ToPointX", type: "number" },
toY: { from: "ToPointY", type: "number" }
}
}
}
};
$("#diagram").kendoDiagram({
dataSource: shapesDataSource,
layout: {
type: "tree",
subtype: "tipover",
underneathHorizontalOffset: 140
},
shapeDefaults: {
visual: visualTemplate,
content: {
template: "#= dataItem.JobTitle #",
fontSize: 17
}
},
connectionDefaults: {
stroke: {
color: "#586477",
width: 2
}
},
dataBound: onDataBound
});
Sample JSON data returned from my GetLEData service
[{"LE_Code":"CO001","LE_Country":"USA","PID":1},{"LE_Code":"CO002","LE_Country":"Canada","PID":2},{"LE_Code":"CO100","LE_Country":"USA","PID":3},{"LE_Code":"CO101","LE_Country":"China","PID":4},{"LE_Code":"CO105","LE_Country":"United States","PID":5},{"LE_Code":"CO110","LE_Country":"United States","PID":6},{"LE_Code":"CO180","LE_Country":"Canada","PID":7},{"LE_Code":"CO210","LE_Country":"Brazil","PID":8}]
Sample JSON data returned from my connections service
[{"AccountID":4,"Country":"Singapore","F_LE_Code":"CO510","Function":4,"LE_Code":"CO510","Label":"OSP","PID":1,"Performed":0,"Return":0,"Treatment":"Cost +","TreatmentID":2},{"AccountID":4,"Country":"Singapore","F_LE_Code":"CO510","Function":4,"LE_Code":"CO510","Label":"OSP","PID":2,"Performed":0,"Return":0,"Treatment":"Cost +","TreatmentID":2},{"AccountID":10,"Country":"China","F_LE_Code":"CO780","Function":7,"LE_Code":"CO527","Label":"Royalty","PID":58,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"AccountID":10,"Country":"United States","F_LE_Code":"CO780","Function":7,"LE_Code":"CO100","Label":"Royalty","PID":59,"Performed":1,"Return":20,"Treatment":"% Sales","TreatmentID":1},{"AccountID":5,"Country":"Isle Of Man","F_LE_Code":"CO790","Function":2,"LE_Code":"CO790","Label":"CSP","PID":60,"Performed":1,"Return":1,"Treatment":"Cost +","TreatmentID":2},{"AccountID":10,"Country":"China","F_LE_Code":"CO780","Function":7,"LE_Code":"CO527","Label":"Royalty","PID":61,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"AccountID":10,"Country":"United States","F_LE_Code":"CO780","Function":7,"LE_Code":"CO100","Label":"Royalty","PID":62,"Performed":1,"Return":-2,"Treatment":"% Sales","TreatmentID":1}]
Appreciate your help!
Thanks,