RTLTree.cshtml

@using Syncfusion.EJ2;
@using EJ2CoreSampleBrowser.Controllers.Diagram;
@section ControlsSection{
    <div class="control-section">
        <div style="text-align:center">
            <ejs-diagram id="diagram" width="100%" height="600px" getConnectorDefaults="@ViewBag.getConnectorDefaults" getNodeDefaults="@ViewBag.getNodeDefaults" created ="diagramCreated">
                <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>               
                <e-diagram-datasourcesettings id="Name" parentId="Category" dataSource="new DataManager() { Data = (List<RTLData>)ViewBag.Nodes }"></e-diagram-datasourcesettings>
                <e-diagram-layout type="HierarchicalTree" orientation="RightToLeft" verticalSpacing="100" horizontalSpacing="-10" verticalAlignment="Center" horizontalAlignment="Center"></e-diagram-layout>
            </ejs-diagram>
        </div>
    </div>
    
    <script>

        function diagramCreated() {
            var diagram = document.getElementById("diagram").ej2_instances[0];
            diagram.tool = ej.diagrams.DiagramTools.ZoomPan;
            diagram.dataBind();
        }

        function getConnectorDefaults(connector, diagram) {
            connector.type = 'Bezier';
            connector.sourcePortID = 'port1';
            connector.targetPortID = 'port2';
            connector.targetDecorator = { shape: 'None' };
            return connector;
        }
        function getNodeDefaults(obj, diagram) {
            obj.width = 120;
            obj.style = { fill: '#034d6d', strokeWidth: 1 };
            var key = 'branch';
            //Initialize shape
            if ((obj.data.Branch) === 'root') {
                obj.shape = { type: 'Basic', shape: 'Ellipse' };
                obj.height = 120;                 
            } else {
                obj.shape = {
                    type: 'Native',
                    content: '<svg width="120" height="61"><g><line x1="0" x2="120" y1="60" y2="60" stroke-width="1" stroke= "black"></line>'
                        + '<rect x="0" y="0" width="120" height="60" fill="transparent" stroke="none"></rect></g></svg>'
                };
                obj.style.strokeWidth = 0;
                obj.height = 60;
            }
            //Set ports and annotations
            obj.ports = getPorts((obj.data.Branch) === 'root');
            if ((obj.data.Branch) !== 'root') {
                obj.annotations = [{
                    offset: { y: 1 }, verticalAlignment: 'Bottom', margin: { bottom: 10 }, content: obj.data.Name
                }];
            } else {
                obj.annotations = [{
                    style : {color: 'white'}, content: obj.data.Name
                }];
            }
            return obj;
        }
        function getPorts(root) {
            var ports = [
                {
                    id: 'port1', shape: 'Circle', offset: { x: 0, y: 0.5 }, horizontalAlignment: 'Left',
                    verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }
                },
                {
                    id: 'port2', shape: 'Circle', offset: { x: 1, y: 0.99 }, horizontalAlignment: 'Right',
                    verticalAlignment: 'Bottom', margin: { right: -2, bottom: -5.5 }
                }
            ];
            if (!root) {
                ports[0].offset.y = 1;
            } else {
                ports[0].verticalAlignment = 'Center';
                ports[0].horizontalAlignment = 'Center';
            }
            return ports;
        }

    </script>
}
@section ActionDescription{
    <p>
        This sample visualizes the concept of artificial intelligence using hierarchical tree layout algorithm.
    </p>
}
@section Meta{
    <meta name="description" content="This demo for Essential JS2 Diagram control visualizes the concept of Artificical Intelligence using hierarchical tree layout algorithm"/>
}
@section Description{
    <p>
        The diagram component’s features are segregated into individual feature-wise modules. To generate diagrams from an external data source, inject <code>DataBinding</code> module using <code>Diagram.Inject(DataBinding)</code> method. To automatically arrange the objects in a hierarchical structure, inject
<code>HierarchicalTree</code> module using <code>Diagram.Inject(HierarchicalTree)</code> method.

    </p>
}