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

DiagramBuilder<TShapeModel, TConnectionModel>

Class

Defines the fluent API for configuring the Telerik UI for ASP.NET MVC Diagram.

Definition

Namespace:Kendo.Mvc.UI.Fluent

Assembly:Kendo.Mvc.dll

Type Parameters:

TShapeModel

TConnectionModel

Syntax:
C#
public class DiagramBuilder<TShapeModel, TConnectionModel> : WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>, IHtmlString where TShapeModel : class where TConnectionModel : class

Inheritance: objectWidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>DiagramBuilder<TShapeModel, TConnectionModel>

Implements: IHtmlString

Inherited Members WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.ToComponent()WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.Name(string)WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.Deferred(bool)WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.ModelMetadata(ModelMetadata)WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.HtmlAttributes(object)WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.HtmlAttributes(IDictionary<string, object>)WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.AsModule(bool)WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.Render()WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.ScriptAttributes(object, bool)WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.ScriptAttributes(IDictionary<string, object>, bool)WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.ToHtmlString()WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.ToClientTemplate()WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.ToString()WidgetBuilderBase<Diagram<TShapeModel, TConnectionModel>, DiagramBuilder<TShapeModel, TConnectionModel>>.Componentobject.GetType()object.MemberwiseClone()object.ToString()object.Equals(object)object.Equals(object, object)object.ReferenceEquals(object, object)object.GetHashCode()...

Constructors

DiagramBuilder(Diagram<TShapeModel, TConnectionModel>)

Initializes a new instance of the Diagram<TShapeModel, TConnectionModel> class.

C#
public DiagramBuilder(Diagram<TShapeModel, TConnectionModel> component)
Parameters:componentDiagram<TShapeModel, TConnectionModel>

The component.

Methods

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

Defines accessibility options for the diagram.

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

The action that configures the accessibility.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

AutoBind(bool)

If set to "false", the Diagram will not bind to the DataSource during its initialization. In this case, the data binding will occur when the Change event of the DataSource fires. By default, the Diagram will bind to the DataSource specified in its configuration.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> AutoBind(bool value)
Parameters:valuebool

The value that configures the automatic data binding.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.AutoBind(false)
.DataSource(dataSource =&gt; dataSource.Read(...))
)

ConnectionDefaults(Action<DiagramConnectionDefaultsSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the defaults of the Diagram connections. Whenever a connection is created, the specified default connections will be used and merged with the (optional) configuration passed through the connection creation method.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> ConnectionDefaults(Action<DiagramConnectionDefaultsSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramConnectionDefaultsSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the default connection settings.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.ConnectionDefaults(cd =&gt; cd
.Stroke(s =&gt; s.Color("#979797").Width(2))
)
)

Connections(Action<DiagramConnectionFactory<TShapeModel, TConnectionModel>>)

Defines the connections configuration.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Connections(Action<DiagramConnectionFactory<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramConnectionFactory<TShapeModel, TConnectionModel>>

The action that configures the connections.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

ConnectionsDataSource(Action<DiagramConnectionDataSourceBuilder<TConnectionModel>>)

Configures the DataSource of the connections.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> ConnectionsDataSource(Action<DiagramConnectionDataSourceBuilder<TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramConnectionDataSourceBuilder<TConnectionModel>>

The action that configures the ConnectionsDataSource(Action<DiagramConnectionDataSourceBuilder<TConnectionModel>>).

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@( Html.Kendo().Diagram()
.Name("diagram")
.ConnectionsDataSource(dataSource =&gt; dataSource
.Read(read =&gt; read
.Action("ConnectionsRead", "Diagram")
)
)
)

DataSource(Action<DiagramDataSourceBuilder<TShapeModel>>)

Configures the HierarchicalDataSource of the component.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> DataSource(Action<DiagramDataSourceBuilder<TShapeModel>> configurator)
Parameters:configuratorAction<DiagramDataSourceBuilder<TShapeModel>>

The action that configures the DataSource(Action<DiagramDataSourceBuilder<TShapeModel>>).

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@( Html.Kendo().Diagram()
.Name("diagram")
.DataSource(dataSource =&gt; dataSource
.Read(read =&gt; read
.Action("_OrgChart", "Diagram")
)
)
)

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

Defines how the Diagram behaves when the user attempts to edit, delete, or create shapes and connections, drag, resize, or rotate shapes.

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

The action that configures the editable settings.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Editable(e =&gt; e.Resize(true).Drag(true).ShapeTemplateName("ShapeEditor"))
)

Editable(bool)

Defines how the Diagram behaves when the user attempts to edit, delete, or create shapes and connections, drag, resize, or rotate shapes.

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

The value that toggles the editable option.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Editable(false)
)

Events(Action<DiagramEventBuilder>)

Configures the handled client-side events of the Diagram.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Events(Action<DiagramEventBuilder> configurator)
Parameters:configuratorAction<DiagramEventBuilder>

The action that configures the available events.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@( Html.Kendo().Diagram()
.Name("diagram")
.Events(events =&gt; events.Click("onClick"))
)

Layout(Action<DiagramLayoutSettingsBuilder<TShapeModel, TConnectionModel>>)

The layout of the Diagram consists of arranging the shapes and connections in some fashion to achieve an aesthetically pleasing experience for the user. It aims to give a more direct insight into the information contained within the Diagram and its relational structure. On a technical level, the layout consists of a multitude of algorithms and optimizations and various ad-hoc calculations, which depend on the type of layout.The criteria on which an algorithm is based vary but the common denominator is:

  • A clean separation of connected components (subgraphs).
  • An orderly organization of the shapes in such a way that siblings are close to one another (for example, a tight packing of shapes that belong together (parent of child relationship)).
  • A minimum of connection crossings.

The Diagram includes three of the most used layout algorithms, which must cover most of your layout needs - tree layout, force-directed layout, and layered layout.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Layout(Action<DiagramLayoutSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramLayoutSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the layout settings.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Layout(l =&gt; l
.Type(DiagramLayoutType.Tree)
.Subtype(DiagramLayoutSubtype.Down)
.HorizontalSeparation(30)
.VerticalSeparation(20)
)
)

Navigatable(Action<DiagramNavigatableSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the keyboard navigation options for the diagram.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Navigatable(Action<DiagramNavigatableSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramNavigatableSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the navigatable.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Pannable(Action<DiagramPannableSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the pan configuration. Use this setting to disable Diagram pan or change the key that activates the pan behavior.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Pannable(Action<DiagramPannableSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramPannableSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the pan settings.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Pannable(p =&gt; p.Key(DiagramPannableKey.Ctrl))
)

Pannable(bool)

Enables ort disables the Diagram pan.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Pannable(bool enabled)
Parameters:enabledbool

The value that toggles the pan feature.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Pannable(false)
)

Pdf(Action<DiagramPdfSettingsBuilder<TShapeModel, TConnectionModel>>)

Configures the PDF export settings.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Pdf(Action<DiagramPdfSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramPdfSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the PDF settings.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Pdf(pdf =&gt; pdf.FileName("Kendo UI Diagram Export.pdf").ProxyURL(Url.Action("Pdf_Export_Save", "Diagram")))
)

Selectable(Action<DiagramSelectableSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the selectable options.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Selectable(Action<DiagramSelectableSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramSelectableSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the selectable settings.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Selectable(s =&gt; s.Key(DiagramSelectableKey.Alt).Multiple(true))
)

Selectable(bool)

Defines the selectable options.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Selectable(bool enabled)
Parameters:enabledbool

The value that toggles the selectable option.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Selectable(false)
)

ShapeDefaults(Action<DiagramShapeDefaultsSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the default options that will be applied to all shapes in the Diagram.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> ShapeDefaults(Action<DiagramShapeDefaultsSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeDefaultsSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the default shape settings.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.ShapeDefaults(sd =&gt; sd
.Visual("visualTemplate")
.Content(c =&gt; c.Template("#= dataItem.JobTitle #").FontSize(17))
)
)

Shapes(Action<DiagramShapeFactory<TShapeModel, TConnectionModel>>)

Defines the shape options.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Shapes(Action<DiagramShapeFactory<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramShapeFactory<TShapeModel, TConnectionModel>>

The action that configures the shapes.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

TabIndex(double)

The tabIndex value to set on the diagram element.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> TabIndex(double value)
Parameters:valuedouble

The value that configures the tab index.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Template(string)

The template that renders the content of the shape when bound to a DataSource. The names you can use in the template correspond to the properties used in the DataSource.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Template(string value)
Parameters:valuestring

The value that configures the template content.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Template("#= Name #")
)

Template<TModel>(TemplateBuilder<TModel>)

The template which renders the content of the shape when bound to a dataSource. The names you can use in the template correspond to the properties used in the dataSource. For an example, refer to the dataSource topic below.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Template<TModel>(TemplateBuilder<TModel> template)
Parameters:templateTemplateBuilder<TModel>

A Template component that configures the template.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

TemplateHandler(string)

The template that renders the content of the shape when bound to a DataSource. The names you can use in the template correspond to the properties used in the DataSource.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> TemplateHandler(string value)
Parameters:valuestring

The value that configures the template content.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.TemplateHandler("getShapeTemplate")
)
&lt;script&gt;
function getShapeTemplate(data) {
return `${data.Name}`;
}
&lt;/script&gt;

TemplateId(string)

The template that renders the content of the shape when bound to a DataSource. The names you can use in the template correspond to the properties used in the DataSource.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> TemplateId(string value)
Parameters:valuestring

The value that configures the template content.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.TemplateId("shapeTemplate")
)
&lt;script id="shapeTemplate" type="text/x-kendo-template"&gt;
#=Name#
&lt;/script&gt;

TemplateView(MvcHtmlString)

The template that renders the content of the shape when bound to a DataSource. The names you can use in the template correspond to the properties used in the DataSource.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> TemplateView(MvcHtmlString value)
Parameters:valueMvcHtmlString

The value that configures the template content.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.TemplateView(Html.Partial("ShapeTemplateView"))
)

Theme(string)

Sets the theme of the Diagram. With versions before R1 2023, the theme can be either the respective LESS theme or "sass". When the option is set to "sass". the Diagram will read the variables from a Sass-based theme. Note: Since Q2 2024 release, the default value for the Theme() option is "sass" instead of "default". It is recommended to use "sass" with version Q2 2024 or later.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Theme(string value)
Parameters:valuestring

The value that configures the theme.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Theme("sass")
)

Tooltip(Action<DiagramTooltipSettingsBuilder<TShapeModel, TConnectionModel>>)

Defines the tooltip settings for the diagram.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Tooltip(Action<DiagramTooltipSettingsBuilder<TShapeModel, TConnectionModel>> configurator)
Parameters:configuratorAction<DiagramTooltipSettingsBuilder<TShapeModel, TConnectionModel>>

The action that configures the tooltip.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Tooltip(bool)

Defines the tooltip settings for the diagram.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Tooltip(bool enabled)
Parameters:enabledbool

Enables or disables the tooltip option.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Zoom(double)

Defines the default zoom level of the Diagram in percentages.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> Zoom(double value)
Parameters:valuedouble

The value that configures the zoom level.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.Zoom(1.5)
)

ZoomMax(double)

Defines the maximum zoom level in percentages. The user will not be allowed to zoom in past this level.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> ZoomMax(double value)
Parameters:valuedouble

The value that configures the maximum zoom level.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.ZoomMax(1.5)
)

ZoomMin(double)

Defines the minimum zoom level in percentages. The user will not be allowed to zoom out past this level.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> ZoomMin(double value)
Parameters:valuedouble

The value that configures the minimum zoom level.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.ZoomMin(0.5)
)

ZoomRate(double)

Defines the zoom step when using the mouse-wheel to zoom in or out.

C#
public DiagramBuilder<TShapeModel, TConnectionModel> ZoomRate(double value)
Parameters:valuedouble

The value that configures the zoom step.

Returns:

DiagramBuilder<TShapeModel, TConnectionModel>

Example:
C#
@(Html.Kendo().Diagram()
.Name("diagram")
.ZoomRate(0.5)
)
In this article
DefinitionConstructorsDiagramBuilder(Diagram<TShapeModel, TConnectionModel>)MethodsAccessibility(Action<DiagramAccessibilitySettingsBuilder<TShapeModel, TConnectionModel>>)AutoBind(bool)ConnectionDefaults(Action<DiagramConnectionDefaultsSettingsBuilder<TShapeModel, TConnectionModel>>)Connections(Action<DiagramConnectionFactory<TShapeModel, TConnectionModel>>)ConnectionsDataSource(Action<DiagramConnectionDataSourceBuilder<TConnectionModel>>)DataSource(Action<DiagramDataSourceBuilder<TShapeModel>>)Editable(Action<DiagramEditableSettingsBuilder<TShapeModel, TConnectionModel>>)Editable(bool)Events(Action<DiagramEventBuilder>)Layout(Action<DiagramLayoutSettingsBuilder<TShapeModel, TConnectionModel>>)Navigatable(Action<DiagramNavigatableSettingsBuilder<TShapeModel, TConnectionModel>>)Pannable(Action<DiagramPannableSettingsBuilder<TShapeModel, TConnectionModel>>)Pannable(bool)Pdf(Action<DiagramPdfSettingsBuilder<TShapeModel, TConnectionModel>>)Selectable(Action<DiagramSelectableSettingsBuilder<TShapeModel, TConnectionModel>>)Selectable(bool)ShapeDefaults(Action<DiagramShapeDefaultsSettingsBuilder<TShapeModel, TConnectionModel>>)Shapes(Action<DiagramShapeFactory<TShapeModel, TConnectionModel>>)TabIndex(double)Template(string)Template<TModel>(TemplateBuilder<TModel>)TemplateHandler(string)TemplateId(string)TemplateView(MvcHtmlString)Theme(string)Tooltip(Action<DiagramTooltipSettingsBuilder<TShapeModel, TConnectionModel>>)Tooltip(bool)Zoom(double)ZoomMax(double)ZoomMin(double)ZoomRate(double)
Not finding the help you need?
Contact Support