이의 읽기 전용 표현으로 당신은 계층 구조로 검도 UI에 다이어그램

Question

내가 Kendo UI's diagramming component

나는 사용자가 다이어그램을 편집 할 수 없도록하려면 사용하여 조직도를 구축하고를 커넥터의 위치에 영향을 어떻게 그들은 이전에 입력 한 위치이지만, 특정 방식으로 다이어그램을 표시하려고합니다.

사용중인 레이아웃 유형은 tree이고 서브 유형은 down입니다. 이처럼 보이도록

그러나

, 내 상사가 그것을 필요로 : 나는 다이어그램은 다음과 같습니다 그려있는 HeirarchicalDataSourcedataSource

같은 기본 방법을 사용하고

따라서 상위 노드에는 아래쪽 커넥터에서 오는 모든 하위 노드가 있습니다.

프로그래밍 방식으로 영향을 미치지 않습니다. 도와주세요.

Answer 1

편집을 쉽게 전환 할 수 있습니다. 옵션으로 editable: false을 전달하면됩니다.

connectionDefaults: { 
    type: "polyline" 
    } 

당신은 할 수 있습니다 렌더링 연결의 또 다른 유형이있다 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); 

에서 horizontalSeparation, verticalSeparation : 당신이 게시 된 것과 비슷한 레이아웃을 가지고, 두 변수로 플레이 여기에서 확인하십시오. http://dojo.telerik.com/uNOVa/3

배열과의 연결 : 예가 여기에 있습니다. example