[Solved] Need help with diagram calling remote api

[B Narahari]

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,

[Stefan]

Hello, Narahari,

Thank you for the provided information.

The shapes data an schema looks good, if I used the same data the shapes are correctly shown. Only the template should be changed to "#= dataItem.LE_Country #", or "#= dataItem.LE_Code#".

For the connections properties, depending on the logic all of the properties in the returned JSON has to be mapped to the schema properties like:

schema: {
    model: {
        id: "id",
        fields: {
            id: { from: "Id", type: "number", editable: false },//Field form the JSON which is the 'ID'
            from: { from: "FromShapeId", type: "number" },//Field form the JSON which is 'from'
            to: { from: "ToShapeId", type: "number" }, //Field form the JSON which is the 'to'
            fromX: { from: "FromPointX", type: "number" },//Field form the JSON which is the 'fromX'
            fromY: { from: "FromPointY", type: "number" },//Field form the JSON which is the 'fromY'
            toX: { from: "ToPointX", type: "number" },//Field form the JSON which is the 'toX'
            toY: { from: "ToPointY", type: "number" },//Field form the JSON which is the 'toY'
        }
    }
}

I hope this is helpful.

Regards,
Stefan
Progress Telerik