DiagramConnectionBuilder

Methods

Content(System.Action)

Defines the content settings of the connection.

Parameters

configurator - System.Action<DiagramConnectionContentSettingsBuilder>

The action that configures the content settings.

Example

             @(Html.Kendo().Diagram()
              .Name("diagram")
              .Connections(connection =>
              {
                 connection.Add().Content(c => c.Text("Step 1").FontSize(16));
               })
             )

Editable(System.Boolean)

Enables or disables the connection editing.

Parameters

enabled - System.Boolean

The value that toggles the editable option.

Example

             @(Html.Kendo().Diagram()
              .Name("diagram")
              .Connections(connection =>
              {
                 connection.Add().Editable(false);
               })
             )

Editable(System.Action)

Defines the connection editable options.

Parameters

configurator - System.Action<DiagramConnectionEditableSettingsBuilder>

The action that configures the editable settings.

Example

             @(Html.Kendo().Diagram()
              .Name("diagram")
              .Connections(connection =>
              {
                 connection.Add().Editable(edit => edit.Tools(tool => tool.Edit().Text("Update")));
               })
             )

EndCap(System.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.

Parameters

type - System.String

The value that configures the end cap type.

Example

             @(Html.Kendo().Diagram()
              .Name("diagram")
              .Connections(connection =>
              {
                 connection.Add().EndCap("FilledCircle");
               })
             )

EndCap(System.Action)

Defines the connection end cap configuration.

Parameters

configurator - System.Action<DiagramConnectionEndCapSettingsBuilder>

The action that configures the end cap settings.

Example

             @(Html.Kendo().Diagram()
              .Name("diagram")
              .Connections(connection =>
              {
                 connection.Add().EndCap(endcap => endcap.Type("ArrowEnd").Stroke(s => s.Color("blue")));
               })
             )

From(System.Action)

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.

Parameters

configurator - System.Action<DiagramConnectionFromSettingsBuilder>

The action that configures the source settings.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Connections(connection =>
                {
                   connection.Add().From(f => f.X(20).Y(70));
                })
               )

Hover(System.Action)

Defines the hover configuration of the connection.

Parameters

configurator - System.Action<DiagramConnectionHoverSettingsBuilder>

The action that configures the hover settings.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Connections(connection =>
                {
                   connection.Add().Hover(h => h.Stroke(s => s.Color("red")));
                })
               )

Points(System.Action)

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.

Parameters

configurator - System.Action<DiagramConnectionPointFactory>

The action that configures the points settings.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Connections(connection =>
                {
                   connection.Add().Points(p =>
                   {
                      p.Add().X(150).Y(20);
                      p.Add().X(270).Y(20);
                   })
                })
               )

Selection(System.Action)

Defines the connection selection configuration.

Parameters

configurator - System.Action<DiagramConnectionSelectionSettingsBuilder>

The action that configures the selection options.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Connections(connection =>
                {
                   connection.Add().Selection(s => s.Handles(h=> h.Width(20).Height(20)));
                })
               )

StartCap(System.String)

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

Parameters

type - System.String

The value that configures the start cap type.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Connections(connection =>
                {
                   connection.Add().StartCap("FilledCircle");
                })
               )

StartCap(System.Action)

Defines the connection start cap configuration.

Parameters

configurator - System.Action<DiagramConnectionStartCapSettingsBuilder>

The action that configures the start cap.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Connections(connection =>
                {
                   connection.Add().StartCap(sc => sc.Fill(f => f.Color("red")).Stroke(s => s.Color("blue")));
                })
               )

Stroke(System.Action)

Defines the stroke configuration of the connection.

Parameters

configurator - System.Action<DiagramConnectionStrokeSettingsBuilder>

The action that configures the stroke settings.

Example

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

To(System.Action)

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.

Parameters

configurator - System.Action<DiagramConnectionToSettingsBuilder>

The action that configures the target settings.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Connections(connection =>
                {
                   connection.Add().To(t => t.X(450).Y(70));
                })
               )

Type(Kendo.Mvc.UI.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.

Parameters

value - DiagramConnectionType

The enum value that configures the type option.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Connections(connection =>
                {
                   connection.Add().Type(DiagramConnectionType.Cascading);
                })
               )

FromConnector(System.String)

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

Parameters

value - System.String

The value that configures the source connector.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Connections(connection =>
                {
                   connection.Add().FromConnector("bottom");
                })
               )

ToConnector(System.String)

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

Parameters

value - System.String

The value that configures the target connector.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Connections(connection =>
                {
                   connection.Add().ToConnector("bottom");
                })
               )