DiagramBuilder
Methods
AutoBind(System.Boolean)
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.
Parameters
value - System.Boolean
The value that configures the automatic data binding.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.AutoBind(false)
.DataSource(dataSource => dataSource.Read(...))
)
ConnectionDefaults(System.Action)
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.
Parameters
configurator - System.Action<DiagramConnectionDefaultsSettingsBuilder>
The action that configures the default connection settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.ConnectionDefaults(cd => cd
.Stroke(s => s.Color("#979797").Width(2))
)
)
Connections(System.Action)
Defines the connections configuration.
Parameters
configurator - System.Action<DiagramConnectionFactory>
The action that configures the connections settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Connections(c => c
.Add()
.From(f => f.X(20).Y(70))
.To(t => t.X(450).Y(70))
.Content(c => c.Text("Step 1"))
)
)
Editable(System.Boolean)
Defines how the Diagram behaves when the user attempts to edit, delete, or create shapes and connections, drag, resize, or rotate shapes.
Parameters
enabled - System.Boolean
The value that toggles the editable option.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Editable(false)
)
Editable(System.Action)
Defines how the Diagram behaves when the user attempts to edit, delete, or create shapes and connections, drag, resize, or rotate shapes.
Parameters
configurator - System.Action<DiagramEditableSettingsBuilder>
The action that configures the editable settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Editable(e => e.Resize(true).Drag(true).ShapeTemplateName("ShapeEditor"))
)
Layout(System.Action)
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.
Parameters
configurator - System.Action<DiagramLayoutSettingsBuilder>
The action that configures the layout settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Layout(l => l
.Type(DiagramLayoutType.Tree)
.Subtype(DiagramLayoutSubtype.Down)
.HorizontalSeparation(30)
.VerticalSeparation(20)
)
)
Pannable(System.Boolean)
Parameters
enabled - System.Boolean
Pannable(System.Action)
Defines the pan configuration. Use this setting to disable Diagram pan or change the key that activates the pan behavior.
Parameters
configurator - System.Action<DiagramPannableSettingsBuilder>
The action that configures the pan settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Pannable(p => p.Key(DiagramPannableKey.Ctrl))
)
Pdf(System.Action)
Configures the PDF export settings.
Parameters
configurator - System.Action<DiagramPdfSettingsBuilder>
The action that configures the PDF settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Pdf(pdf => pdf.FileName("Kendo UI Diagram Export.pdf").ProxyURL(Url.Action("Pdf_Export_Save", "Diagram")))
)
Selectable(System.Boolean)
Enables or disables the Diagram selection.
Parameters
enabled - System.Boolean
The value that toggles the selectable option.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Selectable(false)
)
Selectable(System.Action)
Defines the selectable options.
Parameters
configurator - System.Action<DiagramSelectableSettingsBuilder>
The action that configures the selectable settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Selectable(s => s.Key(DiagramSelectableKey.Alt).Multiple(true))
)
ShapeDefaults(System.Action)
Defines the default options that will be applied to all shapes in the Diagram.
Parameters
configurator - System.Action<DiagramShapeDefaultsSettingsBuilder>
The action that configures the default shape settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.ShapeDefaults(sd => sd
.Visual("visualTemplate")
.Content(c => c.Template("#= dataItem.JobTitle #").FontSize(17))
)
)
Shapes(System.Action)
Defines the shape options.
Parameters
configurator - System.Action<DiagramShapeFactory>
The action that configures the shape settings.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Shapes(shape => shape
.Add()
.Type("circle").Id("1").Content(c => c.Text("Step 1"))
)
)
Template(System.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.
Parameters
value - System.String
The value that configures the template content.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Template("#= Name #")
)
TemplateId(System.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.
Parameters
value - System.String
The name of the Kendo UI external template.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.TemplateId("shapeTemplate")
)
<script id="shapeTemplate" type="text/x-kendo-template">
#=Name#
</script>
TemplateView(System.Web.Mvc.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.
Parameters
value - System.Web.Mvc.MvcHtmlString
The Razor View that will be used for rendering the shape template.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.TemplateView(Html.Partial("ShapeTemplateView"))
)
TemplateHandler(System.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.
Parameters
value - System.String
The JavaScript function that will return the template content.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.TemplateHandler("getShapeTemplate")
)
<script>
function getShapeTemplate(data) {
return `${data.Name}`;
}
</script>
Theme(System.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.
Parameters
theme - System.String
The value that configures the Diagram theme.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Theme("sass")
)
Zoom(System.Double)
Defines the default zoom level of the Diagram in percentages.
Parameters
value - System.Double
The value that configures the zoom level.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.Zoom(1.5)
)
ZoomMax(System.Double)
Defines the maximum zoom level in percentages. The user will not be allowed to zoom in past this level.
Parameters
value - System.Double
The value that configures the maximum zoom level.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.ZoomMax(1.5)
)
ZoomMin(System.Double)
Defines the minimum zoom level in percentages. The user will not be allowed to zoom out past this level.
Parameters
value - System.Double
The value that configures the minimum zoom level.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.ZoomMin(0.5)
)
ZoomRate(System.Double)
Defines the zoom step when using the mouse-wheel to zoom in or out.
Parameters
value - System.Double
The value that configures the zoom step.
Example
@(Html.Kendo().Diagram()
.Name("diagram")
.ZoomRate(0.5)
)
DataSource(System.Action)
Configures the HierarchicalDataSource of the component.
Parameters
configurator - System.Action<DiagramDataSourceBuilder>
The action that configures the Kendo.Mvc.UI.Fluent.DiagramBuilder.DataSource(System.Action{Kendo.Mvc.UI.Fluent.DiagramDataSourceBuilder{}}).
Example
@( Html.Kendo().Diagram()
.Name("diagram")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("_OrgChart", "Diagram")
)
)
)
ConnectionsDataSource(System.Action)
Configures the DataSource of the connections.
Parameters
configurator - System.Action<DiagramConnectionDataSourceBuilder>
The action that configures the Kendo.Mvc.UI.Fluent.DiagramBuilder.ConnectionsDataSource(System.Action{Kendo.Mvc.UI.Fluent.DiagramConnectionDataSourceBuilder{}}).
Example
@( Html.Kendo().Diagram()
.Name("diagram")
.ConnectionsDataSource(dataSource => dataSource
.Read(read => read
.Action("ConnectionsRead", "Diagram")
)
)
)
Events(System.Action)
Configures the handled client-side events of the Diagram.
Parameters
configurator - System.Action<DiagramEventBuilder>
The action that configures the available events.
Example
@( Html.Kendo().Diagram()
.Name("diagram")
.Events(events => events.Click("onClick"))
)
ToComponent()
Returns the internal view component.
Name(System.String)
Sets the name of the component.
Parameters
componentName - System.String
The name of the component.
Example
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
Deferred(System.Boolean)
Suppress initialization script rendering. Note that this options should be used in conjunction with
Parameters
deferred - System.Boolean
ModelMetadata(System.Web.Mvc.ModelMetadata)
Uses the Metadata of the Model.
Parameters
modelMetadata - System.Web.Mvc.ModelMetadata
The metadata set for the Model
HtmlAttributes(System.Object)
Sets the HTML attributes.
Parameters
attributes - System.Object
The HTML attributes.
HtmlAttributes(System.Collections.Generic.IDictionary)
Parameters
attributes - System.Collections.Generic.IDictionary<String,Object>
AsModule(System.Boolean)
Specifies whether the initialization script of the component will be rendered as a JavaScript module.
Parameters
value - System.Boolean
Render()
Renders the component.
Example
@(@Page Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" )
@( Html.Kendo().Grid(Model)
.Name("grid")
.DetailTemplate(product => {
)
Product Details:
<div>Product Name: @( product.ProductName )</div>
<div>Units In Stock: @( product.UnitsInStock )</div>
@(
})
.Render();
)
ScriptAttributes(System.Object,System.Boolean)
Sets the JavaScript attributes to the initialization script.
Parameters
attributes - System.Object
The JavaScript attributes.
overrideAttributes - System.Boolean
Argument which determines whether attributes should be overriden.
ScriptAttributes(System.Collections.Generic.IDictionary,System.Boolean)
Sets the JavaScript attributes to the initialization script.
Parameters
attributes - System.Collections.Generic.IDictionary<String,Object>
The JavaScript attributes.
overrideAttributes - System.Boolean
Argument which determines whether attributes should be overriden.