Style the strokes in Diagram

Environment

Product

Progress® Kendo UI® Diagram for jQuery

Description

How can I design the color and width of every stroke in Kendo UI Diagram?

Solution

1. Add an additional property to the data object in connectionDataSource.
2. Use the change event of the Diagram.
3. Loop through all strokes and set their color and width using the redraw method.

The following example demonstrates how to change the color and width of every stroke in Diagram:

        <div id="diagram"></div>
	<script>
		$("#diagram").kendoDiagram({
			dataSource: [
			  { id: "one", name: "One" },
			  { id: "two", name: "Two" },
			  { id: "five", name: "Five" },
			],
			connectionsDataSource: [
			  { from: "one", to: "two", label: "plus one", color: "1" },
			  { from: "one", to: "five", label: "plus three", color: "2" }
			],
			change: function (e) {

				var connColor;
        var connWidth;

				for (var idx = 0; idx < e.added.length; idx++) {
					if (e.added[idx] instanceof kendo.dataviz.diagram.Connection) {
						connColor = e.added[idx].dataItem.color == "1" ? "#ff0000" : "#00ff00"
            connWidth = e.added[idx].dataItem.color == "1" ? 5 : 15
						e.added[idx].redraw({
							stroke: {
								color: connColor,
                width: connWidth
							}
						})
					}
				}
			},
			layout: {
				type: "tree",
				subtype: "right"
			},
			shapeDefaults: {
				type: "circle",
				content: {
					template: "#= name #"
				},
				width: 70,
				height: 70,
				hover: {
					fill: "Orange"
				}
			},
			connectionDefaults: {
				stroke: {
					color: "#979797",
					width: 1
				},
				type: "polyline",
				startCap: "FilledCircle",
				endCap: "ArrowEnd",
				content: {
					template: "#= label#"
				}
			},

			autoBind: true
		});
	</script>