Question

我正在使用Kendo UI's diagramming component

构建组织结构图

我不希望用户能够编辑图表，因为它是他们之前输入的位置的只读表示，但我确实希望以特定方式显示图表。

我使用的布局类型是tree，子类型为down。我使用HeirarchicalDataSource作为dataSource

绘制图表的默认方式如下：

然而，我的老板需要它看起来像这样：

因此父节点具有来自底部连接器的所有子节点。

我认为没有办法以编程方式影响这一点。请帮忙。

Answer 1

关闭切换编辑很简单，只需转到您的选项editable: false即可。要使布局与您发布的内容类似，请使用horizontalSeparation

下的两个变量：verticalSeparation，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);

还有另一种渲染连接：

  connectionDefaults: {
    type: "polyline"
  }

您可以在此处查看：http://dojo.telerik.com/uNOVa/3

您还可以使用数组修复连接： connections 这里有一个例子： example

如何在层次化的Kendo UI Diagram中影响连接器的位置

1 个答案: