Overview:

In this blog post we will take a look at one of the new widgets we have released as part of Kendo UI Web controls suite. For long people have been asking about why we didn’t have a Kendo UI Button in the arsenal. Well we already have a <button> element in HTML specs so we didn’t want to reinvent things. But when it comes to using Kendo UI for your app you may want to keep things in your app consistent with respect to styling. So instead of you using regular button and styling it to have a look and feel of Kendo UI style sheet, we have gone ahead and released a Button widget for you. You just instantiate the button as any other widget you have been using. The button automatically takes the style of the current Kendo UI theme you are using. So this blog post will be your primer for using the Button Widget in your ASP.NET MVC apps.

About Button Wrapper:

Kendo UI Button Wrapper for ASP.NET MVC provides a styled clickable UI widget with any arbitrary content. With Kendo UI Button Wrapper you get a consistent Kendo UI styling.

Basic Button Usage:

In order to create a Button, you will use the Button() builder. You will need to provide a name to the widget and the content which needs to be shown on the button. Here is the code:

@(Html.Kendo().Button()
.Name("textButton")
.Content("Submit")
)

Buttons with Icons:

Kendo UI Button wrapper allows you to also specify a icon as part of the button content. The icons can be provided to the button in three ways. They are:

• SpriteCssClass Method
• Icon Method
• ImageUrl Method

SpriteCssClass Method Usage:

You can use the SpriteCssClass() method to provide a icon to the content. In this method the icon is provided by using a background image (usually a sprite). From web standards point of view, using a background image is better. In the below example I am using a sprite which contains flags of different country. I will create a class to point to a specific country lets say Netherlands and use that class in the Button SpriteCssClass() method. Here is the code for this scenario:

.netherlandsFlag
{
background-image: url("<path to image folder>/flags.png");
background-position: 0 -64px;
}

@(Html.Kendo().Button()
.Name("btnSpriteIconButton")
.SpriteCssClass("k-icon netherlandsFlag")
.Content("Sprite icon"))

Icon Method Usage:

You should use Icon() method when you want to use one of the predefined icons we pack as part of Kendo UI control set. You can refer our Icons Demo to get a glimpse of all the pre packaged icons. Here is the code to use the Icon() method and provide an Kendo UI Icon for the button:

@(Html.Kendo().Button()
.Name("kendoIconButton")
.Icon("funnel")
.Content("Kendo UI sprite icon")
)

ImageUrl Method Usage:

If you have any image that you want to use as a icon, you can use the ImageUrl() method and provide the image path. Here is the code for the same:

@(Html.Kendo().Button()
.Name("imageButton")
.ImageUrl(Url.Content("<a href="http://demos.kendoui.com/content/shared/icons/sports/snowboarding.png&quot;))">http://demos.kendoui.com/content/shared/icons/sports/snowboarding.png"))</a>
.Content("Image icon")
)

Here is the screen shot of the buttons with all the above 3 icon methods being employed:

Handling Client Side Events:

You can handle the client side event using the ButtonEventBuilder. Button has a Click event exposed. You can provide the name of the client side JavaScript function which will handle the event. Here is the code snippet for handling click event on the client side:

@(Html.Kendo().Button()
.Name("refreshButton")
.Icon("refresh")
.Content("Refresh Button")
.Events(ev => ev.Click("onClick"))
)

<script>
function onClick(e)
{
console.log("button click event handled");
}
</script>

Accessing Button Instance Client Side:

Similar to all kendo UI Widgets, an existing Button instance can be accessed via the .data() jQuery method, executed by the jQuery object on the originating element. Here is code snippet of how to access a button instance:

@(Html.Kendo().Button()
.Name("btnEdit")
.Content("Edit")
)
<script>
$(document).ready(function ()
{
var kButton = $("#btnEdit").data("kendoButton");
console.log(kButton);
});
</script>

Conclusion:

In this blog post we looked at how easy it is to work with the Kendo UI Button wrapper for ASP.NET MVC. We looked at the feature of providing icons to the button. We support 3 different types using which you can provide the icons. You can look at more Kendo UI Button demos here. Give it a spin and let us know if you have any feedback or comment.