This article demonstrates how to set up the kendo UI Music Store Web Application by using Telerik UI for ASP.NET MVC.
To set up the project, three steps must be applied:
- Add Kendo UI to the project.
- Create the MVC bundles.
- Add Kendo UI to the ASP.NET layout page.
The preferred method of getting Kendo UI is to browse to telerik.com and download Kendo UI as a
.zip file. Depending on whether you are using the Trial version or have purchased the full Commercial distribution, you have a
.zip file that follows one of these directory structures:
Figure 1. The Kendo UI directory structure
\styles folders in the root of the
.zip file contain the minified versions of the Kendo UI
.css files. If you have the commercial version of Kendo UI, you may also notice the
\source folder. This folder also contains
\styles folders, but these are the full, non-minified versions of the
.css. These are typically used for local development and debugging, but the minified versions are the ones that should be deployed in a real application. For that reason, the examples use the minified files in this project.
Kendo UI enables you to fetch it from a CDN instead of downloading its files. For more information and the CDN URLs, see Use Kendo UI CDN Services.
Kendo UI is also available using the NuGet package manager in Visual Studio. Search for
Figure 2. The search result for Kendo UI using the NuGet package manager
In the Music Store project, the
kendo.all.min.js file and the
For more information on this topic, refer to the article on how to get started with Kendo UI.
.css files. This is because it uses
kendo.all.min.js which is already pre-bundled and minified.
Also, in the
Debug mode the bundler does not include minified files by default.
The following example demonstrates the making of a bundle from the Kendo UI
bundles.Add(new StyleBundle("~/Content/kendo").Include( "~/Content/kendo.common.min.css", "~/Content/kendo.default.min.css"));
These files are going to be included when running in the
Release mode and not in the
Debug mode. You are able to see and modify which files the ASP.NET bundler will ignore by inspecting the
bundles.IgnoreList collection at runtime.
Most sizeable web applications include a number of
.js files. It is a good practice to separate these into bundles for third-party libraries and your own application code.
Besides Kendo UI, the only third-party library the Music Store application uses is Date.js. Set a
libs bundle for this third-party library and an
app bundle for your own application code.
bundles.Add(new ScriptBundle("~/bundles/libs").Include( "~/Scripts/date.js")); bundles.Add(new ScriptBundle("~/bundles/app").Include( "~/Scripts/App/kendo-custom-bindings.js", "~/Scripts/App/kendo-cart-menu-widget.js", "~/Scripts/App/config.js", "~/Scripts/App/cart.js", "~/Scripts/App/store.js", "~/Scripts/App/shared-layout.js"));
Render them in
While it is a typically good practice to always include the minified versions of
To do this, include the non-minified
.css files from the
\source folder of the downloaded Kendo UI
.zip file in your project. Then, configure the ASP.NET bundles to include these files.
bundles.Add(new ScriptBundle("~/bundles/kendo").Include( "~/Scripts/kendo.all.js")); bundles.Add(new StyleBundle("~/Content/kendo").Include( "~/Content/kendo.common.css", "~/Content/kendo.default.css"));
Then set up your
web.config file to enable bundling only for the
Release builds of the application. In this way, ASP.NET servers the non-minified files for
Debug, and a bundled, minified version for
Release. To do this, set the compilation debug to
true in the
Debug version of your
<system.web> <compilation debug="true" targetFramework="4.5" />
Release version of the
web.config file set debug to
<system.web> <compilation debug="false" targetFramework="4.5" />
You are now able to add Kendo UI and any other third-party libraries to the pages. The Music Store uses the
kendo.common.min.css, plus one of the Kendo UI themes.
The following example demonstrates how to use the
kendo.default.min.css which is the Default theme.
<head> <meta charset="utf-8" /> <title>@ViewBag.Title - Kendo UI Music Store</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <link href="~/Content/kendo.common.min.css" rel="stylesheet" /> // <-- Added Here. <link href="~/Content/kendo.default.min.css" rel="stylesheet" /> // <-- Added Here. @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> // ... @Scripts.Render("~/bundles/jquery") <script src="~/Scripts/kendo.all.min.js"></script> // <-- Added Here. @RenderSection("scripts", required: false) </body>
<body> element as possible. In the Music Store project, you are actually including jQuery in the
<head>. This aspect is discussed in the tutorial—however, the reason for it is that on a later stage you are going to use some of UI for ASP.NET MVC which inserts
<script> tags into the
<body> of the page, and requires that jQuery is already defined.
The Kendo UI Music Store demo application uses an SQL Server database with sample data for artists, albums, orders, etc.
To populate the sample database, the application uses Entity Framework Code First migrations to create the database and seed the sample data. The migrations are configured to only run in the
Debug mode. If you run it in the
Release mode, the code assumes that the database is already created and does not try to create or seed the data.
The connection string configured in the
web.config file is set to use
LocalDB and will connect to a local database file in the
LocalDB requires an SQL Server 2012 or later.
To run the Kendo UI Music Store Dashboard demo, make sure your system meets these requirements or change the connection string to use an SQL Server instance available on your computer.
Other articles on the Kendo UI Music Store Web Application sample project: