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

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Class

Defines the fluent API for configuring the DiagramConnection settings.

Definition

Namespace:Kendo.Mvc.UI.Fluent

Assembly:Kendo.Mvc.dll

Type Parameters:

TShapeModel

TConnectionModel

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

Inheritance: objectDiagramConnectionBuilder<TShapeModel, TConnectionModel>

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

Constructors

DiagramConnectionBuilder(DiagramConnection)

C#
public DiagramConnectionBuilder(DiagramConnection settings)
Parameters:settingsDiagramConnection

Methods

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

Defines accessibility options for the connection.

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

The action that configures the accessibility.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

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

Defines the content settings of the connection.

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

The action that configures the content settings.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().Content(c =&gt; c.Text("Step 1").FontSize(16));
})
)

CornerRadius(double)

Defines the corner radius of the connection.

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

The value that configures the corner radius.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

DataItem(object)

Defines the connection dataItem.

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

The value that configures the data item.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

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

Defines the connection editable options.

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

The action that configures the editable settings.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().Editable(edit =&gt; edit.Tools(tool =&gt; tool.Edit().Text("Update")));
})
)

Editable(bool)

Defines the connection editable options.

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

The value that toggles the editable option.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().Editable(false);
})
)

EndCap(Action<DiagramConnectionEndCapSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the connection end cap configuration.

C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> EndCap(Action<DiagramConnectionEndCapSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramConnectionEndCapSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the end cap settings.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().EndCap(endcap =&gt; endcap.Type("ArrowEnd").Stroke(s =&gt; s.Color("blue")));
})
)

EndCap(string)

Sets the connection end cap type name. The supported values are: "none", "ArrowEnd", and "FilledCircle". You can also use "ArrowStart", but its direction will be inversed.

C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> EndCap(string type)
Parameters:typestring

The value that configures the end cap type.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().EndCap("FilledCircle");
})
)

From(Action<DiagramConnectionFromSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the source of the connection. You can set this property to a value matching a shape id or to an object with XY-coordinates.

C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> From(Action<DiagramConnectionFromSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramConnectionFromSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the source settings.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().From(f =&gt; f.X(20).Y(70));
})
)

FromConnector(string)

Specifies the name of the source shape connector that must be used by the connection.

C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> FromConnector(string value)
Parameters:valuestring

The value that configures the source connector.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().FromConnector("bottom");
})
)

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

Defines the hover configuration of the connection.

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

The action that configures the hover settings.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().Hover(h =&gt; h.Stroke(s =&gt; s.Color("red")));
})
)

Points(Action<DiagramConnectionPointFactory<TShapeModel, TConnectionModel>>)

Sets the intermediate points (in global coordinates) of the connection. It is important to note that currently these points cannot be manipulated through the interface.

C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> Points(Action<DiagramConnectionPointFactory<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramConnectionPointFactory<TShapeModel, TConnectionModel>>

The action that configures the points.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Selectable(bool)

Specifies if the connection can be selected.

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

The value that configures the selectable.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Selection(Action<DiagramConnectionSelectionSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the connection selection configuration.

C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> Selection(Action<DiagramConnectionSelectionSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramConnectionSelectionSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the selection options.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().Selection(s =&gt; s.Handles(h=&gt; h.Width(20).Height(20)));
})
)

StartCap(Action<DiagramConnectionStartCapSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the connection start cap configuration.

C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> StartCap(Action<DiagramConnectionStartCapSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramConnectionStartCapSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the start cap.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().StartCap(sc =&gt; sc.Fill(f =&gt; f.Color("red")).Stroke(s =&gt; s.Color("blue")));
})
)

StartCap(string)

Defines the connection start cap type. The supported values are: "none", "ArrowStart", and "FilledCircle".

C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> StartCap(string type)
Parameters:typestring

The value that configures the start cap type.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().StartCap("FilledCircle");
})
)

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

Defines the stroke configuration of the connection.

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

The action that configures the stroke settings.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().Stroke(s =&gt; s.Color("#33ccff").Width(3));
})
)

To(Action<DiagramConnectionToSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the target of the connection. You can set this property to a value matching a shape id or to an object with XY-coordinates.

C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> To(Action<DiagramConnectionToSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramConnectionToSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the target settings.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().To(t =&gt; t.X(450).Y(70));
})
)

ToConnector(string)

Specifies the name of the target shape connector that must be used by the connection.

C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> ToConnector(string value)
Parameters:valuestring

The value that configures the target connector.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().ToConnector("bottom");
})
)

Type(DiagramConnectionType)

Specifies the connection type that defines the way it routes. The routing of a connection is the way intermediate points of a connection define a route. A route is usually defined on the basis of constraints or behaviors. Currently, there are two routing mechanisms for Diagram connections:

  • Polyline route - Connects the defined intermediate points.
  • Cascading route - A simple rectangular route that creates a cascading path between the two ends of a connection, ignoring given connection points. The cascading type is useful when using tree layout and hierarchies. The routed connection will in this case enhance the representation of the hierarchy, reproducing a classic organization diagram.
C#
public DiagramConnectionBuilder<TShapeModel, TConnectionModel> Type(DiagramConnectionType value)
Parameters:valueDiagramConnectionType

The enum value that configures the type option.

Returns:

DiagramConnectionBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(connection =&gt;
{
connection.Add().Type(DiagramConnectionType.Cascading);
})
)
In this article
DefinitionConstructorsDiagramConnectionBuilder(DiagramConnection)MethodsAccessibility(Action<DiagramConnectionAccessibilitySettingsBuilder<TShapeModel, TConnectionModel>>)Content(Action<DiagramConnectionContentSettingsBuilder<TShapeModel, TConnectionModel>>)CornerRadius(double)DataItem(object)Editable(Action<DiagramConnectionEditableSettingsBuilder<TShapeModel, TConnectionModel>>)Editable(bool)EndCap(Action<DiagramConnectionEndCapSettingsBuilder<TShapeModel, TConnectionModel>>)EndCap(string)From(Action<DiagramConnectionFromSettingsBuilder<TShapeModel, TConnectionModel>>)FromConnector(string)Hover(Action<DiagramConnectionHoverSettingsBuilder<TShapeModel, TConnectionModel>>)Points(Action<DiagramConnectionPointFactory<TShapeModel, TConnectionModel>>)Selectable(bool)Selection(Action<DiagramConnectionSelectionSettingsBuilder<TShapeModel, TConnectionModel>>)StartCap(Action<DiagramConnectionStartCapSettingsBuilder<TShapeModel, TConnectionModel>>)StartCap(string)Stroke(Action<DiagramConnectionStrokeSettingsBuilder<TShapeModel, TConnectionModel>>)To(Action<DiagramConnectionToSettingsBuilder<TShapeModel, TConnectionModel>>)ToConnector(string)Type(DiagramConnectionType)
Not finding the help you need?
Contact Support