New to Kendo UI for jQuery? Download free 30-day trial

Show Context Menu over Diagram Shapes

Environment

Product Progress Kendo UI Diagram for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I show a Kendo UI ContextMenu when pressing the right button of the mouse over the Diagram shapes?

Solution

To achieve this behavior:

  1. Initialize a Kendo UI ContextMenu setting its target as the ID of the Diagram and filter it by a g element.
  2. Handle the open event of the ContextMenu. If the target is a connection, it is possible to cancel the event. If the target is a shape, it is possible to store the dataItem in a variable.
  3. Handle the select event of the ContextMenu where you can perform a custom action based on the context of the shape.

<ul id="menu">
<li>
    Reply
    <ul>
    <li> Reply to Sender</li>
    <li>Reply to All</li>
    </ul>
</li>
<li class="k-separator"></li>
<li>Forward</li>
</ul>
<div id="diagram"></div>

<script>
    var data = [{
            firsLastName : "Antonio Moreno",
            title : "Team Lead",
            colorScheme : "#1696d3",
            items : [{
                    firsLastName : "Elizabeth Brown",
                    title : "Design Lead",
                    colorScheme : "#ef6944"
                }, {
                    firsLastName : "Felipe Izquiedro",
                    title : "Senior Developer",
                    colorScheme : "#75be16"
                }
            ]
        }
    ];

    function visualTemplate(options) {
        var dataviz = kendo.dataviz;
        var g = new dataviz.diagram.Group();
        var dataItem = options.dataItem;

        g.append(new dataviz.diagram.Rectangle({
                width : 210,
                height : 75,
                stroke : {
                    width : 0
                },
                fill : {
                    gradient : {
                        type : "linear",
                        stops : [{
                                color : dataItem.colorScheme,
                                offset : 0,
                                opacity : 0.5
                            }, {
                                color : dataItem.colorScheme,
                                offset : 1,
                                opacity : 1
                            }
                        ]
                    }
                }
            }));

        g.append(new dataviz.diagram.TextBlock({
                text : dataItem.firsLastName,
                x : 55,
                y : 20,
                fill : "#fff"
            }));

        g.append(new dataviz.diagram.TextBlock({
                text : dataItem.title,
                x : 55,
                y : 40,
                fill : "#fff"
            }));
        return g;
    }

    function createDiagram() {
        $("#diagram").kendoDiagram({
            dataSource : new kendo.data.HierarchicalDataSource({
                data : data,
                schema : {
                    model : {
                        children : "items"
                    }
                }
            }),
            layout : {
                type : "layered"
            },
            shapeDefaults : {
                visual : visualTemplate
            },
            connectionDefaults : {
                stroke : {
                    color : "#979797",
                    width : 2
                }
            }
        });

        var diagram = $("#diagram").getKendoDiagram();
        diagram.bringIntoView(diagram.shapes);

        var contextDataItem;

        $("#menu").kendoContextMenu({
            target : "#diagram",
            filter : "g",
            open : function (e) {
                if (e.event) {
                    try {
                        var shapes = diagram.shapes;
                        var connections = diagram.connections;

                        var point = diagram.documentToModel(new kendo.dataviz.diagram.Point(e.event.pageX, e.event.pageY));

                        //Cancel the menu opening when the target is a connection
                        for (var i = connections.length - 1; i >= 0; i--) {
                            if (connections[i].bounds().contains(point)) {
                                e.preventDefault();
                            }
                        }
                        //Find the target shape
                        for (var i = shapes.length - 1; i >= 0; i--) {
                            if (shapes[i].bounds().contains(point)) {
                                contextDataItem = shapes[i].dataItem;
                                break;
                            }
                        }
                    } catch (e) {
                        alert(e);
                    }
                }
            },
            select : function (e) {
                var itemText = $(e.item).text();
                alert(kendo.format("{0}: {1}", itemText, contextDataItem.firsLastName));
            }
        });
    }

    $(document).ready(createDiagram);
</script>

See Also

In this article