DiagramConnectionDefaultsEditableSettingsToolBuilder

Methods

Name(System.String)

Sets the name of the toolbar tool. The built-in tools are "edit" and "delete".

Parameters

value - System.String

The value that configures the tool name.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("customUpdateBtn")))
               )
             )
             

HtmlAttributes(System.Object)

Specifies the HTML attributes of the toolbar tool.

Parameters

value - System.Object

The value that configures the HTML attributes.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("customUpdateBtn").Type("button").Text("Update").HtmlAttributes(new { @class = "custom-btn"})))
               )
             )
             

HtmlAttributes(System.Collections.Generic.IDictionary)

Specifies the HTML attributes of the toolbar tool.

Parameters

value - System.Collections.Generic.IDictionary<String,Object>

The value that configures the HTML attributes.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("customUpdateBtn").Type("button").Text("Update").HtmlAttributes(new Dictionary<string, object>() { ["class"] = "custom-btn" })))
               )
             )
             

Buttons(System.Action)

Specifies the buttons of ButtonGroup in the default Toolbar of the connections.

Parameters

configurator - System.Action<DiagramConnectionDefaultsEditableSettingsToolButtonFactory>

The action that configures the ButtonGroup settings.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Type("buttonGroup")
                    .Buttons(btn =>
                    {
                        btn.Add().Text("Item 1").Click("onItem1Click");
                        btn.Add().Text("Item 2").Click("onItem2Click");
                    })
                ))
               )
             )
             

Click(System.String)

Specifies the "click" event handler of the button tool. The option is applicable only for commands of type button and splitButton.

Parameters

value - System.String

The name of the JavaScript function that handles the "click" event.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("customUpdateBtn").Type("button").Text("Update").Click("onUpdateClick")))
               )
             )
             

Enable(System.Boolean)

Specifies whether the toolbar button is initially enabled or disabled. The default value is "true".

Parameters

value - System.Boolean

The value that enables or disables the button.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("customBtn").Type("button").Enable(false).Text("Custom Button")))
               )
             )
             

Group(System.String)

Assigns a group to the toolbar custom button. The option is applicable only for buttons with option Togglable(true).

Parameters

value - System.String

The value that configures the group of the button.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt =>
                {
                    tt.Custom().Type("button").Name("btn1").Text("Button 1").Togglable(true).Group("group1");
                    tt.Custom().Type("button").Name("btn2").Text("Button 2").Togglable(true).Group("group1");
                    tt.Custom().Type("button").Name("btn2").Text("Button 3").Togglable(true).Group("group1");
                }))
              )
             )
             

Icon(System.String)

Sets an icon for the toolbar button. The icon must be one of the existing in the Kendo UI theme sprite.

Parameters

value - System.String

The value that configures the icon for the toolbar button.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("infoBtn").Type("button").Icon("info-circle")))
               )
             )
             

Id(System.String)

Specifies the ID of the toolbar button.

Parameters

value - System.String

The value that configures the id of the button.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("infoBtn").Type("button").Id("infoButton")))
               )
             )
             

ImageUrl(System.String)

Sets an image with a specified URL to be rendered in the toolbar button.

Parameters

value - System.String

The value that configures the image URL.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Type("button").ImageUrl("/diagram/settings.png")))
               )
             )
             

Specifies the menu buttons of SplitButton or DropDownButton in the default Toolbar of the connections.

Parameters

configurator - System.Action<DiagramConnectionDefaultsEditableSettingsToolMenuButtonFactory>

The action that configures the menu buttons configuration.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("splitBtn").Type("splitButton").Text("Split button")
                    .MenuButtons(mb =>
                    {
                        mb.Add().Id("1").Text("Item 1");
                        mb.Add().Id("2").Text("Item 2");
                    })
                ))
               )
             )
             

Overflow(System.String)

Specifies how the button behaves when the toolbar is resized. The supported values are: "always", "never" or "auto" (default). If a toolbar item contains a template and the Overflow is set to "always", the template will never be rendered. If the item contains an OverflowTemplate() and the Overflow is set to "never", the specified overflow template will never be rendered.

Parameters

value - System.String

The value that configures the overflow option.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Text("Settings").Type("button").Overflow("always")))
               )
             )
             

OverflowTemplate(System.String)

Specifies what element will be added in the command overflow popup. The option is applicable only for toolbar items that have a template.

Parameters

value - System.String

The value that configures the overflow template.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt
                    .Custom()
                    .Name("settingsBtn")
                    .Template("<div class='settings'>Settings</div>")
                    .OverflowTemplate("<div class='overflow-settings'>Settings</div>")))
               )
             )
             

OverflowTemplateId(System.String)

Specifies what element will be added in the command overflow popup. The option is applicable only for toolbar items that have a template.

Parameters

value - System.String

The name of the Kendo UI external template.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt
                    .Custom()
                    .Name("settingsBtn")
                    .Template("<div class='settings'>Settings</div>")
                    .OverflowTemplateId("overflowTemplate")))
               )
             )
             <script id="overflowTemplate" type="text/x-kendo-template">
                <div class='overflow-settings'>Settings</div>
             </script>
             

OverflowTemplateView(System.Web.Mvc.MvcHtmlString)

Specifies what element will be added in the command overflow popup. The option is applicable only for toolbar items that have a template.

Parameters

value - System.Web.Mvc.MvcHtmlString

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

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt
                    .Custom()
                    .Name("settingsBtn")
                    .Template("<div class='settings'>Settings</div>")
                    .OverflowTemplateView(Html.Partial("OverflowTemplateView"))))
               )
             )
             

OverflowTemplateHandler(System.String)

Specifies what element will be added in the command overflow popup. The option is applicable only for toolbar items that have a template.

Parameters

value - System.String

The JavaScript function that will return the overflow template content.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt
                    .Custom()
                    .Name("settingsBtn")
                    .Template("<div class='settings'>Settings</div>")
                    .OverflowTemplateHandler("getOverflowTemplate")))
               )
             )
             

OverflowTemplate(Kendo.Mvc.UI.TemplateBuilder)

Specifies what element will be added in the command overflow popup. Applicable only for items that have a template.

Parameters

template - TemplateBuilder<TModel>

A Template component that configures the overflowtemplate.

Primary(System.Boolean)

Specifies whether the toolbar button is primary. The primary buttons have different styling.

Parameters

value - System.Boolean

The value that configures the primary.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Text("Settings").Type("button").Primary(true)))
               )
             )
             

Selected(System.Boolean)

Specifies if the toolbar toggle button must be initially selected. The option is applicable only for buttons with Togglable(true).

Parameters

value - System.Boolean

The value that configures the selected option.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Text("Settings").Type("button").Togglable(true).Selected(true)))
               )
             )
             

ShowIcon(System.String)

Specifies where the toolbar button icon will be displayed. The supported values are: "toolbar", "overflow", and "both" (default).

Parameters

value - System.String

The value that configures the visibility of the button icon.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("infoBtn").Type("button").Icon("info-circle").ShowIcon("toolbar")))
               )
             )
             

ShowText(System.String)

Specifies where the toolbar button's text will be displayed. The supported values are: "toolbar", "overflow", and "both" (default).

Parameters

value - System.String

The value that configures the visibility of the button text.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Type("button").Text("Settings").ShowText("overflow")))
               )
             )
             

SpriteCssClass(System.String)

Defines a CSS class (or multiple classes separated by spaces) that will be used for the button's icon.

Parameters

value - System.String

The value that configures the CSS class.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Type("button").Text("Settings").Icon("check").SpriteCssClass("tick-icon")))
               )
             )
             

Template(System.String)

Specifies what element will be added in the ToolBar wrapper. The items with template do not have a type.

Parameters

value - System.String

The value that configures the item template.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Template("<button style='color: red;'>Settings</button>")))
               )
             )
             

TemplateId(System.String)

Specifies what element will be added in the ToolBar wrapper. The items with template do not have a type.

Parameters

value - System.String

The name of the Kendo UI external template.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").TemplateId("settingsTemplate")))
               )
             )
             <script id="settingsTemplate" type="text/x-kendo-template">
                <button style='color: red;'>Settings</button>
             </script>
             

TemplateView(System.Web.Mvc.MvcHtmlString)

Specifies what element will be added in the ToolBar wrapper. The items with template do not have a type.

Parameters

value - System.Web.Mvc.MvcHtmlString

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

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").TemplateView(Html.Partial("ItemTemplateView"))))
               )
             )
             

TemplateHandler(System.String)

Specifies what element will be added in the ToolBar wrapper. The items with template do not have a type.

Parameters

value - System.String

The JavaScript function that will return the template content.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").TemplateHandler("getItemTemplate")))
               )
             )
             

Template(Kendo.Mvc.UI.TemplateBuilder)

Specifies what element will be added in the ToolBar wrapper. Items with template does not have a type.

Parameters

template - TemplateBuilder<TModel>

A Template component that configures the template.

Text(System.String)

Sets the text of the toolbar button.

Parameters

value - System.String

The value that configures the text.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Text("User settings")))
               )
             )
             

Togglable(System.Boolean)

Specifies whether the toolbar button must be togglable. For example, the button has a selected and unselected state.

Parameters

value - System.Boolean

The value that enables or disables the togglable option.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Text("User settings").Type("button").Togglable(true)))
               )
             )
             

Toggle(System.String)

Specifies the Toggle event handler of the toolbar button. The option is applicable only for commands with options Type("button") and Togglable(true).

Parameters

value - System.String

The value that configures the Toggle event handler.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Text("User settings").Type("button").Togglable(true).Toggle("onButtonToggle")))
               )
             )
            <script>
                function onButtonToggle() {
                    console.log("toggle toolbar button");
                }
            </script>
             

Type(System.String)

Specifies the type of the toolbar command. The supported types are: "button", "splitButton", "dropDownButton", "buttonGroup", "separator", "spacer".

Parameters

value - System.String

The value that configures the command type.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Text("User settings").Type("button")))
               )
             )
             

Url(System.String)

Specifies the URL of the toolbar command to navigate to.

Parameters

value - System.String

The value that configures the URL.

Example

Razor
 
             @(Html.Kendo().Diagram()
              .Name("diagram")
              .ConnectionDefaults(cd => cd
                .Editable(e => e.Tools(tt => tt.Custom().Name("settingsBtn").Text("User settings").Type("button").Url("URL value")))
               )
             )