Button HtmlHelper Overview
The Telerik UI Button HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Button widget.
The Button provides a styled clickable UI functionality with arbitrary content. Apart from consistent Kendo UI for jQuery styling, the Button provides keyboard operability for elements, which natively do not have it—for example, span.
Initializing the Button
The following example demonstrates how to define the Button by using the Button HtmlHelper.
@(Html.Kendo().Button()
.Name("textButton")
.HtmlAttributes( new {type = "button"} )
.Content("Text Button")
)
Basic Configuration
- The
Name()configuration method is mandatory as its value will be used for theidand thenameattributes of the Button element. Moreover, theidis used in order to properly initialize the Button widget. Theidattribute value is also used to retrieve its client-side instance. - The
Content()configuration specifies the text that would be rendered in the button. This option does not accept HTML, but only string values. - The
Enable()option determines whether the widget will be initially enabled (by default) of disabled. - The
Tag()method allows the developer to determine whether the widget will be initialized from a<button>element (by default), or from an<a>element.
The following example demonstrates the available configuration options for the Button HtmlHelper.
@(Html.Kendo().Button()
.Name("textButton")
.Content("Sample Button")
.Enable(false)
.Tag("a")
)
<script type="text/javascript">
$(function() {
// The Name() of the Button is used to get its client-side instance.
var button = $("#textButton").data("kendoButton");
});
</script>
Functionality and Features
The Button provides options for rendering icons in the button.
Events
The Button HTML helper exposes only a Click() event that can be handled. For a complete example on basic Button events, refer to the demo on using the events of the Button.
@(Html.Kendo().Button()
.Name("button")
.Content("Sample Button")
.Events(e => e.Click("onClick"))
)
<script>
function onClick() {
alert('Button clicked!')
}
</script>