DiagramShapeBuilder
Methods
ConnectorDefaults(System.Action)
Defines the default options for all connectors belonging to a given shape.
Parameters
configurator - System.Action<DiagramShapeConnectorBuilder>
The action that configures the default connectors.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().ConnectorDefaults(cd => cd.Width(10).Height(10))
)
)
Connectors(System.Action)
Defines the connectors available in the shape. A connector is the point in the shape where a connection between this shape and another one can originate from or end.
Parameters
configurator - System.Action<DiagramShapeConnectorFactory>
The action that configures the connectors.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Connectors(cc =>
{
cc.Add().Name("top").Height(20).Width(20);
cc.Add().Name("right").Height(10).Width(10);
}))
)
Content(System.Action)
Defines the shapes content settings.
Parameters
configurator - System.Action<DiagramShapeContentSettingsBuilder>
The action that configures the content.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Content(c => c.Text("Monday").Align("top left").Color("yellow"))
)
)
Editable(System.Boolean)
Defines the shape editable options.
Parameters
enabled - System.Boolean
The value that enables or disables the shape editing.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape.Add().Editable(false))
)
Editable(System.Action)
Defines the shape editable options.
Parameters
configurator - System.Action<DiagramShapeEditableSettingsBuilder>
The action that configures the editable settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Editable(e => e.Connect(false).Tools(tt => tt.Delete()))
)
)
Fill(System.Action)
Defines the background fill options of the shape.
Parameters
configurator - System.Action<DiagramShapeFillSettingsBuilder>
The action that configures the fill settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Fill(f => f.Color("lime").Opacity(0.5))
)
)
Height(System.Double)
Defines the height of the shape when added to the Diagram.
Parameters
value - System.Double
The value that configures the height.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Height(50)
)
)
Hover(System.Action)
Defines the hover configuration of the shape.
Parameters
configurator - System.Action<DiagramShapeHoverSettingsBuilder>
The action that configures the hover.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Hover(hover => hover.Fill(f => f.Color("gold")))
)
)
Id(System.String)
Defines the unique identifier for a Shape. The Id value is used to identify shapes in connection configurations. The connection To() and From() properties usually point to shape Id values.
Parameters
value - System.String
The value that configures the id.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Id("1")
)
)
MinHeight(System.Double)
Defines the minimum height the shape must have. For example, the shape cannot be resized to a value smaller than the given one.
Parameters
value - System.Double
The value that configures the minimum height.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Id("1").MinHeight(50)
)
)
MinWidth(System.Double)
Defines the minimum width the shape must have. For example, the shape cannot be resized to a value smaller than the given one.
Parameters
value - System.Double
The value that configures the minimum width.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Id("1").MinWidth(50)
)
)
Path(System.String)
Sets the path option of a Shape, which is a description of a custom geometry. The format follows the standard SVG format (http://www.w3.org/TR/SVG/paths.html#PathData "SVG Path data.").
Parameters
value - System.String
The value that configures the path.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Id("1").Path("m35.15,0 L84.85,0 L120,35.15 L120,84.85 L84.85,120 L35.15,120 L0,84.85 L0,35.15 z")
)
)
Rotation(System.Action)
Defines a rotation angle for the shape.
Parameters
configurator - System.Action<DiagramShapeRotationSettingsBuilder>
The action that configures the rotation settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Rotation(r => r.Angle(45))
)
)
Source(System.String)
Sets the source of the shape image. The option applies when the shape type is "image".
Parameters
value - System.String
The value that configures the source.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Type("image").Source("image source value")
)
)
Stroke(System.Action)
Defines the shape border stroke configuration.
Parameters
configurator - System.Action<DiagramShapeStrokeSettingsBuilder>
The action that configures the stroke.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Stroke(s => s.Width(4).Color("yellow"))
)
)
Type(System.String)
Specifies the type of the Shape using any of the built-in shape types: "rectangle" (default), "circle", "image".
Parameters
value - System.String
The value that configures the type.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Type("circle")
)
)
Width(System.Double)
Defines the width of the shape when added to the Diagram.
Parameters
value - System.Double
The value that configures the width.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Width(150)
)
)
X(System.Double)
Defines the x-coordinate of the shape when added to the Diagram. The option does not take effect if the Diagram is using a pre-defined layout.
Parameters
value - System.Double
The value that configures the x-coordinate.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().X(100).Y(20)
)
)
Y(System.Double)
Defines the y-coordinate of the shape when added to the Diagram. The option does not take effect if the Diagram is using a pre-defined layout.
Parameters
value - System.Double
The value that configures the y-coordinate.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().X(100).Y(20)
)
)
Visual(System.Func)
Defines a JavaScript function that returns a visual element to render for the Shape.
Parameters
inlineCodeBlock - System.Func<Object,Object>
The handler code wrapped in a text tag (Razor syntax).
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Visual(@<text>
function(e) {
// Return a custom visual element.
}
</text>)
)
)
Visual(System.String)
Defines a JavaScript function that returns a visual element to render for the Shape.
Parameters
visualHandler - System.String
The name of the JavaScript function that will create the visual element.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add().Visual("getShapeElement")
)
)