Diagram - layout type and subtype do not work with addShape

0 Answers 84 Views
Diagram Hierarchical Data Source
VB
Top achievements
Rank 1
Veteran
Iron
VB asked on 02 Aug 2023, 09:06 AM
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
Telerik team
commented on 07 Aug 2023, 08:25 AM

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
Top achievements
Rank 1
Veteran
Iron
commented on 07 Aug 2023, 11:31 AM

Hello Georgi,

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

 

Best,

VB

No answers yet. Maybe you can help?

Tags
Diagram Hierarchical Data Source
Asked by
VB
Top achievements
Rank 1
Veteran
Iron
Share this question
or