Diagram - Templates

@model IEnumerable<DevExtreme.NETCore.Demos.Models.OrgItemPlain>

​

@(Html.DevExtreme().Diagram()

    .ID("diagram")

    .ReadOnly(true)

    .CustomShapes(cs => {

        foreach(var employee in Model) {

            cs.Add()

                .Type("employee" + employee.ID)

                .BaseType("rectangle")

                .DefaultWidth(1.5)

                .DefaultHeight(1)

                .AllowEditText(false)

                .AllowResize(false);

        }

    })

    .CustomShapeTemplate(@<text>

        <svg class="template">

            <text class="template-name" x="50%" y="20%"><%- dataItem.FullName %></text>

            <text class="template-title" x="50%" y="45%"><%- dataItem.Title %></text>

            <text class="template-button" x="50%" y="85%" onclick="showInfo(<%- JSON.stringify(dataItem) %>)">Show Details</text>

        </svg>

    </text>)

    .Nodes(ns => ns

        .DataSource(d => d

            .Array()

            .Key("ID")

            .Data(Model)

        )

        .KeyExpr("ID")

        .TypeExpr(new JS("itemTypeExpr"))

        .ParentKeyExpr("HeadID")

        .AutoLayout(al => al

            .Type(DiagramDataLayoutType.Tree)

        )

    )

)

​

@(Html.DevExtreme().Popup()

    .ID("popup")

    .Width(300)

    .Height(280)

    .ShowTitle(true)

    .Title("Information")

    .Visible(false)

    .DragEnabled(false)

    .HideOnOutsideClick(true)

)

​

<script type="text/javascript">

    var currentEmployee = {};

​

    function itemTypeExpr(obj) {

        return "employee" + obj.ID;

    }

​

    function showInfo(employee) {

        currentEmployee = employee;

​

        var popup = $("#popup").dxPopup("instance");

        popup.option("contentTemplate", function() {

            return $("<div />").append(

                $("<p>Full Name: <b>" + currentEmployee.FullName + "</b></p>"),

                $("<p>Title: <b>" + currentEmployee.Title + "</b></p>"),

                $("<p>City: <b>" + currentEmployee.City + "</b></p>"),

                $("<p>State: <b>" + currentEmployee.State + "</b></p>"),

                $("<p>Email: <b>" + currentEmployee.Email + "</b></p>"),

                $("<p>Skype: <b>" + currentEmployee.Skype + "</b></p>"),

                $("<p>Mobile Phone: <b>" + currentEmployee.MobilePhone + "</b></p>")

            )

        });

        popup.show();

    }

</script>

​