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.