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.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
