Kendo UI Diagram - HierarchicalDataSource - Set Connection Datasource issues

[deva subramanian]

Hi,

I have implemented the kendo ui diagram using the HierarchicalDataSource. On loading the diagram, connections between the shapes is not happening(child items).Simple code tried in the dojo https://dojo.telerik.com/OYupExUq.

<div id="diagram"></div>
<script>
  var dataSource = new kendo.data.HierarchicalDataSource({
    data: [{
      "id":"1",
      "name": "Progress",
      "items": [
        {"id":"2",
          "name": "Kendo UI",
         "items":[
           {"id":"3","name": "TreeList"},
           {"id":"4","name": "Chart"}
         ]
        },
        {"id":"5","name": "NativeScript"}
      ]
    }],
    schema: {
      model: {
        children: "items"
      }
    }
  });
  console.log(dataSource);
  $("#diagram").kendoDiagram({
    dataSource: dataSource,
    layout: {
      type: "tree",
      subtype: "down"
    },
    shapeDefaults: {
      type: "circle",
      content: {
        template: "#= name #"
      },
      width: 80,
      height: 80,
      hover: {
        fill: "Orange"
      }
    },
    connectionDefaults: {
      stroke: {
        color: "#979797",
        width: 1
      },
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
    ,
    connections:[
      {
        from: "3",
        to: "5",
        content: {
            text: "Step 1"
        },
        stroke: {
            color: "#33ccff"
        }
      }
    ]
  });
</script>

 

Also posted in stack overflow and elaborate the issue.I have not come across any examples with connection datasouce using HierarchicalDataSource.
https://stackoverflow.com/questions/52500325/kendo-ui-diagram-hierarchicaldatasource-set-connection-datasource-issues.

From the attached image the requirement is to draw the connections between "TreeList" to "NativeScript".

Let me know if this is achievable.

Thanks

Dev

[Tsvetina]

Hello Dev,

Combining a dataSource with a static list of connections in the Diagram is not a supported scenario. Here is a list of the possible ways to populate the Diagram:
1) Set shapes and connections arrays to lists of shape and connection objects.
2) Use a HierarchicalDataSource, which contains the connections between data items in its hierarchical structure. It is set through the dataSource option only.
3) Use a normal DataSource which lists the Diagram shapes and an additional DataSource listing the connections. It is assigned through the connectionsDataSource setting.

Your requirement can be achieved in the example by using dataSource and connectionDataSource settings:
http://dojo.telerik.com/@tsveti/UDErUsoF

Regards,
Tsvetina
Progress Telerik

[deva subramanian]

Hi Tsvetina,

Thanks for your response. The solution given is option 3 using the normal datasource with connectionsDataSource, which will not work for me as the datasource must me hierarchical with text and items in my case. Looks like option two is what will work for me.  I also tried few see the dojo https://dojo.telerik.com/arIlASAT.

If I undestood correct we cannot have separate connection datasource when we use option 2 HierarchicalDataSource method, so even connections between the shapes has to come from the datasource as items? correct me if i am wrong.

It would be great if you give some example dojo related to this.

Thanks 

Dev

 

[Tsvetina]

Hi Deva,

Yes, with a HierarchicalDataSource, connections cannot be specified separately. They are implied by the relation between items. For example, when a data item has child items, the Diagram will draw connections between the parent item an its child items. 

data: [{
  "id":"1",
  "name": "Progress",
  "items": [
    {"id":"2",
      "name": "Kendo UI",
     "items":[
       {"id":"3","name": "TreeList"},
       {"id":"4","name": "Chart"}
     ]
    },
    {"id":"5","name": "NativeScript"}
  ]
}]

In the above example, there are connections from Progress to Kendo UI and NativeScript and then from Kendo UI to Chart and TreeList. 
If you could show a sample of the data that you are working with and show the expected result, I will try to suggest you the best way to do it with the Diagram.

Regards,
Tsvetina
Progress Telerik

[deva subramanian]

Hi Tsvetina,

I am able to load the diagram with separate data-source for shape and connections,as the hierarchical way will not satisfy my requirements. dojo for the same https://dojo.telerik.com/uHACOxUZ

Basically I have two tables say "VP Finance" and "VP Human resource" from the attached image and trying to map the columns from left to right then save those mapping into my tables is the requirement.

The same thing is done in dojo like connecting "Accountant" to "Payroll Specialist" but while loading the diagram the alignment is bad.

         {
            "Id": 10,
            "FromShapeId": 5,
            "ToShapeId": 10
           
            }

The expected behavior is also given in the attached image. Till the end I need to maintain the diagram look like separate table even after the connections given. Also attached the similar issues facing in my development.

Can we do something about this alignment?

Thanks

Dev

 

[Tsvetina]

Hi Dev,

In this scenario, since the Diagram is not aware of the hierarchical relation between items, its layout algorithms cannot generate the required look. In such scenarios, you can consider using explicit coordinates for the shapes to render them at the needed positions.  To do this, you can add x and y coordinates to the shape items, for example:
https://dojo.telerik.com/uHACOxUZ/5

This will look better if all shapes have equal widths. You could consider doing this and following the Wrap Text example to fit the longer text into the predefined shape width.

Regards,
Tsvetina
Progress Telerik