# Tuesday, 19 June 2012

Back in April I started a series of posts related to using Kendo UI in ASP.NET MVC.  Last month the Kendo team released the first beta of Kendo UI for ASP.NET MVC.  So, long story short the blog posts on Kendo UI will continue but from this point forward they will move from implementing Kendo UI proper in ASP.NET MVC to using Kendo UI for ASP.NET MVC.

Kendo UI for ASP.NET MVC includes the complete Kendo UI suite (Web, Mobile, DataViz) plus a set .NET wrappers to be used with ASP.NET MVC that leverage exciting features of MVC such as data annotations, editor/display templates and validation.  Those of you still using the WebForms view engine are safe,  the wrappers work in both the Razor view engine and the WebForms view engine.

To get started download the Kendo UI for ASP.NET MVC bits and install them.  The bits include, what I would call, the Kendo UI core features plus all the ASP.NET MVC specific features so there is no need install both Kendo UI and Kendo UI for ASP.NET MVC.  If you already have Kendo UI core installed, don’t worry, the installer will adjust accordingly.

Once installed pull up the install location, for me it is “C:\Program Files (x86)\Telerik\Kendo UI for ASP.NET MVC Q2 2012 BETA”, and play around with the example projects by running “\Examples\StartExamples.exe”.

Now…let’s get it up and running in an ASP.NET MVC project.

NOTE: The Kendo UI for ASP.NET MVC documentation states that both MVC 3 and MVC 4 are supported even though the actual Kendo.MVC.dll resides in the “Mvc3” directory.

  1. Create a new ASP.NET MVC 3 or 4 project
  2. Add a reference to: [Kendo UI Directory]\Binaries\Mvc3\Kendo.Mvc.dll
  3. Copy the contents of [Kendo UI Directory]\Scripts to the Scripts folder of your MVC project
  4. Copy the contents of [Kendo UI Directory]\Content to the Content folder of your MVC project
  5. Reference the Kendo UI scripts and and CSS files in your layout page.
    *Note: If your using ASP.NET MVC 4 I suggest creating a bundler package

    <link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">
    <link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.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>
  6. Add a reference to the Kendu.Mvc.UI namespace to the <namespaces> section of the web.config to allow your views to know about the Kendo HTML Helper extensions.
    <add namespace="Kendo.Mvc.UI"/>
  7. Let’s test it out.  Open up Index.cshtml and create a Kendo UI control using the new HTML Helpers.
    @(Html.Kendo().DatePicker().Name("MyTestDatePicker"))

 

image

As with the previous parts of the series the code is available on GitHub.

Thursday, 23 August 2012 03:40:07 (Central Daylight Time, UTC-05:00)
I am new to Kendo UI as well as MVC 4 ... i am trying to use this Kendo UI calender in a view but its not showing up... what am i missing ... I am using basic MVC 4 template in Visual studio 2010 and included all js and styles in it

I have give proper js and css links in _Layout.cshtml

Plz help
Kushal Kale
Thursday, 23 August 2012 05:34:06 (Central Daylight Time, UTC-05:00)
Kushal,
I would be happy to take a look at your code to see if I can determine the issue. Send it to keith[at]DotNetDevDude[dotcom] if you'd like me to take a look.
Thursday, 23 August 2012 05:57:57 (Central Daylight Time, UTC-05:00)
I have sent zipped file ...
Kushal Kale
Monday, 07 January 2013 04:48:32 (Central Standard Time, UTC-06:00)
Hi,

I am using Open source kendo UI. I am new to this KendoUI & MVC 2. I followed the instruction & configured my app..... Is there any limitations for Open source ?
mahal
Sunday, 22 June 2014 13:10:30 (Central Daylight Time, UTC-05:00)
This is realy nice tutorial. I was new in KendoUI. I follow http://www.fdfriends.com/asp-net-mvc-with-kendu-ui/ and got success easily. Hope this tutorial help for ASP.NET MVC Developer.
Friday, 19 June 2015 06:15:25 (Central Daylight Time, UTC-05:00)
please help me how to include a master checkbox and checkbox for each row in kendo UI grid.
i also need to update record that are checked in the grid. and also restore previous selected rows while paging. checkall/ UncheckAll should also be done.
All this i need to implement using asp.net MVC dynamically.
Please post the complete working source code with screen shots.
Looking forward for the reply

Thank you,
keshava
Name
E-mail
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, strike) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):

Live Comment Preview