Comparison of Kendo UI and Wijmo, Part 1
Jul 23
.Net, Development Asp.Net Mvc, Kendo UI, Telerik, Wijmo No Comments
This is the first in a series of posts on comparing Kendo UI and Component One’s Wijmo. One of my current projects calls for using enhanced jQuery based UI controls. My plan is to start simple. Take the basic MVC3 solution template and build a small web application.
The entire application will be focused on the user interface, so the backend pieces will be quick and dirty.
This first post will deal with setting up the solution and converting the menu in the default layout to be either Kendo or Wijmo based.
Setup
Both of these libraries are easy to setup. I have even listed an alternative path for Wijmo solutions.
Kendo UI
Kendo UI is installed in two easy steps.
- Download the free 30 day trial from http://www.kendoui.com/download.aspx.
- Run the install package. This installs examples, a dll, styles, and javascript files necessary for creating your Kendo UI projects.
Wijmo
Wijmo can also be installed in two easy steps.
- Download the free trial from http://www.componentone.com/SuperProducts/StudioMVCWijmo/.
- Run the install package.
Wijmo (NuGet Method)
Since there is a nuget package for Wijmo, this course requires no pre-solution setup.
Solution Creation
This section deals with creating the solution for each path presented and adding all the references required for each library.
Kendo UI
Run Visual Studio and create a new solution using the ASP.NET MVC 3 web application project template.
Next add a reference to the Kendo.Mvc.dll. Mine was located in the folder “C:\Program Files (x86)\Telerik\Kendo UI Trial Q2 2012\wrappers\aspnetmvc\Binaries\Mvc3\”.
Copy the files jquery.min.js and kendo.all.js from the \js folder into the Scripts folder in your project. From the styles folder copy the folders BlueOpal, images, textures and the files kendo.blueopal.min.css and kendo.common.min.css. If you prefer a theme other than BlueOpal make sure you copy the folder associated with the css file you want.
Now add references to these files in _Layout.cshtml. Make sure you remove the existing reference to jquery-1.5.1.min.js.
css")" rel="stylesheet" type="text/css" />
css")" rel="stylesheet" type="text/css" />
css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo.all.min.js")" type="text/javascript"></script>
If you run the solution you will see the standard Mvc web page.
Wijmo
Run Visual Studio and create a new solution using the ASP.NET MVC 3 wijmo application project template.
Done. Run the solution and you will see the Wijmo enhanced web page. This solution doesn’t have a test project so you will have to add that manually.
Wijmo (NuGet Method)
Run Visual Studio and create a new solution using the ASP.NET MVC 3 web application project template.
Edit the file packages.config and delete the lines referencing jQuery.
<package id="jQuery" version="1.5.1" targetFramework="net40" /> <package id="jQuery.UI.Combined" version="1.8.11" targetFramework="net40" /> <package id="jQuery.Validation" version="1.8.0" targetFramework="net40" /> <package id="jQuery.vsdoc" version="1.5.1" targetFramework="net40" />
In the Script folder of the project delete the jQuery and jQueryUI files. I also always delete the Microsoft*.js files.
In the Package Manager Console window add Wijmo to the solution using the NuGet command “Install-Package jQuery.Wijmo.Complete”. This should install wijmo complete. You are looking for these three lines.
Successfully added ‘jQuery.UI.Combined 1.8.18′ to Wijmo-NuGet.
Successfully added ‘jQuery.Wijmo.Open 2.0.5.1′ to Wijmo-NuGet.
Successfully added ‘jQuery.Wijmo.Complete 2.1.4′ to Wijmo-NuGet.
Now edit _Layout.cshtml and add references to the css and js files as shown below. You will need to update the jQuery reference and add a reference to jQueryUI as well as the Wijmo files.
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery.wijmo-open.2.0.5.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery.wijmo-complete.2.1.4.css")" rel="stylesheet" type="text/css" />
aristo/jquery-wijmo.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script></pre>
<script src="@Url.Content("~/Scripts/jquery.wijmo-open.all.2.0.5.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.wijmo-complete.all.2.1.4.min.js")" type="text/javascript"></script>
When you run the solution you will see the standard Mvc3 web page.
In the next post we’ll cover themes and spice up the menu just a little. If the post doesn’t run too long I will add another control or two. Till next time…
Recent Comments