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

The \js and \styles folders in the root of the .zip file contain the minified versions of the Kendo UI .js and .css files. If you have the commercial version of Kendo UI, you may also notice the \source folder. This folder also contains \js and \styles folders, but these are the full, non-minified versions of the .js and .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.

In the Music Store project, the kendo.all.min.js file and the Default Kendo UI theme are referenced, because the project intends to use the Kendo UI widgets rendering data visualization together with other Kendo UI widgets. If the project was intended to use a few selected portions of Kendo UI, it would have taken individual JavaScript files and make a separate bundle for them, reducing the download size for the end user.

ASP.NET MVC 4 is able to bundle and minify JavaScript and Style Sheets. The Music Store project is not bundling the Kendo UI .js and .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 .css files.

Example

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.

Example

// Clear all items from the default ignore list to allow minified CSS and JavaScript files to be included in debug mode
bundles.IgnoreList.Clear();
// Do not include intellisense files
bundles.IgnoreList.Ignore("*.intellisense.js");

Example

While it is a typically good practice to always include the minified versions of .js and .css files that you use, it makes debugging JavaScript errors more difficult. The commercial version of Kendo UI comes with the full non-minified source code. You can include these files instead, using the ASP.NET bundler to bundle and minify them for production, while still keeping them un-minified for development.

To do this, include the non-minified .js and .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.

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 web.config file.

Example

<system.web>
<compilation debug="true" targetFramework="4.5" />

The Release version of the web.config file set debug to false.

Example

You are now able to add Kendo UI and any other third-party libraries to the pages. The Music Store uses the Views\Shared\_Layout.cshtml master page, so add Kendo UI here. Make sure that the Kendo UI JavaScript files come after jQuery. For styling, include 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.

It is a common practice to include as much JavaScript at the bottom of the <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 Telerik UI for ASP.NET MVC which inserts <script> tags into the <body> of the page, and requires that jQuery is already defined.

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 App_Data folder. 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.