Diagrams with multiple parents

11 posts, 0 answers
  1. George
    George avatar
    6 posts
    Member since:
    Sep 2012

    Posted 08 Jul 2014 Link to this post

    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
  2. George
    George avatar
    6 posts
    Member since:
    Sep 2012

    Posted 09 Jul 2014 in reply to George Link to this post

    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>


























  3. Kendo UI is VS 2017 Ready
  4. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 10 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 19 Sep 2014 in reply to Hristo Germanov Link to this post

    Hello Hristo,

    is graph support already available?

    Thanks,
    Holger
  6. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 23 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Christian
    Christian avatar
    3 posts
    Member since:
    Jun 2014

    Posted 22 Oct 2014 in reply to Hristo Germanov Link to this post

    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
  8. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 24 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 05 Jan 2015 in reply to Hristo Germanov Link to this post

    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
  10. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 07 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. William
    William avatar
    2 posts
    Member since:
    Jun 2016

    Posted 06 Jul in reply to T. Tsonev Link to this post

    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

  12. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 08 Jul Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready