Diagram - layout type and subtype do not work with addShape

[VB]

Hello,

I'm creating a diagram using the Diagram component. I'm adding my nodes using the addShape and connect methods.

The problem is that my nodes aren't positioned correctly in the window, they're one on top of the other.

I've set the layout-type and layout-subtype properties, but they don't seem to work in my case. But, by using Hierarchicaldatasource with Diagram, these properties are taken into account and the diagram is displayed correctly.

Unfortunately, this doesn't suit me because I need to customize the connections between nodes (add labels), which is not possible using hierarchical data source.



So my question is whether it's possible to take advantage of the layout-type and layout-subtype properties when adding nodes manually?


Thanks in advance

[Georgi Denchev]

Hello, VB,

The hierarchical dataSource and the diagram are two separate entities. In fact, when you specify a dataSource directly into the Diagram configuration like so:

.kendoDiagram({
 dataSource: {...config...}
})

An instance of the Hierarchical DataSource is created.

The rest of the Diagram configurations are independent from it and can be added to the Diagram itself. Here's a small sample to explain it a bit better:

let ds = new kendo.data.HierarchicalDataSource({...configs...});

$("#diagram").kendoDiagram({
 dataSource: ds,
 shapeDefaults: {
  visual: function(e){...visual logic...} // customize the appearance of the shapes.
 },
 connectionDefaults: {
  content: {
   visual: function(e) {...visual logic...} // customize the content of the connection
  }
 }
});

With the above said, you can also try to call the layout method right after you add a shape and connect it to another one. 

let shape = new Shape(...);

diagram.addShape(shape);
diagram.connect(shape, anotherShape);
// Force the diagram to take the new shape into consideration.
diagram.layout({
 type: "layered"
});

One more thing that you can try is to add the shape directly to the dataSource instead of using the addShape method.

          let shape = {
            firstName: "TEST",
            image: "elizabeth.jpg",
            lastName: "Brown",
            title: "TEST Lead",
            colorScheme: "#ef6944",
          };
          // add to the datasource.
          let added = diagram.dataSource.add(shape);
          // find the shape instance in the diagram.
          let shapeInstance = diagram.shapes.find(s => s.dataItem.uid === added.uid);
          // connect the shape to another one.
          diagram.connect(shapeInstance, diagram.shapes[6]);

          diagram.layout({
            type: "layered"
          });
          diagram.bringIntoView(diagram.shapes);

Dojo

https://dojo.telerik.com/@gdenchev/OVIhaCos 

Best Regards,

Georgi

[VB]

Hello Georgi,

Thank you for your comprehensive reply. My problem is solved thanks to you.

 

Best,

VB