CODEWITHSUNDEEP
javascriptkendo-uitelerikdiagram
Craig Bruce
Craig Bruce

Reputation: 674

How do you influence position of connectors in a heirarchical Kendo UI Diagram

I am building an organisation chart using Kendo UI's diagramming component

I do not want the user to be able to edit the diagram as it is a read-only representation of positions they have entered previously, however I do want to display the diagram in a particular way.

The layout type I am using is tree with subtype of down. I am using the HeirarchicalDataSource as the dataSource

The default way the diagram is drawn looks like this:

kendo-default-diagram

However, my boss needs it to look like this:

enter image description here

So the parent nodes have all child nodes coming from the bottom connector.

I see no way to programmatically influence this. Please help.

Upvotes: 1

Views: 1117

Answers (1)

Oskar
Oskar

Reputation: 2607

Switching editing off is easy, just pass to your options editable: false. To have the layout similar to what you posted, play with two variables: horizontalSeparation, verticalSeparation under layout

http://dojo.telerik.com/uNOVa/2

  function createDiagram() {
    $("#diagram").kendoDiagram({
      editable: false,
      dataSource: {
        data: diagramNodes(),
        schema: {
          model: {
            children: "items"
          }
        }
      },
      layout: {
        type: "tree",
        subtype: "down",
        horizontalSeparation: 60,
        verticalSeparation: 40
      },
      shapeDefaults: {
        width: 40,
        height: 40
      }
    });
  }

  function diagramNodes() {
    var root = { name: "0", items: [] };
    addNodes(root, [3, 2, 2]);
    return [root];
  }

  function addNodes(root, levels) {
    if (levels.length > 0) {
      for (var i = 0; i < levels[0]; i++) {
        var node = { name: "0", items: [] };
        root.items.push(node);

        addNodes(node, levels.slice(1));
      }
    }
  }

  $(document).ready(function() {
    $("#subtype").change(function() {
      $("#diagram").getKendoDiagram().layout({
        subtype: $(this).val(),
        type: "tree",
        horizontalSeparation: 30,
        verticalSeparation: 20
      });
    });
  });

  $(document).ready(createDiagram);
  $(document).bind("kendo:skinChange", createDiagram);

There is another type of rendering connections with:

  connectionDefaults: {
    type: "polyline"
  }

You can check it out here: http://dojo.telerik.com/uNOVa/3

You can also fix your connections with an array: connections An example is here: example

Upvotes: 3

Related Questions