Comparison of Kendo UI and Wijmo, Part 2

Jul 30

Eric.Net, Development Asp.Net Mvc, javascript, Kendo UI, ui library, Wijmo No Comments

In today’s post we’ll briefly cover the available themes for Kendo UI and Wijmo. Then we will convert the menus in our project to use the javascript library.

Themes

The Kendo UI comes with 5 pre-built themes and a theme builder.

Wijmo comes with 6 “premium” themes and the two dozen or so jQuery themes for a total of 30 themes. You can use the jQuey theme roller to build your own custom Wijmo themes.

The Kendo theme builder shows more controls, but the jQuery theme roller gives you more options to modify. Which, depending on your viewpoint, be a plus or a minus.

Spicing Up the Menu

Let’s take the standard menu created by the MVC3 template and modify the html so the menu takes on the style of one of our javascript UI libraries.

Kendo UI

Making the Kendo UI work with the menu took quite a bit of investigation. None of the documentation or demos showed the final solution. In it’s defense the library is in beta and the documentation usually lags behind. The secret is to add the class “k-menu” to the UL tag of the menu.

<nav class="clear">
<ul id="menu" class="k-menu">
	<li>@Html.ActionLink("Home", "Index", "Home")</li>
	<li>@Html.ActionLink("About", "About", "Home")</li>
ul>
</nav>

Next a little bit of javascript to initialize the menu.

<script type="text/javascript">
    $(document).ready(function () {
        $("#menu").kendoMenu();
    });
</script>

If you run the demo now, the menu will have a huge margin on the left. Add the class clear to the NAV tag as shown below.

<ul id="menu" class="k-menu">

Wijmo

This is the demo we built using the Wijmo MVC solution template. The menu is already styled for Wijmo. Nothing else needs to be done.

Wijmo (NuGet)

Converting this menu requires a small amount of javascript and some css changes. Add this javascript to the _Layout.cshmtl file.

<script type="text/javascript">
    $(document).ready(function () {
$("#menu").wijmenu();
    });
</script>

Next replace all of the ul#menu items in Site.css with the css chunk below.

nav, #nav
{
border-bottom: none;
border-radius: 2px 2px 0 0;
clear:left;
font-size:1.3em;
min-height:43px;
}

Up Next

In the next post we will add the grid controls from each javascript library.

Comparison of Kendo UI and Wijmo, Part 1

Cancel

erictopia.com