Code Samples: March 2021

Sunday, March 28, 2021

Kendo Menu and Grid Example

This article is an example of the Kendo Menu combined with the Kendo Grid. The framework used is the Kendo UI for jQuery. In this example, we are tasked to create a menu that disables its items depending on the selected row in the grid. It's is something like, you can't work on a row if you own it. Hence, the owner's name is disabled in the menu item.

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.

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

Kendo Menu and Grid Example

There you have it. A quick and simple example of how to use the Kendo Menu combined with Kendo Grid.

Sunday, March 21, 2021

Kendo Diagram Center Connection Example

This article is an example of the Kendo Diagram Component. The framework used is the Kendo UI for jQuery. In this example, we are tasked to make the connections hit the center of the shape instead of the edges. This example builds upon Kendo Diagram Connection Example.

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 notable changes are:

The toConnector and fromConnector in the connectionsDataSource. This tells the component which connector to hit.
The addition of the center connector.
On the change event, we make sure the connections are set to the background and the shapes are set to the foreground.
On the dataBound event, we set the shapes to the foreground.

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

Kendo Diagram Center Connection Example

There you have it. A quick and simple example of how to use the Kendo Diagram with center connection.

Saturday, March 13, 2021

Kendo Diagram Connection Example

This article is an example of the Kendo Diagram Component. The framework used is the Kendo UI for jQuery. In this example, we are tasked to show the level of traffic between routers.
Here are the requirements:

If the traffic high, above 80%, show a red thick connection between routers.
If the traffic is medium, above 40%, show an orange medium thickness connection.
If traffic is low, show a green thin connection.

On the change event, we capture the connections and redraw it accordingly.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Kendo Diagram Connection Example</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css"/>
    
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
</head>

<body>
    <div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    editable: {
        remove: false,
        resize: false,
        tools: false,
    },
    zoomRate: 0.5,
    zoomMax: 1.5,
    zoomMin: 0.6,
    dataSource: [
        {id:'a', name:'Router A'},
        {id:'b', name:'Router B'},
        {id:'c', name:'Router C'},
    ],
    connectionsDataSource:[
        {from:'a', to:'b', traffic: 10},
        {from:'a', to:'c', traffic: 50},
        {from:'b', to:'c', traffic: 90},
    ],
    layout: {
        type: 'force',
        nodeDistance: 200,
    },
    shapeDefaults: {
        type: 'circle',
        fill: '#00ffff',
        content: {
            template: '#= name #'
        },
        width: 70,
        height: 70,
        hover: {
            fill: '#6495ed'
        },
        editable: {
            connect: false,
            tools: false,
        },
    },
    connectionDefaults: {
        type: 'polyline',
        editable: false,
        content:{
            template: '#= traffic#%',
        }
    },
    change: function(e) {
        for (let i = 0; i < e.added.length; i++) {
            if (e.added[i] instanceof 
                kendo.dataviz.diagram.Connection) {
                var traffic = e.added[i].dataItem.traffic;
                var color = 'green';
                var thickness = 2;
                if (traffic > 80) {
                    color = 'red';
                    thickness = 6;
                } else if (traffic > 40) {
                    color = 'orange';
                    thickness = 4
                }

                e.added[i].redraw({
                    stroke: {
                        color: color,
                        width: thickness,
                    }
                });
            }
        }
    },
});
</script>
</body>
</html>

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

Kendo Diagram Connection

There you have it. A quick and simple example of how to use the Kendo Diagram with custom connections.

Saturday, March 6, 2021

Kendo Menu With Spring Boot Example

This article is an example of the Kendo Menu Component with a Spring Boot backend. The framework used is the Kendo UI for jQuery. In this example, let us imagine that we need to build a menu with an icon. Sound simple? Let's make it a bit harder. The menu and icon are dynamic. In this example we'll just hardcode the menu data source but in the real world, the data for the menu is provided by a web API. So consider that our menu can have more or less menu items or sub menu items depending on the logged in user. An additional complexity is that our menu items have dynamic icons which we need to pull from the web API. This is the focus of this example, dynamic icons for the menu items.

The IDE used is Spring Tool Suite 4 and it is expected that the reader know a thing or two about Spring Boot. 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.

So here we go. One solution could be to pull all the icons when we get the menu data. Possible but might take longer to build the menu. And as we all know users hate to wait. So we only fetch the icon when the menu item is about to be shown and not invoke the web API call again if we already have the icon.

This is our icon web API endpoint.

package com.blogspot.jpllosa.controller;

import java.io.IOException;
import java.io.InputStream;

import org.apache.commons.io.IOUtils;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class ImageController {

    @GetMapping(
        value = "/get-image",
        produces = MediaType.IMAGE_JPEG_VALUE)
    public @ResponseBody byte[] getImage() throws IOException {
        InputStream in = getClass().getResourceAsStream("/java.png");
        return IOUtils.toByteArray(in);
    }
}

Here is our frontend code.

<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Kendo Menu with Spring Boot</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css"/>
    
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
    
<style>
img.k-image {
    height: 2rem;
}
</style>

</head>
<body>
    <ul id="menu"></ul>

<script>
$(document).ready(function() {
    $("#menu").kendoMenu({
        animation: false,
        dataSource: {
            data: [{
                text: "Menu",
                items: [{
                    text: "Sub Menu",
                    items: [{
                        text: "Java",
                        imageUrl: "#",
                    }],
                }],
            }],
        },
        open: function(e) {
            var $img = $(e.item).find("span img.k-image")
            var src = $img.attr("src");
            
            if (src) {
                if (src === "#") {
                    $.ajax({
                        type: "GET",
                        url: "/get-image",
                        xhrFields: {
                            responseType: "blob",
                        },
                        cache: false,
                    })
                    .done(function(data, textStatus, jqXhr) {
                        var imageUrl = URL.createObjectURL(data);
                        $img.attr("src", imageUrl);
                    });
                }
            }
        },
    });
});
</script>
</body>
</html>

The output looks like this:

Kendo Menu with Spring Boot

There you have it. I hope you found this example educational. The complete project can be cloned from github.com/jpllosa/spring-boot-kendo-menu