DiagramEditableSettingsBuilder

Methods

ConnectionTemplate(System.String)

Specifies the connection editor template, which shows up when editing the connection. A template can be used to change the default editors for the connection fields or to prevent some fields from being edited by not rendering an editor input for them.

Parameters

value - System.String

The value that configures the connection template.

ConnectionTemplateId(System.String)

Specifies the connection editor template, which shows up when editing the connection. A template can be used to change the default editors for the connection fields or to prevent some fields from being edited by not rendering an editor input for them.

Parameters

value - System.String

The name of the Kendo UI external template.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(e => e.ConnectionTemplateId("connectionEditorTemplate"))
              )

ConnectionTemplateView(System.Web.Mvc.MvcHtmlString)

Specifies the connection editor template, which shows up when editing the connection. A template can be used to change the default editors for the connection fields or to prevent some fields from being edited by not rendering an editor input for them.

Parameters

value - System.Web.Mvc.MvcHtmlString

The Razor View that will be used for rendering the template.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(e => e.ConnectionTemplateView(Html.Partial("ConnectionTemplateView")))
              )

ConnectionTemplateHandler(System.String)

Specifies the connection editor template, which shows up when editing the connection. A template can be used to change the default editors for the connection fields or to prevent some fields from being edited by not rendering an editor input for them.

Parameters

value - System.String

The JavaScript function that will return the template content.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(e => e.ConnectionTemplateHandler("getConnectionTemplate"))
              )

Drag(System.Boolean)

Specifies if the shapes and connections can be dragged.

Parameters

enabled - System.Boolean

The value that enables or disables the Drag option.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(e => e.Drag(true))
              )

Drag(System.Action)

Specifies if the shapes and connections can be dragged.

Parameters

configurator - System.Action<DiagramEditableDragSettingsBuilder>

The action that configures the drag settings.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(e => e.Drag(d => d.Snap(s => s.Size(80))))
              )

Remove(System.Boolean)

Specifies if the shapes and connections can be removed.

Parameters

value - System.Boolean

The value that enables or disables the Remove option.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(e => e.Remove(true))
              )

Resize(System.Boolean)

Defines the look-and-feel of the resizing handles.

Parameters

enabled - System.Boolean

The value that enables or disables the Resize option.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(e => e.Resize(true))
              )

Resize(System.Action)

Defines the look-and-feel of the resizing handles.

Parameters

configurator - System.Action<DiagramEditableResizeSettingsBuilder>

The action that configures the resize settings.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(e => e.Resize(r => r.Width(20).Height(20)))
              )

Rotate(System.Boolean)

Specifies whether the shapes can be rotated.

Parameters

enabled - System.Boolean

The value that enables or disables the Rotate option.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(e => e.Rotate(true))
              )

Rotate(System.Action)

Specifies rotate settings of the shapes.

Parameters

configurator - System.Action<DiagramEditableRotateSettingsBuilder>

The action that configures the rotate settings.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(e => e.Rotate(r => r.Fill(f => f.Color("green"))))
              )

ShapeTemplate(System.String)

Specifies the shape editor template. You can use it to customize the editing UI of the shape or to display editor controls only for certain fields of the shape data item.

Parameters

value - System.String

The value that configures the editor template.

ShapeTemplateId(System.String)

Specifies the shape editor template. You can use it to customize the editing UI of the shape or to display editor controls only for certain fields of the shape data item.

Parameters

value - System.String

The name of the Kendo UI external template.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                 .Editable(editable => editable.ShapeTemplateId("shapeEditorTemplate"))
             )

ShapeTemplateView(System.Web.Mvc.MvcHtmlString)

Specifies the shape editor template. You can use it to customize the editing UI of the shape or to display editor controls only for certain fields of the shape data item.

Parameters

value - System.Web.Mvc.MvcHtmlString

The Razor View that will be used for rendering the template.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                 .Editable(editable => editable.ShapeTemplateView(Html.Partial("ShapteTemplateView")))
             )

ShapeTemplateHandler(System.String)

Specifies the shape editor template. You can use it to customize the editing UI of the shape or to display editor controls only for certain fields of the shape data item.

Parameters

value - System.String

The JavaScript function that will return the template content.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                 .Editable(editable => editable.ShapeTemplateHandler("getShapeEditorTemplate"))
             )

Tools(System.Action)

Specifies the toolbar tools.

Parameters

configurator - System.Action<DiagramEditableSettingsToolFactory>

The action that configures the tools.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(editable => editable.Tools(tool =>
                {
                    tool.Edit();
                    tool.CreateConnection();
                    tool.CreateShape();
                    tool.Undo();
                    tool.Redo();
                    tool.RotateClockwise();
                    tool.RotateAnticlockwise();
                 }))
             )

ShapeTemplateName(System.String)

Specifies the name of the shape editor template. You can use it to customize the editing UI of the shape or to display editor controls only for certain fields of the shape data item.

Parameters

value - System.String

The name of the Razor view editor template.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(editable => editable.ShapeTemplateName("DiagramShapeEditor"))
             )

ConnectionTemplateName(System.String)

Specifies the name of the connection editor template.

Parameters

value - System.String

The name of the Razor view editor template.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(editable => editable.ConnectionTemplateName("DiagramShapeEditor"))
             )

ShapeTemplateComponentName(System.String)

Specifies the name of the editor template that contains a Template component, which defines the editors for the shape data item. The editor template must be added in the 'Views/Shared/EditorTemplates/' folder.

Parameters

templateName - System.String

The name of the Razor view editor template.

Example

             @(Html.Kendo().Diagram()
                .Name("diagram")
                .Editable(editable => editable.ShapeTemplateComponentName("DiagramShapeEditor"))
             )