O'Reilly logo

Kendo UI Cookbook by Sagar Ganatra

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating flow diagrams using Kendo Diagram

Adding workflow diagrams or hierarchical structure to a web page is now made easy with the introduction of diagrams in the Kendo UI library. In this recipe, we will build a flowchart diagram by creating shapes and then we will connect those with connectors. The library also provides a set of layouts that can be used to represent a hierarchical or tree-like structure.

How to do it…

A flowchart is used to represent steps in an algorithm; these steps are shown as shapes (rectangles and circles). The connectors are then used to connect the shapes and describe the flow. A diagram in Kendo UI is created by invoking the kendoDiagram function on the selected DOM node:

var diagram = $("#chart").kendoDiagram({ connectionDefaults: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required