Back to all docs
API Reference / Kendo.Mvc.UI.Fluent / DiagramShapeBuilder<TShapeModel, TConnectionModel>
New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Class

Defines the fluent API for configuring the DiagramShape settings.

Definition

Namespace:Kendo.Mvc.UI.Fluent

Assembly:Kendo.Mvc.dll

Type Parameters:

TShapeModel

TConnectionModel

Syntax:
C#
public class DiagramShapeBuilder<TShapeModel, TConnectionModel> where TShapeModel : class where TConnectionModel : class

Inheritance: objectDiagramShapeBuilder<TShapeModel, TConnectionModel>

Inherited Members object.GetType()object.MemberwiseClone()object.ToString()object.Equals(object)object.Equals(object, object)object.ReferenceEquals(object, object)object.GetHashCode()...

Constructors

DiagramShapeBuilder(DiagramShape)

C#
public DiagramShapeBuilder(DiagramShape settings)
Parameters:settingsDiagramShape

Methods

Accessibility(Action<DiagramShapeAccessibilitySettingsBuilder<TShapeModel, TConnectionModel>>)

Defines accessibility options for the shape.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Accessibility(Action<DiagramShapeAccessibilitySettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeAccessibilitySettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the accessibility.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Center(Action<DiagramShapeCenterSettingsBuilder<TShapeModel, TConnectionModel>>)

The center point of the shape.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Center(Action<DiagramShapeCenterSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeCenterSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the center.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

ConnectorDefaults(Action<DiagramShapeConnectorDefaultsSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the default options for all connectors belonging to a given shape.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> ConnectorDefaults(Action<DiagramShapeConnectorDefaultsSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeConnectorDefaultsSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the default connectors.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Connectors(Action<DiagramShapeConnectorFactory<TShapeModel, TConnectionModel>>)

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.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Connectors(Action<DiagramShapeConnectorFactory<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeConnectorFactory<TShapeModel, TConnectionModel>>

The action that configures the connectors.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Content(Action<DiagramShapeContentSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the shapes content settings.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Content(Action<DiagramShapeContentSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeContentSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the content.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Content(c =&gt; c.Text("Monday").Align("top left").Color("yellow"))
)
)

CornerRadius(double)

Defines the corner radius of the shape.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> CornerRadius(double value)
Parameters:valuedouble

The value that configures the corner radius.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

DataItem(object)

The data item associated with the shape.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> DataItem(object value)
Parameters:valueobject

The value that configures the data item.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Editable(Action<DiagramShapeEditableSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the shape editable options.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Editable(Action<DiagramShapeEditableSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeEditableSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the editable settings.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Editable(e =&gt; e.Connect(false).Tools(tt =&gt; tt.Delete()))
)
)

Editable(bool)

Defines the shape editable options.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Editable(bool enabled)
Parameters:enabledbool

The value that enables or disables the shape editing.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape.Add().Editable(false))
)

Fill(Action<DiagramShapeFillSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the background fill options of the shape.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Fill(Action<DiagramShapeFillSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeFillSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the fill settings.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Fill(f =&gt; f.Color("lime").Opacity(0.5))
)
)

Height(double)

Defines the height of the shape when added to the Diagram.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Height(double value)
Parameters:valuedouble

The value that configures the height.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Height(50)
)
)

Hover(Action<DiagramShapeHoverSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the hover configuration.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Hover(Action<DiagramShapeHoverSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeHoverSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the hover.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Hover(hover =&gt; hover.Fill(f =&gt; f.Color("gold")))
)
)

Id(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.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Id(string value)
Parameters:valuestring

The value that configures the id.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Id("1")
)
)

MinHeight(double)

Defines the minimum height the shape must have. For example, the shape cannot be resized to a value smaller than the given one.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> MinHeight(double value)
Parameters:valuedouble

The value that configures the minimum height.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Id("1").MinHeight(50)
)
)

MinWidth(double)

Defines the minimum width the shape must have. For example, the shape cannot be resized to a value smaller than the given one.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> MinWidth(double value)
Parameters:valuedouble

The value that configures the minimum width.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Id("1").MinWidth(50)
)
)

Path(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.").

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Path(string value)
Parameters:valuestring

The value that configures the path.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; 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")
)
)

Radius(double)

The radius of circular shapes.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Radius(double value)
Parameters:valuedouble

The value that configures the radius.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Rotation(Action<DiagramShapeRotationSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines a rotation angle for the shape.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Rotation(Action<DiagramShapeRotationSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeRotationSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the rotation settings.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Rotation(r =&gt; r.Angle(45))
)
)

Selectable(bool)

Specifies if the shape can be selected.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Selectable(bool value)
Parameters:valuebool

The value that configures the selectable.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Source(string)

Sets the source of the shape image. The option applies when the shape type is "image".

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Source(string value)
Parameters:valuestring

The value that configures the source.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Type("image").Source("image source value")
)
)

Stroke(Action<DiagramShapeStrokeSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the shape border stroke configuration.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Stroke(Action<DiagramShapeStrokeSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeStrokeSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the stroke.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Stroke(s =&gt; s.Width(4).Color("yellow"))
)
)

Type(DiagramShapeType)

Specifies the type of the Diagram Shape using any of the built-in shape type. rectangle: this is the default option; circle: a circle/ellipse; image: an image or text: some text.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Type(DiagramShapeType value)
Parameters:valueDiagramShapeType

The value for Type

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Returns the current DiagramShapeBuilder<TShapeModel, TConnectionModel> instance.

Type(FlowchartShapeType)

Specifies the type of the Workflow Shape type using any of the built-in shape types. Terminator: Start and end points of the workflow.; Process: Standard processing steps or actions.; Decision: Decision points with Yes/No or True/False branches.; Document: Document creation or data output.; PredefinedProcess: Subroutines or predefined operations.; Database:Database operations or data storage.; Delay:Wait periods or time-based operations. or ManualOperation:Manual tasks requiring human intervention.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Type(FlowchartShapeType value)
Parameters:valueFlowchartShapeType

The value for Type

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Returns the current DiagramShapeBuilder<TShapeModel, TConnectionModel> instance.

Type(string)

Specifies the type of the Shape using any of the built-in shape type. rectangle: this is the default option; circle: a circle/ellipse; image: an image or text: some text. Or common workflow shapes as: Terminator: Start and end points of the workflow.; Process: Standard processing steps or actions.; Decision: Decision points with Yes/No or True/False branches.; Document: Document creation or data output.; PredefinedProcess: Subroutines or predefined operations.; Database:Database operations or data storage.; Delay:Wait periods or time-based operations. or ManualOperation:Manual tasks requiring human intervention..

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Type(string value)
Parameters:valuestring

The value that configures the type.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Type("circle")
)
)

Visual(Func<object, object>)

Defines a JavaScript function that returns a visual element to render for the Shape.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Visual(Func<object, object> inlineCodeBlock)
Parameters:inlineCodeBlockFunc<object, object>

The handler code wrapped in a text tag (Razor syntax).

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Visual(@&lt;text&gt;
function(e) {
// Return a custom visual element.
}
&lt;/text&gt;)
)
)

Visual(string)

Defines a JavaScript function that returns a visual element to render for the Shape.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Visual(string visualHandler)
Parameters:visualHandlerstring

The name of the JavaScript function that will create the visual element.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Visual("getShapeElement")
)
)

Width(double)

Defines the width of the shape when added to the Diagram.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Width(double value)
Parameters:valuedouble

The value that configures the width.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().Width(150)
)
)

X(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.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> X(double value)
Parameters:valuedouble

The value that configures the x-coordinate.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().X(100).Y(20)
)
)

Y(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.

C#
public DiagramShapeBuilder<TShapeModel, TConnectionModel> Y(double value)
Parameters:valuedouble

The value that configures the y-coordinate.

Returns:

DiagramShapeBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape =&gt; shape
.Add().X(100).Y(20)
)
)
In this article
DefinitionConstructorsDiagramShapeBuilder(DiagramShape)MethodsAccessibility(Action<DiagramShapeAccessibilitySettingsBuilder<TShapeModel, TConnectionModel>>)Center(Action<DiagramShapeCenterSettingsBuilder<TShapeModel, TConnectionModel>>)ConnectorDefaults(Action<DiagramShapeConnectorDefaultsSettingsBuilder<TShapeModel, TConnectionModel>>)Connectors(Action<DiagramShapeConnectorFactory<TShapeModel, TConnectionModel>>)Content(Action<DiagramShapeContentSettingsBuilder<TShapeModel, TConnectionModel>>)CornerRadius(double)DataItem(object)Editable(Action<DiagramShapeEditableSettingsBuilder<TShapeModel, TConnectionModel>>)Editable(bool)Fill(Action<DiagramShapeFillSettingsBuilder<TShapeModel, TConnectionModel>>)Height(double)Hover(Action<DiagramShapeHoverSettingsBuilder<TShapeModel, TConnectionModel>>)Id(string)MinHeight(double)MinWidth(double)Path(string)Radius(double)Rotation(Action<DiagramShapeRotationSettingsBuilder<TShapeModel, TConnectionModel>>)Selectable(bool)Source(string)Stroke(Action<DiagramShapeStrokeSettingsBuilder<TShapeModel, TConnectionModel>>)Type(DiagramShapeType)Type(FlowchartShapeType)Type(string)Visual(Func<object, object>)Visual(string)Width(double)X(double)Y(double)
Not finding the help you need?
Contact Support