Kendo Donut Chart With Borders Example

This article is an example of a Kendo Chart Component with borders. The framework used is Kendo UI for jQuery.

Suppose we have a highly customizable widget that displays a donut Kendo Chart with borders and background colors. Let's just imagine that there is an admin page where you can input the desired background color and border for the widget. Okay? So, we'll have something like below.

Kendo Chart Overlapping Borders

As you can see, the borders are being overlapped by the chart. This does not look good. Now this can easily be fixed by setting the chartArea.background to transparent. Like what you see below. But the tricky part is this is a highly customizable widget wherein the the container and the donut Kendo Chart area can have different colors. What are we going to do?

Kendo Chart Transparent Chart Area

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.

We'll need to implement the render function. In this function, we find the SVG of the chart and apply the border styling as appropriate. We should have something like below. As you can see the chart area color is different from the caption area background color. The borders are not overlapped as well. Great!

Kendo Chart with Borders

There you have it. A quick and simple example of a donut Kendo Chart with borders.

Kendo Grid Using Vue Wrappers Example

This article is an example of how to use the Kendo UI Wrappers for Vue particulary the Kendo Grid. The components in the Kendo UI Wrappers for Vue suite are wrappers of the Kendo UI for jQuery widgets. There is also a Kendo UI Native for Vue suite which has native components designed specially for the Vue framework.

What prompted me to write this article is a StackOverflow question. I answered this using Kendo UI jQuery but in this article I will implement it using Kendo UI Wrappers for Vue. The original poster is asking how to display either a drop down list or a text box in each cell under a column. Let's go!

To begin, include all the required Kendo styles, libraries, and the specific Kendo Vue package. See the head part of the HTML below. What was loaded? CSS files, jQuery, Kendo, Babel, Vue and the specific Kendo Grid wrapper for Vue.

Let's go to the body. We start off with a div with an id. Inside this div, we place the kendo-grid directive. To configure the grid, we utilize the Kendo Grid for jQuery API configuration options as props but with a slight naming change. :selectable="'cell'" is an example of setting the prop in an API-based options way. This equates to the selectable configuration option in Kendo Grid for jQuery. Another option is called the Camel-Case wherein Camel case options in jQuery are converted to Kebab case (e.g. dataSource to data-source). The columns are configured using the kendo-grid-column directive. Now that we are happy with the configuration, it's time to instantiate the Vue app.

We instantiate our Vue app and attach it to the div named grid. The data option returns an object with a localDataSource field which is then bound to the prop :data-source="localDataSource".

And in the methods option is where all the magic happens. The notEditable function simply returns false so that the cell will not be editable. In the customEditor function, for example purposes, if the reference is greater than 999 a drop down list is displayed otherwise a text box is displayed. We are using the Kendo Vue Wrappers version of the grid and this is why the custom editor is defined using Kendo UI for jQuery. If we want to go to a pure Vue implementation then we will have to switch to the Kendo UI Native for Vue suite.

Here is our code. 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 Wrappers for Vue or Kendo UI for jQuery for more than just evaluation purposes.

Output:

Kendo DropDownList and Grid

Kendo Textbox and Grid

There you have it. A simple example of a Kendo Grid implemented with Kendo UI Wrappers for Vue.

Kendo DropDownList Hide Selected Option Example

This article is another example of the Kendo DropDownList Component. The framework used is Kendo UI for jQuery. This example stems from the StackOverflow question which I answered.

The original poster wanted to hide the selected option in the drop down list. For example, we have 5 items on the list. Namely, apples, mangoes, grapes, papaya, and banana. When a user selects apples, the drop down list will only show mangoes, grapes, papaya, and banana. The OP's idea was to remove the item from the data source. In our solution, we just hide whatever is selected. There is no need to remove the item from the data source. This idea is based on a previous article I have written, Kendo DropDownList Example. So on the open, we get what was selected and then hide. Simples.

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.

Here is how it would look like:

Kendo DropDownList Example

There you have it. A simple example on how to hide a selected option from the list using the Kendo DropDownList component.

Kendo Wizard With HTTP POST Example

This article is an example of a Kendo Wizard Component sending an HTTP POST to a Spring Boot backend. The framework used is Kendo UI for jQuery. In this example, we send the entire Wizard form data after all the questions are answered.

The IDE used is Spring Tool Suite 4 and it is expected that the reader know a thing or two about Spring Boot. This is about Kendo Wizard so there won't be any extensive Spring Boot explanations. 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.

First on the agenda is our controllers. Here is the WizardController class.

package com.blogspot.jpllosa.controller;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

import com.blogspot.jpllosa.model.Questionaire;

@Controller
public class WizardController {

	@GetMapping("/wizard")
	public String wizardForm() {
		return "wizard";
	}
	
	@GetMapping("/success")
	public String successPage() {
		return "success";
	}
	
	@PostMapping("/wizard")
	public ResponseEntity wizardSubmit(@ModelAttribute Questionaire questionaire) {
		System.out.println(questionaire);
		return new ResponseEntity<>("", 
				HttpStatus.OK);
	}
}

This class handles a couple of HTTP GET requests and an HTTP POST request. GET requests to /wizard and /success resources return the wizard.html and success.html templates respectively.

The POST request to the /wizard resource is handled by the wizardSubmit method. Spring is kind enough to map the Form data received to the Questionaire class. When a POST request is received, this prints the questionaire contents to the console and reponds with an HTTP OK.

Here's the Questionaire class.

package com.blogspot.jpllosa.model;

public class Questionaire {
	private String section1answer1;
	private String section1answer2;
	private String section2answer1;
	private String section2answer2;
	
	public String getSection1answer1() {
		return section1answer1;
	}
	public void setSection1answer1(String section1answer1) {
		this.section1answer1 = section1answer1;
	}
	public String getSection1answer2() {
		return section1answer2;
	}
	public void setSection1answer2(String section1answer2) {
		this.section1answer2 = section1answer2;
	}
	public String getSection2answer1() {
		return section2answer1;
	}
	public void setSection2answer1(String section2answer1) {
		this.section2answer1 = section2answer1;
	}
	public String getSection2answer2() {
		return section2answer2;
	}
	public void setSection2answer2(String section2answer2) {
		this.section2answer2 = section2answer2;
	}
	@Override
	public String toString() {
		return "Questionaire [section1answer1=" + section1answer1 + ", section1answer2=" + section1answer2
				+ ", section2answer1=" + section2answer1 + ", section2answer2=" + section2answer2 + "]";
	}
}

Here is the meat of this example. The Kendo Wizard has a couple of sections, each with a couple of questions. After answering all the questions, clicking on done triggers the done event handler. What this function does is grab all the form data and put it into a FormData object. The FormData is then sent to the /wizard endpopint via an AJAX request. If successful, the frontend code handles the POST-Redirect-GET because the backend can't do a redirect from an AJAX request. The backend just prints what was received in this example.

<!--https://jpllosa.blogspot.com-->
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head> 
    <title>Kendo Wizard POST to Spring Boot Example</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"></meta>
    
    <link href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css" rel="stylesheet"></link>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
</head>
<body>
	<div id="wizard"></div>

<script>
    var $wizard = $("#wizard");
    var wizard = $wizard.kendoWizard({
        validateForms: true,
        steps: [{
            title: "Sample Questionaire",
            content: "Click <b>Next</b> to begin.",
        },{
            title: "Section 1",
            form: {
                formData: {
                    section1answer1: "",
                    section1answer2: "",
                },
                items: [{
                    field: "section1answer1",
                    label: "Some silly question 1:",
                    validation: {
                        required: true,
                    },
                },{
                    field: "section1answer2",
                    label: "Some silly question 2:",
                    validation: {
                        required: true,
                    },
                }],
            },
        },{
            title: "Section 2",
            form: {
                formData: {
                    section2answer1: "",
                    section2answer2: "",
                },
                items: [{
                    field: "section2answer1",
                    label: "Another silly question 1:",
                    validation: {
                        required: true,
                    },
                },{
                    field: "section2answer2",
                    label: "Another silly question 2:",
                    validation: {
                        required: true,
                    },
                }],
            },
        },{
            title: "Done",
            content: "Thank you for answering.",
        }],
        done: function(e) {
        	var forms = e.forms;
        	var formData = new FormData();
        	for (let a = 0; a < forms.length; a++) {
        		var form = forms[a];
        		for (let b = 0; b < form._fields.length; b++) {
        			var field = form._fields[b];
        			formData.append(field.field, form._model[field.field]);
        		}
        	}

			$.ajax({
				type: "POST",
				url: "/wizard",
				contentType: false, // do not send content type header
				processData: false, // do not transform into a query string
				data: formData,
			})
			.done(function(data, textStatus, jqXhr) {
				// success = redirect to success page
				if (textStatus === 'success') {
					// post redirect get
					// back-end can't redirect from ajax request
					window.location.replace("/success");
				}
			})
			.fail(function(jqXhr, textStatus, errorThrown) {
				console.log("fail");
			})
			.always(function() {
				console.log("always");
			});
        }
    }).data('kendoWizard');
</script>
<style>
    .k-stepper .k-step-label .k-step-text {
        max-width: calc(30em - 20px);
    }
</style>
</body>
</html>

Here is how it would look like:

Kendo Wizard Start

Kendo Wizard Questions

Kendo Wizard Done

Kendo Wizard Success

Spring Boot should print something like below:

2021-10-23 21:05:25.845 INFO 5872 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet Completed initialization in 1 ms
Questionaire [section1answer1=silly 1, section1answer2=silly 2, section2answer1=another 1, section2answer2=another 2]

There you have it. The complete project can be cloned from github.com/jpllosa/spring-boot-kendo-wizard.

Kendo Grid Persist Row Selection Example

This article is an example of a Kendo Grid row selection issue. The framework used is Kendo UI for jQuery. Let's begin.

In the persist row selection in this knowledge base article, https://docs.telerik.com/kendo-ui/knowledge-base/persist-row-selection-while-paging, it chooses the wrong rows after choosing the page and going back then Shift+Click a row. Below is the code from the knowledge base article.

Follow these steps to reproduce the row selection issue.

1. On page 1, select Brazil (row 3). The Brazil row should be selected.
2. Go to page 2 then back to page 1. Brazil is still selected. Well and good.
3. Shift+Click Belgium, the selection now starts from row 1 to row 5 (France, Germany, Brazil, France, Belgium). Selected should be row 3 to 5 (Brazil, France, Belgium).

Kendo Grid Persist Row Selection Problem

Now that we have seen the problem, let's see the solution. Why is this happening? When we switched pages the grid no longer knows which row was focused previously. So what we do now is utilize the persistSelection option. Since we have the persistSelection, we no longer need to handle the change event. On dataBound, we find which rows were selected and set the focus to that row.

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.

Output:

Kendo Grid Persist Row Selection Solution

There you have it. A quick and simple example of how to persist a row selection on a Kendo Grid.

Kendo Chart Using Vue Wrappers Example

This article is an example of how to use the Kendo UI Wrappers for Vue particulary the Kendo Chart. The components in the Kendo UI Wrappers for Vue suite are wrappers of the Kendo UI for jQuery widgets. There is also a Kendo UI Native for Vue suite which has native components designed specially for the Vue framwork.

What prompted me to write this article is a StackOverflow question on how to use it. Perhaps he didn't understand the Kendo documentation so I'm writing this to supplement the Kendo documentation. To better understand this, I'll implement Donut Kendo Chart with 0% Example (which was done in Kendo UI for jQuery) using Kendo UI Wrappers for Vue. We should be able to compare the two implementations and grasp it better.

To begin with, include all the required Kendo styles, libraries, and the specific Kendo Vue package. See the head part of the HTML below. What was loaded? CSS files, jQuery, Kendo, Babel, Vue and the specific Kendo Chart wrapper for Vue.

Let's go to the body. We start off with a div with an id. Inside this div, we place the kendo-chart directive. To configure the chart, we can utilize the Kendo Chart for jQuery API configuration options as props but with a slight naming change. The :theme="'material'" is an example of setting the prop in an API-based options way. This equates to the theme configuration option in Kendo Chart for jQuery. Another option is called the Camel-Case wherein Camel case options in jQuery are converted to Kebab case (e.g. seriesDefaults to series-defaults). Next is the Composite options wherein widget configuration that accept object notation are translated into Kebab case (e.g. title.position to title-position). Now that we are happy with the configuration, it's time to instantiate the Vue app.

We instantiate our Vue app and attach it to the div named donutChart. The data option returns an object with a series field which is then bound to the prop :series="series".

Here is our code. 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 Wrappers for Vue or Kendo UI for jQuery for more than just evaluation purposes.

Output:

Kendo Chart Using Vue Wrappers

 

There you have it. A simple example of a Kendo Donut Chart implemented with Kendo UI Wrappers for Vue.

Donut Kendo Chart with 0% Example

This article is an example of a donut Kendo Chart Component. The framework used is Kendo UI for jQuery. Strangely enough, a 0% value isn't displayed by a donut Kendo Chart but is displayed by a pie Kendo Chart. In this example, we will make the donut Kendo Chart display the 0% value.

Before we go straight to the solution, let us see the problem first. Set the "North America" value to 0, value: 0 and make sure the type is "donut", type: "donut".

We should have something like below:

Donut Kendo Chart Missing 0%

Now, keep everything the same and change the type to pie, type: "pie" and we should have something like below:

Pie Kendo Chart Showing 0%

See the difference? On a pie Kendo Chart, 0% is shown. On a donut Kendo Chart, 0% isn't shown. Even though they have the same values. Don't ask me why because I don't know the reason behind it. Fortunately, we can trick the Kendo Chart into showing the 0% value.

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 trick is to change the value to something way below zero. In our example it is 0.001. So we set "North America" to value: 0.001. And then handle the tool tip and label by adding some template logic. Don't forget to set type: "donut". This is how it looks now:

Donut Kendo Chart Showing 0%

There you have it. A quick and simple example of a Kendo Donut Chart with 0%.

Responsive Kendo PivotGrid Example

This article is an example of a responsive Kendo PivtoGrid Component. The framework used is Kendo UI for jQuery. Some Kendo widgets do not automatically resize and PivotGrid is one them. In this example, we will make the Kendo PivotGrid fit the browser viewport. In other words, we will make sure that the browser will not provide a vertical scroll bar. Instead, our Kendo PivotGrid will provide the scroll bars. Another additional requirement is that the user should not be able to change the columns, rows and measures of our Kendo PivotGrid.

Firstly, our data can be downloaded here - products.js. We then save it in the same directory as our HTML file.

To address the additional requirement, on dataBound we disable the pivot grid settings and remove the delete and close icons.

The meat of our responsiveness happens in resizeContent. Here we get the height of our viewport and our desired Kendo PivotGrid height. We then set the pivot grid wrapper element to the desired height. Next, change the pivot grid object's height via setOptions. Finally, call the resize method.

The thing that drives the resizeContent function is my new favorite API for the week. The ResizeObserver Web API. Our ResizeObserver object observes changes to the size of the pivot grid element. When the dimensions change, it calls resizeContent.

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.

Try resizing the browser. The Kendo PivotGrid should look something like below.

Responsive Kendo PivotGrid

There you have it. A quick and simple example of a responsive Kendo PivotGrid.

Kendo Listbox Item Select Issue Example

This article is an example of the Kendo Listbox Component. The framework used is Kendo UI for jQuery. In this example, we will demonstrate an item selection issue when we resize the list box which makes the horizontal scrollbar appear.

Let's demonstrate the problem. First of all, if the screen is wide enough then we will not see the UI problem. Let's resize and make the browser width smaller so that the horizontal scrollbar is displayed. On initial load, it all looks hunky dory. Our requirement is on initial load, all items are selected. Like so.

Kendo Listbox On Load

Now let's scroll to the right. Notice that the items are not fully selected. We don't see the letters because it is white. Like so.

Kendo Listbox Item Select Issue

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.

As per requirement, we need to select all items on initial load. So on dataBound we select all items and we also find the longest text and multiply it with our magic number 7 (this could be any number depending on your font size). The product is the maximum width of the longest text in pixels. We then set this maximum width to k-list when the column width is less than this value. Otherwise, we set the width to 100% as can be seen in the resizeContent function. Furthermore, we have made our list box responsive by binding resizeContent to the resize event. Don't call resizeContent to see the item select issue.

This is how it looks like with our solution. The items are now fully selected.

Kendo Listbox Item Select Issue Fixed

There you have it. A quick and simple example of how to fix the Kendo Listbox item select issue.

Kendo Chart with Filter Example

This article is an example of how to filter a Kendo Chart Component. The framework used is Kendo UI for jQuery. In this example, we learn a bunch of things. First, we will learn how to extend a Widget class to create our own custom widget. One reason why we create our own widget is when we would like to use it in our other projects. Second, triggering events so that our custom widget can handle the event. Lastly, utilizing the Kendo DataSource component to filter our Kendo Chart.

First off, we place our custom widget inside an immediately invoked function expression and pass in jQuery. We extend the base Kendo Widget class in the kendo.ui namespace. Next, we provide an init method. The element parameter is where we are initializing the widget to. The options are configuration values for our widget and are then merged to the base options. We add our custom UI code, _create and in order for the client code to get the filter when the Kendo Button is clicked, we trigger the attached event so that the client code can handle the event. Lastly, we add the widget to Kendo UI, plugin. Our widget is now available to use like all other Kendo UI widgets.

my-widget.js

In our HTML, we bind our array to a Kendo DataSource. We create our custom filter the same way we create other Kendo widgets and implement the code to handle the applyFilter event. And then we bind the dataSource to Kendo Chart.

kendo-chart-with-filter.html

This is how it looks like on initial load.

Kendo Chart with Filter - Initial Load

This is how it looks like filtered.

Kendo Chart with Filter - Filtered

There you have it. A quick and simple example of how to filter a Kendo Chart.

Kendo Chart Custom Visual Image Example

This article is an example of creating a custom visual image in a Kendo Chart Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to show an image when a chart hits a certain point. Say for example when the values hit below 30, it will show a life saver icon. Telling the user that the value needs to be looked into so to speak.

What we need to do is implement a function for the visual option. We call the createVisual() function to save us from computing where to put the label and icon. Looping through the visual.children and finding the Text nodeType will give us the bounding box (position) coordinates for our label and icon. When we have the coordinates, we utilise Kendo's drawing API to draw the label and icon and return it as a Group object.

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.

Result:

Kendo Chart Custom Visual Image

There you have it. A quick and simple example of how to create custom visual image in Kendo Chart.

Kendo Splitter Burger Menu Example

This article is an example of a burger menu utilizing the Kendo Splitter Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to have a sidebar component for navigation, which is similar to Kendo Drawer. But we want the sidebar to be resizable.

We will utilize Kendo Splitter and Kendo ToolBar to achieve this requirement. Our Kendo ToolBar will contain the burger menu which handles the toggling of the sidebar which is controlled by the Kendo Splitter. We also add some resizing code to make the page responsive.

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.

Here are the outputs:

Kendo Splitter Burger Menu Open

 

Kendo Splitter Burger Menu Closed

There you have it. A quick and simple example of how to utilize Kendo Splitter and Kendo ToolBar to make a burger menu with sidebar.

Kendo Grid Copy Text Example

This article is an example of copying text in a Kendo Grid Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to be able to copy text in a Kendo Grid when multiple selection is enabled.

This article is based on an answer I made in Stack Overflow - Kendo Grid UI: Enable custom text copy. When the selectable option is set to multiple or others, you can't select text over a mouse-drag action. So we have to handle the copy text operation. First off, we create a Kendo ContextMenu that targets the grid component. When the context menu is opened, we display the text via an input tag wherein the user can copy the text as he pleases.

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.

You should see something like below when you run the program.

Kendo Grid Copy Text

There you have it. A quick and simple example of how to copy a text from a Kendo Grid with selection features enabled.

Kendo Chart Curved Edge Label Example

This article is an example of creating a customised visual label with curved edges in a Kendo Chart Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to show values inside an orange  box with curved edges if it is equal to 10. This builds upon my previous example, Kendo Chart Custom Visual Label Example.

What we need to do is implement a function for the visual option. We call the createVisual() function to save us from computing where to put the label. This will give us the bounding box coordinates for our label and rectangle. When we have the coordinates, we utilise Kendo's drawing API to draw the text and rectangle and return it as a Group object. Instead of the utilizing the kendo.drawing.Rect object, we use the kendo.drawing.Path object to create a rectangle with curved edges.

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.

Result: 

Kendo Chart Curved Edge Label

 

There you have it. A quick and simple example of how to create a custom visual label with curved edges in Kendo Chart.

Kendo Chart Custom Visual Label Example

This article is an example of creating a customised visual label in a Kendo Chart Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to show values inside a red box if it is greater than 50. Emphasizing that the value needs to be looked into so to speak.

What we need to do is implement a function for the visual option. We call the createVisual() function to save us from computing where to put the label. This will give us the bounding box coordinates for our label and rectangle. When we have the coordinates, we utilise Kendo's drawing API to draw the text and rectangle and return it as a Group object.

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.

Result:

Kendo Chart Custom Visual Label

 

There you have it. A quick and simple example of how to create a custom visual label in Kendo Chart.

Kendo Radial Gauge Range Example

This article is an example of a scale range in a Kendo Radial Gauge Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to make the scale range section transparent.

This is relatively easy but searching/googling for "kendo radial gauge transparent range" did not provide relevant results. To make the scale range transparent, we just provide a transparent value or a color with a transparent alpha channel to the rangePlaceholderColor option. It's that simple. I guess it was so simple that nobody bothered to google it. Anyway, here is the example code:

Without transparency:

Kendo Radial Gauge

 With transparency:

Kendo Radial Gauge - Transparent

 

There you have it. A quick and simple example of how to have a transparent range in Kendo Radial Gauge.

Kendo Chart Smart Step Example

This article is an example of dynamically changing the step of the category labels in a Kendo Chart Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to show the category labels of the bar chart without overlapping.

If you have a lot of bars in a chart with long category labels, there is strong chance of the labels overlapping. There is already a Kendo Chart documentation on how to prevent the categoryAxis from overlapping. The three workarounds are:

• Rotating the labels through categoryAxis.labels.rotation.angle
• Using label templates through categoryAxis.labels.template
• Reducing the number of displayed labels through step and/or skip

The above workaround could work if we didn't need to zoom in and out of our chart. In order for our Kendo Chart to look pretty (lables not overlapping), we need to make the label step smart. In our solution, we calculate an initial step so that the labels don't overlap. When the chart is zoomed in or out, we recalculate the step and redraw tha chart. One thing to note here is that we need to have a name for our category axis so that we can get the min and max axis ranges.

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.

Without a smart step:

Kendo Chart - labels overlapping

 

Initial chart with smart step:

Kendo Chart - smart step

 

Chart mid zoom:

Kendo Chart - smart step (mid zoom)

 

Chart zoomed in:

 

Kendo Chart - smart step (zoomed in)

There you have it. A quick and simple example of how to have a smart step Kendo Chart.

Kendo Wizard Dynamic Customized Step Example

This article is an example of dynamically making a customized step on the Kendo Wizard Component. The framework used is Kendo UI for jQuery. In this example, our requirement is to show a reminder during each step.

This article is based on an answer I made in Stack Overflow - how to customized Kendo Step. The idea is to catch it on the activate event. Handling it on the select event might also work. On the event handler, grab the wizard instance, wait for Kendo Wizard to do its work (update the HTML) - hence the setTimeout, then find the focused list 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.

 

Initial step:

Kendo Wizard Initial Step

 

Second step:

Kendo Wizard Second Step

 

Third step:

Kendo Wizard Final Step

 

There you have it. A quick and simple example of how to dynamically customized the step of Kendo Wizard.

Responsive Kendo Wizard Example

This article is an example of making the Kendo Wizard Component responsive. The framework used is the Kendo UI for jQuery. In this example, our requirement is to make the Kendo Wizard respond to the width of the browser. If the width is greater than 768, the Kendo Stepper is position on the left, otherwise it is on top.

This article is based on an answer I made in Stack Overflow - how to make Kendo Wizard responsive. I tried a couple of things. First, manipulating the Kendo Wizard CSS nearly works but the not quite. Tried setOptions but it had no effect. So I ended up destroying and recreating the Kendo Wizard widget on window resize.

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.

Here is how it looks like with width greater then 768:

Kendo Wizard - Stepper on the Left Side

With less than 768:

Kendo Wizard - Stepper at the Top

 

There you have it. A quick and simple example of how to make the Kendo Wizard responsive.

Kendo Grid Frozen Row Example

This article is an example of the Kendo Grid Component with a frozen row. The framework used is the Kendo UI for jQuery. In this example, our requirement is to freeze a row at the top of the grid. This is based on the https://docs.telerik.com/kendo-ui/knowledge-base/grid-frozen-rows example. Unfortunately, as of this writing, the grid does not produce the expected result when adding the following options:

1. Resizable columns.
2. Group by column.
3. Show/hide columns.
4. Filter by column.

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 main difference here is our target row (frozen row) is appended to the table instead of the thead element. We also handle the columnHide and columnShow events to hide/show the frozen row's cell. And when a column is grouped, we remove the frozen row so that on dataBound, it is recreated. Recreating it aligns the columns.

For this example, Reference 005 is the target row. At the start, you will see something like this:

Kendo Grid Frozen Row

 

Try sorting, grouping, hiding/showing columns, and filtering. Our target row remains where it is supposed to be.

Kendo Grid Frozen Row Grouped by Column

Kendo Grid Frozen Row Sorted Column

Kendo Grid Frozen Row Resized Column

 

There you have it. A quick and simple example of how to use the Kendo Grid with a frozen row.

Kendo Grid Double Click Row Example

This article is an example of the Kendo Grid Component with a row double click event handler. The framework used is the Kendo UI for jQuery. As of this writing, there is no built-in double click event for Kendo Grid. We will have to use jQuery to handle a double click event on a row.

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.

Here is the example code. Just comment/uncomment some of the lines to see how it works.

We have two options of adding the double click event handler. First is adding it inside the dataBound event of the grid. As shown in line 57. When we load the page and double click on a row, we should should see a console output like so:

Console Output 1

Option 1

As we can see, dataBound is called twice. First, when the grid is initialized and second, when a new data is inserted (line 83). The console output on line 90 shows the double click handler bound to the row or tr element. There is one double click handler per row. Now, imagine if we have a thousand rows. We will have a thousand double click handlers!!! One positive is that on the second dataBound event the first double click handlers were automatically destroyed otherwise rows two to four would have two double click handlers.

Option 1.a

Next, let's do option 1.a. Let's comment out line 58 to 62. and then uncomment line 75 to 78. Save and reload the page and double click on a row. Now, we are binding the event handler outside the dataBound event. The console output should look something like below:

Console Output 1.a

Double click is gone!! Comment out the addition of new data (line 83 to 87). Save and reload the page and double click on a row. There should be a row double clicked in the output:

Console Output 1.aa

So what happend? The dataBound event was not invoked again because we didn't add new data. Therefore, the event handlers were not torn down.

Option 2

Uncomment the addition of new data (line 83 to 87). Comment out the option 1 code and uncomment the option 2 code (line 67 to 71). Save and relaod the page and double click on a row. We should see something like this in the console output:

Console Output 2

Now it's back to two dataBound events as per usual. The difference now is no event handler is bound to tr elements. Our double click event handler is bound to tbody. And it's bound only once. Even if we have a thousand rows, we will only have one event handler. Goodie! We could put the binding code inside dataBound but do we want to unbind (off) and bind (on) every time a new row is added or removed? I don't think so. From the looks of it option 2 is the way to go.

Why does option 2 work? In short, delegated event handler. We provided a selector to the on method making it a deletegated event handler. The old way of doing this is the delegate method which is now deprecated but might still work. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated event handlers to avoid the need to frequently attach and remove event handlers.

There you have it. A Kendo Grid double click row example. Happy coding.

Kendo Grid Sticky Row Example

This article is an example of the Kendo Grid Component with a sticky row. The framework used is the Kendo UI for jQuery. In this example, we are tasked to make a particular row stick to the header so that it is always shown when the grid is scrolled. This is particularly useful when an important row is associated to something else shown on the screen that you want to highlight.

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.

On dataBaound, we find the row we want to be sticky and add the necessary CSS to it. That's all there is to it.

For this example, Reference 003 is the important row. At the start, you will see something like this:

Kendo Grid Sticky Row in the Middle

 

After scrolling fully up, the important row sticks to the header and is always shown, like so:

Kendo Grid Sticky Row at the Top

There you have it. A quick and simple example of how to use the Kendo Grid with a sticky row.