Need help with binding external data and setting up connections

[B Narahari]

Hi,

I am trying to create a diagram hierarchy for some company data. I started with the demo "Editing" diagram posted on the site (http://dojo.telerik.com/uNUrU) and tried to update the data service. But, my diagram is not working. My code and the data returned by my services is shown below. I have commented out the connections piece to debug the data source issue. Appreciate your help in fixing the data issue and also pointers on how to defined the connections object and schema -

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: "https://Service/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
                       });

 

JSON sample from 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}]

 

JSON sample from 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":"Austria","F_LE_Code":"CO780","Function":7,"LE_Code":"CO746","Label":"Royalty","PID":57,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"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}]

 

 

[Alex Hajigeorgieva]

Hi,

Thank you for the provided data.

I have used it to create a Kendo UI Diagram with the same demo that you have referenced in the thread.

However, I am going to need some more information regarding the expected hierarchy and connections:

- How are the connections going to be made? 
- Do they have a unique identifier?
- Which field can serve as a "from" field? (shape id)
- Which field will serve as a "to" field? (shape id)
- What is the hierarchy that is desired to be achieved? (a screenshot will also be helpful)

Here is the diagram for your reference without any connections. I assumed that the id is the "PID":

http://dojo.telerik.com/@bubblemaster/ISate

More information regarding the connections structure is available at:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/connection#fields

Regards,
Alex Hajigeorgieva
Progress Telerik

[B Narahari]

Hi Alex,

Thank you for looking into my issue and helping with the troubleshooting steps. Few notes -
* Sorry, I didn't mention it but I am able to load the data statically (local binding). The main issue is when I try to bind this control with my internal WCF service, it is not returning any data. I tried your code too and just replaced the static data with my service call below and it doesn't return any data
transport: {
                               read: {
                                   url: "https://Service/SQLService.svc/GetLEData",
                                   dataType: "jsonp"
                               }

* Please provide the markup and schema for connections data service too.

My response to your queries are -

How are the connections going to be made? 
In the connections data service, each line item has a LE_Code & F_LE_Code. They denote the 'from ShapeId' & 'To SHapeId' respectively for the connections.
- Do they have a unique identifier?
"LECode" is their unique value.
- Which field can serve as a "from" field? (shape id)
F_LE_Code
- Which field will serve as a "to" field? (shape id)
LE_Code
- What is the hierarchy that is desired to be achieved? (a screenshot will also be helpful)
Tree hierarchy

[Alex Hajigeorgieva]

Hi,

Thank you for the provided responses. It seems to me that the issue now is to read the data provided by the service.

Could you please provide shed some light on the data/object/format which is returned by the"https://Service/SQLService.svc/GetLEData" service? The data source expects to receive an array of objects. If the service returns an object, then we need to show where the array is in this object:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data

also if the schema data is used, set schema total, too:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[B Narahari]

Hi Alex,

Both the services are returning an array of objects. Please find the attached screenshots which display the object structure for the data and connection web services (by executing a jQuery AJAX call). Hopefully, this provides a clear picture of our service outputs.

Please note:

1. Initially, I tried the Kendo AngularJS directive but ran into few issues and then had to fall back to my custom directive call.
2. For many records in the connection service, 'LE_Code' & 'F_LE_Code' has the same values. So, we need to filter out these records and use only the ones where 'LE_Code' & 'F_LE_Code' have different values. Not sure where to implement this filter in the code.

Thanks

 

[B Narahari]

Hi Alex,

After updating the transport section as shown below, I am able to see the shapes pulled from our web service. But, I am unable to make the connections work. Please look at the fiddle below and let me know the missing part.

http://jsfiddle.net/v2c17w42/1/

 

transport: {
                read: function (options) {
                    $.ajax({
                        url: 'https://Service/SQLService.svc/GetTPDataAll/',
                        success: function (data) {

Thanks,

Narahari

 

 

[Alex Hajigeorgieva]

Hi, Narahari,

Great news! Very pleased to hear that.

Now over to the connections data source.

The only missing thing is the schema from and to fields of the connections data source. They should be linking the shape ids. In other words, the connection represents the link between a shape with id 1 to a shape with id 2. In your concrete case, I just changed the shape schema id to point to LE_Code to show you that it works:

http://dojo.telerik.com/@bubblemaster/oMatiZ

Documentation reference: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-connectionsDataSource

Kind Regards,
Alex Hajigeorgieva
Progress Telerik