Diagrams with multiple parents

[George]

Hi,

I am trying to use Kendo dataviz diagrams in asp.net MVC to represent a hierarchy where each node can have more than one parent. Is this possible at all? And if so, how do you represent the data? 

Thank you

[George]

Just to give a bit more colour on this. We have a hierarchical structure where a node might have more than one parent, e.g.:

N1 —> N2
N1 —> N3

N4 —> N2
N4 —> N3

We have tried the Diagram control but can’t get the control to recognise that the children of N1 and N4 are the same and therefore duplicate them.

We have tried specifying the DataSource Model Id property to get the desired effect but that doesn’t seem to behave as intended:
           
  .DataSource(dataSource => dataSource                                
          .Read(read => read.Action("GetHierarchy", "Portfolio"))                               
          .Model(m => m.Children("Children").Id("Id")))

Does the control handle this structure and if so how can we get this to work?

The controller action to get data:

public ActionResult GetHierarchy()
        {
        var node2 = new Node { Id = 2 }; 
       var node3 = new Node { Id = 3 };

var node1 = new Node
                {           
                    Id = 1, 
                    Children = new Collection<Node>         
                    {
                        node2, 
                        node3,
                     }
                };

var node4 = new Node 
{
        Id = 4, 
                    Children = new Collection<Node>
                    {         
                node2, 
  node3, 
}                                           
                },           

return this.Json(new Collection<Node> { node1, node4 }, JsonRequestBehavior.AllowGet);
        }

 

The node class:


    public class Node
    {
        public ICollection<Node> Children { get; set; }
        public int Id { get; set; }
    }

The view:

 
@using Kendo.Mvc.UI 

@{
ViewBag.Title = "Node Hierarchy";
}
 

<script>

function visualTemplate(options) {
        var dataviz = kendo.dataviz;
         var g = new dataviz.diagram.Group();
       var dataItem = options.dataItem;

       g.append(new dataviz.diagram.Rectangle({
           width: 210,
           height: 75,
           stroke: {           
   width: 0
        },

        background: "#aaa"}));
 

       g.append(new dataviz.diagram.TextBlock({
           text: dataItem.Id,
           x: 85,
           y: 20,
           color: "#fff"}));

       return g;
}

</script>

<div class="diagram-wrapper" style="margin: auto;">

    @(Html.Kendo().Diagram().Deferred().Name("diagram")          
.DataSource(dataSource => dataSource                                
        .Read(read => read.Action("GetHierarchy", "Node"))
        .Model(m => m.Children("Children").Id("Id")))           
.Layout(l => l.Type(DiagramLayoutType.Layered).Subtype(DiagramLayoutSubtype.Mindmaphorizontal))           
.ShapeDefaults(sd => sd                     
        .Visual("visualTemplate")
       .Editable(false)
        .Rotatable(false)
       .Resizable(false))
.ConnectionDefaults(cd => cd
        .Stroke(s => s
        .Color("#979797")
        .Width(2))
        .EndCap("ArrowEnd")
        .StartCap("FilledCircle"))
    )

</div>

[Hristo Germanov]

Hello George,

With the current implementation the diagram has no support for a graphs. We working on this scenario and soon we will release implementation that will allow you to bind your graph data to the diagram. Please excuse us for the inconvenience that this may cause.

The possible workaround is to manually create shapes one by one with x and y.

Regards,
Hristo Germanov
Telerik

 

 

[Holger]

Hello Hristo,

is graph support already available?

Thanks,
Holger

[Hristo Germanov]

Hello guys,

Currently this feature is not supported but we are working to resolve this issue for our major release of Kendo UI. So stay tuned.

Regards,
Hristo Germanov
Telerik

 

 

[Christian]

Hey Hristo, 

can you tell us when the new release will be ready, so that we can use the feature described above? 
Can you give us an example to do this manually? Adding and connecting shapes in asp.net MVC? 

Thanks for helping us, 
Christian

[Hristo Germanov]

Hello Christian,

The next official release is scheduled for next week.

I haven't such example but in general you need to create a diagram with empty options then you need to add shapes and connections manually with diagram.addShape() and diagram.connect().

Regards,
Hristo Germanov
Telerik

 

 

[Holger]

Hello Hristo,

Sorry to bother again, but the release is out and I would like to ask whether graph support is available now?

Thanks,
Holger

[T. Tsonev]

Hi,

The new data binding relies on two data sources - one for the connections and one for the shapes.
This allows many-to-many connections and representation of graph structures.

You can take a look at the new demos for a sample.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Martin]

I realize this is a very old thread, but are there any dojo examples of a diagram where elements (shapes) have multiple parents?  The link to "new demos" as of this date goes to the general Diagram overview which doesn't represent the topic.

[Nikolay]

Hi Martin,

the new data binding relies on two data sources - one for connections and one for shapes. You may see this in this help article and live in this Dojo.

Regards,

Nikolay

[Martin]

Thank you very much for the example.  It gives me a better starting place to learn from.

Tom

[Nikolay]

Hi Martin,

You are most welcome!

Nikolay

[William]

Im trying this:

 

 

addChild: function () {
            var to = diagram.add(diagram.createShape());
            var shapes = diagram.shapes;
            var total = shapes.length;
            alert("total "+total);
            if(total>1){
                
                var toIndex = total-1;
                var from;
                //obtenemos el shape con el id
                var id = diagram.select(diagram.shapes.id);
                alert(id);
                if(id!=""){
                    var i=0;
                    for(i; i < diagram.shapes.length; i++){
                        if(diagram.shapes[i].id == id){
                            from = diagram.shapes[i];
                            break;
                        }
                    }
                    diagram.connect(from, to);
                }
            }
        },

 

butwhat i get is two shapes, and one is undefined

[Vessy]

Hi William,

Can you elaborate a bit on the exact scenario you are trying to achieve? It will help a lot if you send us a dojo sample demonstrating the experienced problem, so we can examine the problematic configuration at hand.

Regards,
Vessy
Telerik by Progress