Kendo UI Button Wrapper for ASP.NET MVC


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:



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:

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

.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:

.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:

.ImageUrl(Url.Content("<a href=";))">"))</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:

.Content("Refresh Button")
.Events(ev => ev.Click("onClick"))

function onClick(e)
console.log("button click event handled");

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:

$(document).ready(function ()
var kButton = $("#btnEdit").data("kendoButton");


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.


Using Kendo Grid in ASP.Net MVC 4.0

In this post we will see, how we could work with Kendo Grid in ASP.Net MVC. We will display data from SQL Server table in Kendo Grid using LINQ to Sql class. Pictorially we can represent it as follows


Before you start with this post, I strongly recommend you to read

Getting started with Kendo UI MVC Wrapper in ASP.Net MVC 4.0

Adding Model

Once you are done with setting up environment go ahead and add a model. We are going to use LINQ TO SQL Class as model. To add model right click on model folder and select New Item. Select Data tab and choose LINQ to SQL Classes to add as model. Give any name to model, I am leaving the default name.


Next on the design surface choose Server Explorer


If in the Server Explorer, you do not find Data Connection you want to use then go ahead and right click on the Data Connection and select Add New Connection


In Add Connection dialog box provide server name and from drop down choose desired database.


Click on Ok to add a new connection. Next from Server Explorer drag and drop the tables on dbml file to create the model. I am choosing only Person class from School database.


In Solution explorer you can see a dbml file has been added.


Adding Controller

We have created the Model, now we need to fetch data using Model in the Controller. I am going to use default created HomeController and Action Index. Go ahead and in HomeController.cs file modify the Action Index.


Here we need to create instance of model and pass the data to view. That can be done as following


Adding Kendo Grid on View

We are passing data from Index action, so we need to put Kendo Grid in IndexView. Go to View and Home folder and open Index.cshtml


Very first you need to make View as strongly typed. You can make a View strongly typed as following


Next we can bind data from Model to Kendo Grid as following. Make sure you provide name of the Kendo Grid. This is mandatory because name act as id attribute of the Grid element.


For your reference code in view is as following

@model IEnumerable<mvcwrappersample1.Models.Person>

<h3>Kendo Grid</h3>

.Columns(columns =>
columns.Bound(p => p.FirstName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.HireDate);
columns.Bound(p => p.EnrollmentDate);
.Pageable() //Enable paging

Press F5 to run the application. You should able to get data from model in Kendo Grid.


I hope you find this post useful. Thanks for reading.


Getting started with Kendo UI MVC Wrapper in ASP.Net MVC 4.0

In this post we will learn getting started with Kendo UI MVC Wrapper.

Download Kendo UI free trial from here

Launch visual studio and create a new MVC 4 Web Application.

Choose Internet Application as type of application and Razor engine as the View Engine.

To test whether we have created application correctly or not press F5 and run the application. If application is successfully running then you are all set to start using Kendo UI MVC Wrapper in your application. Very first you need to add reference of Kendo.Mvc.dll. You will find this file in location \wrappers\aspnetmvc\Binaries\Mvc3. Right click on the reference in project and browse to add Kendo.Mvc.dll in the project.

After adding the reference open Web.config file

You need to make sure that following entry is present in the Web.config file.

If above entry is not present then make sure to add them in Web.config file.

<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
<assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="" newVersion="" />
<assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="" newVersion="" />
<assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" />
<bindingRedirect oldVersion="" newVersion="" />

Now you add Kendo JS files and CSS files in the project. To add Kendo JS files right click on Script folder and select add existing item

Browse to JS folder in Kendo UI installation directory and add all the JS files in the Scripts folder. After adding JS files add CSS files in the project. To add that right click on Content folder in the project and choose option to add existing items

Browse to Styles folder in Kendo UI installation directory and all the CSS files in the Content folder. If you are going to use some specfic style like Metro or Silver then make sure you add texture folder in the Content directory as well. Make sure you have added Texture folder and Default folder also in the Contnet folder of the project.

After adding all the css files and folder , Content folder in the project should look like as following

By this step , you have added all the required dll, js files and css files in the project. Next open Web.config from the Views

Here you need to add following namespace

You need to add this namespace in root level Web.config as well. So open root level Web.config and add the name space.

And add the namespace as following

last step you need to add references of CSS and JS file in _layout.cshtml file. You will find this file in Shared folder.

Open this file and scroll down. Comment the like referring to jquery file. You will find that reference just before closing body tag.

And at the beginning of the file add the following references ,

Above we have referred Metro CSS for metro styled UI experience. So go ahead and following references in _layout.cshtml file

<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")" />
<link rel="stylesheet" href="@Url.Content("~/Content/kendo.metro.min.css")" />
<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

Now you are all set to use Kendo UI MVC Wrappers in the project. Let us go ahead and put a Kendo Calendar widget on index.cshtml . You can put that as following

Now press F5 to run the application. You should get the Kendo UI Calendar on the index view as following,

In this way you can start working with Kendo UI MVC Wrapper in ASP.Net MVC 4.0 Application. I hope you find this post useful. Thanks for reading!