Edit this page

Button HtmlHelper Overview

The Button HtmlHelper extension is a server-side wrapper for the Kendo UI Button widget.

Make sure you are familiar with the fundamental Kendo UI widget concepts and that the Kendo UI MVC wrappers are set up correctly.

Getting Started

The Basics

The Kendo UI Button widget can be initialized from any element, defined through the .Tag() fluent method. However, using the button or a elements is more reasonable. A button tag is used by default, unless otherwise specified.

The Button can include both inline and block elements defined via .Content(). Take into account the web standards, which prohibit placing block elements, such as div, and p, inside inline elements, such as a and span.

Placing clickable elements with their own special behavior inside the Button—hyperlinks, textboxes, and others—may cause undesired side effects.

Initialization

The following example demonstrates how to initialize the Button by using the default button tag.

Example

        @(Html.Kendo().Button()
            .Name("textButton")
            .HtmlAttributes( new {type = "button"} )
            .Content("Text button"))

        <%= Html.Kendo().Button()
            .Name("textButton")
            .HtmlAttributes( new {type = "button"} )
            .Content("Text button") %>

The following example demonstrates how to initialize the Button by using the anchor tag.

Example

        @(Html.Kendo().Button()
            .Name("linkButton")
            .Tag("a")
            .Content("Link button"))

        <%= Html.Kendo().Button()
            .Name("linkButton")
            .Tag("a")
            .Content("Link button") %>

Appearance

The Button can accommodate an icon, which enhances the meaning of the text content. The widget provides three ways to add an icon with a classic img element or with a background image, usually a sprite. Taking web standards into consideration, using background images is better, because the icon does not represent structural content, but it's simply a decoration.

To configure the icons in the Buttons, use just one of the following available settings at a time:

  • .Icon()
  • .SpriteCssClass()
  • .ImageUrl()

Background Icons

Background icons are applied via the .Icon() or .SpriteCssClass() fluent methods and are displayed as a background of a span element. The difference between the two settings is that .Icon() is intended to be used for built-in Kendo UI icons, which are part of the theme sprite. For a list of available icon names, refer to the Icons demo.

The following example demonstrates how to add a background icon by using .Icon().

Example

        @(Html.Kendo().Button()
            .Name("cancelButton")
            .Icon("cancel")
            .Content("Cancel"))

        <%= Html.Kendo().Button()
            .Name("cancelButton")
            .Icon("cancel")
            .Content("Cancel") %>

The above configuration is expected to produce the HTML output from the following example.

Example
    <button type="button" id="cancelButton" class="k-button k-button-icontext"><span class="k-icon k-cancel"></span>Cancel</button>

The following example demonstrates how to add a background icon by using .SpriteCssClass().

Example

        @(Html.Kendo().Button()
            .Name("spriteButton")
            .SpriteCssClass("myIconClass")
            .Content("Sprite button"))

        <%= Html.Kendo().Button()
            .Name("spriteButton")
            .SpriteCssClass("myIconClass")
            .Content("Sprite button") %>

The above configuration is expected to produce the HTML output from the following example.

Example
  <button type="button" id="spriteButton" class="k-button k-button-icontext"><span class="k-sprite myIconClass"></span>Sprite button</button>

Technically, .SpriteCssClass("k-icon k-cancel") can be used to achieve the same result as .Icon("cancel"), but .Icon() spares you the need to set two CSS classes at the same time and provides a certain level of abstraction. The Button uses an existing span element if it is supplied as .Content()—for example, if you want to have a Button with no text. The span element must have a k-sprite CSS class.

The following example demonstrates how to use a button with no text.

Example

        @(Html.Kendo().Button()
            .Name("deleteButton")
            .SpriteCssClass("myDeleteClass")
            .Content("<span class='k-sprite'>Delete</span>"))

        <%= Html.Kendo().Button()
            .Name("deleteButton")
            .SpriteCssClass("myDeleteClass")
            .Content("<span class='k-sprite'>Delete</span>") %>

Image Icons

Image icons are applied via the .ImageUrl() property and are displayed as an img element.

The following example demonstrates how to use .ImageUrl().

Example

        @(Html.Kendo().Button()
            .Name("imageButton")
            .ImageUrl("/images/myIcon.gif")
            .Content("Image button"))

        <%= Html.Kendo().Button()
            .Name("imageButton")
            .ImageUrl("/images/myIcon.gif")
            .Content("Image button") %>

The above configuration is expected to produce the HTML output from the following example.

Example
    <button type="button" id="imageButton" class="k-button k-button-icontext"><img class="k-image" src="/images/myIcon.gif" alt="icon" />Image button</button>

The following example demonstrates how to use .ImageUrl() with no text. Note that an img tag should be placed inside the Button content. The image should have a k-image CSS class.

Example

        @(Html.Kendo().Button()
            .Name("iconButton")
            .ImageUrl("/images/myIcon.gif")
            .Content("<img class='k-image' alt='my icon' />"))

        <%= Html.Kendo().Button()
            .Name("iconButton")
            .ImageUrl("/images/myIcon.gif")
            .Content("<img class='k-image' alt='my icon' />") %>

Features

Enable and Disable Buttons

The business logic of an application often requires a certain button to be temporarily enabled or disabled. The Button can be configured to be initially disabled via its .Enable() setting. The widget can also be disabled or enabled at any time with JavaScript by using its enable() method with a Boolean argument.

The following example demonstrates how to use .Enable().

Example

        @(Html.Kendo().Button()
            .Name("disabledButton")
            .Enable(false)
            .Content("Disabled button"))

        <%= Html.Kendo().Button()
            .Name("disabledButton")
            .Enable(false)
            .Content("Disabled button") %>

For more information on the enable method of the Button, refer to the API of the Button control.

Reference

Existing Instances

For more information on how to access an instance, refer to the introductory article on the Button.

See Also