Code Samples: Kendo Diagram Double Click Example

This article is an example of the Kendo Diagram Component with a double click event handler. The framework used is the Kendo UI for jQuery. This example builds upon the Kendo Diagram Example. After we were tasked to create a link graph, we must now handle a double click event on a shape. Here are the requirements:

Show the shape ID and Name when a shape is double clicked.
Zoom level must not change on double click.

Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.

The two main points here are:

By default, Kendo Diagram zooms in when we double click. So we capture the event in zoomStart and prevent it from propagating.
Kendo Diagram does not provide a double click event API. So we had to bind it manually using jQuery and find the shape based on its position.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Diagram Example</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="diagram"></div>
<script>
var $diagram = $('#diagram');
var diagram = $diagram.kendoDiagram({
    editable: {
        remove: false,
        resize: false,
        tools: false,
    },
    zoomRate: 0.5,
    zoomMax: 1.5,
    zoomMin: 0.6,
    dataSource: [
        {id:'king', name:'King'},
        {id:'queen', name:'Queen'},
        {id:'bishop', name:'Bishop'},
    ],
    connectionsDataSource:[
        {from:'king', to:'queen', label: '10%'},
        {from:'king', to:'bishop', label: '40%'},
        {from:'queen', to:'bishop', label: '55%'},
    ],
    layout: {
        type: 'force',
        nodeDistance: 200,
    },
    shapeDefaults: {
        type: 'circle',
        content: {
            template: '#= name #'
        },
        width: 70,
        height: 70,
        hover: {
            fill: 'Orange'
        },
        editable: {
            connect: false,
            tools: false,
        },
    },
    connectionDefaults: {
        type: 'polyline',
        editable: false,
        content:{
            template: '#= label#'
        }
    },
    zoomStart: function(e) {
        if (e.meta.type === 'doubleTap') {
            e.preventDefault();
        }
    }
}).data('kendoDiagram');

$diagram.unbind('dblclick');
$diagram.bind('dblclick', function(e) {
    var position = diagram.documentToModel({
        x: e.pageX,
        y: e.pageY,
    });
    var targetShape = shapeByPosition(position);
    if (targetShape) {
        alert(targetShape.dataItem.id + ': ' +
            targetShape.dataItem.name);
    }
});

function shapeByPosition(position) {
    var shapes = diagram.shapes;
    for (let i = 0; i < shapes.length; i++) {
        var shape = shapes[i];
        if (shape.bounds().contains(position)) {
            return shape;
        }
    }
}
</script>
</body>
</html>

Open the HTML file in a browser and you should see an output similar to the one shown below.

Kendo Diagram Double Click Example

There you have it. A quick and simple example of how to use the Kendo Diagram component with a double click event handler.

Code Samples

Sunday, January 17, 2021

Kendo Diagram Double Click Example

No comments:

Post a Comment

Labels