Set Node borders individuallyTo draw a border for a node, you can use rectangle shape with the border width and color set. But the borderWidth holds a single value that is applied to all sides of the rectangle. There is no out-of-box support to draw different border width on each sides of a rectangle. To overcome this, you can embed a SVG element with multiple lines into the node by using native node. You can set a different border style (stroke-width) for each line. The following code explains how to create a native node. JS //dependency scripts <script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script> <script id="svgTemplate" type="text/x-jsrender"> <g> <rect width="280" height="280" style="fill:blue;stroke-width:0" /> <polyline points="0,0 280,0" style="fill:white;stroke:red;stroke-width:4"/> <polyline points="0,0 0,280" style="fill:white;stroke:red;stroke-width:0"/> <polyline points="280,0 280,280" style="fill:white;stroke:red;stroke-width:2"/> <polyline points="0,280 280,280" style="fill:white;stroke:red;stroke-width:3"/> </g> </script> var node = { type: ej.datavisualization.Diagram.Shapes.Native, templateId: "svgTemplate", }
EJASP ASPX //dependency scripts <script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script> <script id="svgTemplate" type="text/x-jsrender"> <g> <rect width="280" height="280" style="fill:blue;stroke-width:0" /> <polyline points="0,0 280,0" style="fill:white;stroke:red;stroke-width:4"/> <polyline points="0,0 0,280" style="fill:white;stroke:red;stroke-width:0"/> <polyline points="280,0 280,280" style="fill:white;stroke:red;stroke-width:2"/> <polyline points="0,280 280,280" style="fill:white;stroke:red;stroke-width:3"/> </g> </script>
ASPX.CS NativeNode node = new NativeNode(); node.TemplateId = "svgTemplate";
EJMVC CSHTML //dependency scripts <script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script> <script id="svgTemplate" type="text/x-jsrender"> <g> <rect width="280" height="280" style="fill:blue;stroke-width:0" /> <polyline points="0,0 280,0" style="fill:white;stroke:red;stroke-width:4"/> <polyline points="0,0 0,280" style="fill:white;stroke:red;stroke-width:0"/> <polyline points="280,0 280,280" style="fill:white;stroke:red;stroke-width:2"/> <polyline points="0,280 280,280" style="fill:white;stroke:red;stroke-width:3"/> </g> </script>
Controller NativeNode node = new NativeNode(); node.TemplateId = "svgTemplate";
|
This page will automatically be redirected to the sign-in page in 10 seconds.