Using Kendo UI 2013.1 with S#arp Architecture 2.0.4

By | June 21, 2013

We have been using S#arp Architecture for quite sometime now and it proved to be a good platform for some of the enterprise applications we developed in-house for our company.  While it provided us a good platform for our web apps it does not provide something that you can easily reuse for your presentation layer that is where Kendo UI comes into play.  Before we were using the old version called Telerik MVC but since them we upgraded to this newer version.  This guide will be how to start a project using this two products. Before we start I am under the assumption that you have created your database with proper naming conventions that works with Fluent NHibernate.   This means the following

  • Table in Plural Form (ie. Employees, Positions, Departments)
  • Table Primary Key is the Singular Form of the Table Name ending in Id (ie. EmployeeId, PositionId, DepartmentId)
  • Use Camel Case in any objects of your Database (ie. ThisIsASampleDatabaseColumn)
  • Define your Foreign Key relationships, maintain the same Naming to the Related Table Column.

Also you should have Kendo UI for ASP.NET MVC installed in your development machine if not, you can get them here (http://www.kendoui.com/download.aspx) Lets start. 1. Download and Install Templify, you can get the latest version here (http://opensource.endjin.com/templify/). 01 Templify


  1. Download and install S#arp architecture, you can get the latest version here (http://sharparchitecture.net/downloads.htm).  Once installed, run templify and deploy templify in the folder of your choice.  Choose a template and a namespace, in this sample we call it MyWebApp

02 Select Template

  1. Now click deploy.

03 Generating

  1. Once finished it will notify you in your notification bar.

04 Completed

  1. Go to your folder and it should have a similar structure like this.

05 Output Folders

  1. Go into the Solutions folder and your solution will be there.

06 Output Folders 2

  1. You will notice it is created as s Visual Studio 2010 version, we dont want that so we will be opening it with Visual Studio 2012.  I guess as of this moment it is not a supported version but we’ve been using 2012 in a S#arp project for a year now and had deployed 2 applications without issues.

07 Open


  1. Once it opens it will show you the upgrade notes.  Go to your Presentation Layer, choose the Web Project and set it as StartUp Project.

08 Set Web as Startup Project

  1. Set up your database by going to NHibernate.config and choose your database server.  If your Application name is the same as the database name (which I suggest you do) then no need to change the database name.

09 Configure nHibernate

  1. Upgrade your Project to use MVC 4.  Follow this article. 11. Run your project for the first time.

11 Running

  1. Now lets convert your Website to use Kendo UI.  Right click your web project, choose Kendo UI for ASP.NET MVC then click convert.

12 Convert App To Kendo

  1. Tick only Copy Editor Templates then click next.

13 Start Convert

  1. Once finished, right click on references and Manage NuGet packages.  Restore any missing packages.

14 Restore Missing Packages

  1. Add and Install Microsoft.AspNet.Web.Optimization, this is used for bundling and optimizing css and js files.

15 Download Optimization Framework 16. Add the following

  • App_Start folder
  • Create a BundleConfig.cs
  • Add jquery-1.9.1.min.js
  • Add jquery.json-2.4.min.js
  • Add jquery.unobtrusive-ajax.min.js
  • Add jquery.validate.js
  • Add jquery.validate.unobtrusive.js

Copy and paste this BundleConfig.cs code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
namespace MyWebApp.Web.Mvc.App_Start
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            // Clear all items from the default ignore list to allow minified CSS and JavaScript files to be included in debug mode
            bundles.IgnoreList.Clear();

            // Add back the default ignore list rules sans the ones which affect minified files and debug mode
            bundles.IgnoreList.Ignore("*.intellisense.js");
            bundles.IgnoreList.Ignore("*-vsdoc.js");
            bundles.IgnoreList.Ignore("*.debug.js"OptimizationMode.WhenEnabled);

            //Scripts Section
            bundles.Add(new ScriptBundle("~/bundles/jquery")
                .Include("~/scripts/jquery-1.9.1.min.js")
                .Include("~/scripts/jquery.validate.js")
                .Include("~/scripts/jquery.unobtrusive-ajax.min.js")
                .Include("~/scripts/jquery.validate.unobtrusive.min.js")
                .Include("~/scripts/jquery.json-2.4.min.js"));

            //KendoSection
            bundles.Add(new ScriptBundle("~/bundles/mywebapp")
                .Include("~/Scripts/Kendo/2013.1.514/jquery.unobtrusive-ajax.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.core.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.data.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.fx.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.popup.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.list.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.calendar.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.datepicker.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.numerictextbox.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.validator.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.menu.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.binder.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.dropdownlist.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.filtermenu.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.pager.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.sortable.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.userevents.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.draganddrop.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.groupable.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.editable.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.selectable.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.resizable.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.reorderable.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.grid.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.window.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.upload.min.js")
                .Include("~/scripts/kendo/2013.1.514/kendo.aspnetmvc.min.js")
                .Include("~/scripts/kendo/2013.1.514/cultures/kendo.culture.en-NZ.min.js")
                .Include("~/scripts/mywebapp*"));

            //Css Section
            bundles.Add(new StyleBundle("~/content/css").Include(
              "~/Content/Kendo/2013.1.514/kendo.common.min.css",
              "~/Content/Kendo/2013.1.514/kendo.blueopal.min.css",
              "~/Content/*.css"));
        }
    }
}

16 Dowload Latest jQuery
  1. Remove all old js and css references in your Shared Layout.  You can find them at  MyWebApp.Web.Mvc/Views/Shared/_Layout.cshtml

17 Remove all old references

  1. Replace with the bundled lines
@Styles.Render("~/content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/mywebapp")

18 Add bundled references
  1. Register them on Global.asax.
BundleConfig.RegisterBundles(BundleTable.Bundles);

Also register your sitemap.

SiteMapManager.SiteMaps.Register<XmlSiteMap>("Web", sitemap => sitemap.Load());

19 Modify Global.asax

  1. Now add a site map.  Right cick on your project, choose add then Site Map

20 Add Sitemap

  1. Try using some Kendo UI components.  Add a calendar on your Home -> Index.  Replace the whole S#arp default page with something like this
@{
    ViewBag.Title = "Home";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@(Html.Kendo().Calendar().Name("calendar"))

then add a menu on your Shared -> Layout, so replace the default one with something like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>@ViewBag.Title</title>

    @Styles.Render("~/content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/mywebapp")

</head>
<body>
    <div class="page">
        <div id="header">
            @(Html.Kendo().Menu()
            .Name("Menu")
            .HighlightPath(true)
            .BindTo("Web", (item, node) =>
            {
                var url = node.Attributes["imageurl"];
                if (url != null)
                    item.ImageUrl = node.Attributes["imageurl"].ToString();
            })
        )
        </div>
        <div id="mainContent">
            <div class="columnsContainer">
                <div class="leftColumn">
                </div>
                <!--/leftColumn-->
                <div class="rightColumn">
                    @RenderBody()
                </div>
                <!--/rightColumn-->
                <div class="clear">
                </div>
            </div>
            <!--/columnsContainer-->
        </div>
    </div>
    <!--/page-->
</body>
</html>

Try to run your project then it should look something like this.  At this stage your website is ready but lets configure some compoments so your presentation layer can communicate with your Tasks Layer.

21 Menu Added

  1. Update to the latest Json as S#arp uses 4.0.8.0.

22 Adding References (Newtonsoft)

  1. We will be using Json 4.5.10 and you have to install this reference on your Presentation and Task layer.

23 Adding References (Newtonsoft)

  1. Add also the SharpArch.Nhibernate on your task layer as you will be using it here.  You can find it in your Referenced Assemblies folder.

24 Adding References (Sharp nHibernate)

  1. Modify a part on your ComponentRegistrar.cs which you can find in the CastleWindsor folder of your Web Project. Old code should look like this
private static void AddTasksTo(IWindsorContainer container)
{
    container.Register(
        AllTypes
            .FromAssemblyNamed("MyWebApp.Tasks")
            .Pick()
            .WithService.FirstNonGenericCoreInterface("MyWebApp.Domain"));
}

you have to change it to something like this.

private static void AddTasksTo(IWindsorContainer container)
{
    container.Register(
        AllTypes
            .FromAssemblyNamed("MyWebApp.Tasks")
            .InNamespace("MyWebApp.Tasks")
            .WithService.FirstNonGenericCoreInterface("MyWebApp.Domain"));
}

You’re all good to go. Early next week I will be sharing an open source project I called Sharpener, this application will auto generate codes for you based on your database design.   This means you dont need to manually code your Domain Object, Query and its interfaces, View Models, Controllers, View, Commands and CommandHandlers, this will save you lots of time and make sure that your project conforms to proper naming and programming conventions.


2 thoughts on “Using Kendo UI 2013.1 with S#arp Architecture 2.0.4

  1. Pingback: Using Kendo UI 2013.2 with S#arp Architecture 2.1.2 | Raymund Macaalay's Dev Blog

Leave a Reply