Kendo projects and MVC bundling

[Adam]

When starting or converting a project to a Kendo MVC project, the css and js are copied into a "kendo/(build#)" folder within the "Content" and "Scripts" folders respectively.

Your documentation on using MVC bundling with Kendo works just fine. My only issue is it requires the css/js to be in the root "Content" and "Scripts" folders and not where they are put by default.

I'm just trying to understand this because the project layout conflicts with your documentation. I have tried the bundling when the files are where the wizard puts them and I could not get it to work. Are we supposed to just manually copy/dupe the content each release?

Ideally a nuget package for the MVC wrappers would be used, but I just want to know how to best work around the way it currently is.

[Atanas Korchev]

Hi Adam,

 Indeed the documentation help topic currently doesn't show how to use ASP.NET bundles when the scripts and themes of Kendo UI are in ~/scripts/kendo/{version} and ~/content/kendo/{version} (which is where they are copied by the Visual Studio extensions by default). We will update our documentation shortly.

 Here is how you should register your bundles:

bundles.Add(new ScriptBundle("~/bundles/kendo")
     .Include("~/Scripts/kendo/2012.3.1315/kendo.web.min.js")
     .Include("~/Scripts/kendo/2012.3.1315/kendo.aspnetmvc.min.js")
);

bundles.Add(new StyleBundle("~/Content/kendo/2012.3.1315/css")
      .Include("~/Content/kendo/2012.3.1315/kendo.common.min.css")
      .Include("~/Content/kendo/2012.3.1315/kendo.default.min.css")
);

// 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);

And here is how to use them:

@Styles.Render("~/Content/kendo/2012.3.1315/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")

For your convenience I have attached a runnable sample project.

All the best,
Atanas Korchev
the Telerik team

[Adam]

Thanks Atanas,

I used this method and it is working well.

[Fred]

Just in case a future search comes to this post, here are the details of how to fix HTTP 404 errors involving Telerik ASP.Net MVC and .woff files.  It involves modifying web.config.  Please note the comments which explain the markup.

 

```XML

<!-- Following is need for Telerik ASP.Net MVC when deployed to Azure to prevent HTTP 404 not found errors when Telerik internally references their .woff files -->
<!-- Reference: https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap -->
<staticContent>
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>

```

[Dimitar]

Hello Fred,

Thank you for sharing your solution with the community.

Regards,
Dimitar
Progress Telerik

[Ed]

Why does the CSS bundle have a specific version number in it? Is that a mistake? If not, is there a way to alias the versioned kendo directories so the version doesn't have to be changed to update?

[Dimitar]

Hello Ed,

The specific version corresponds to the release version of the package and is intended to be available in the /kendo folder. I have researched further if the MVC Include method allows usage of wildcard selectors to skip the version folder - this however is not possible accordng to the official documentation on the topic.

Taking the above into consideration,  a possible approach that you could try to skip the versioning is to create a build process that copy/pastes only the required scripts and styles in a specific folder (e.g with Gulp).

Regards,
Dimitar
Progress Telerik

[Leo]

Please let me know if there is way to exclude the culture folders or how to remove them as I am not actively using Kendo. Just started to put up some Dropdown UI which did not work

[Dimitar]

Hello Leo,

Are you referring to the culture files in the script folder ? The Kendo scripts running client-side use en-US culture by default and there is no need for other JS culture files and you can remove them from the project.

The required client-side resourced needed to correctly setup a project are described in this article:

• Including Client-Side Resources.

In case you have any further issues with configuring the project, I would suggest to open a separate support thread where you can provide additional information regarding the issue. In this way, we will be able to investigate further and assist you with resolving the issue.

Regards,
Dimitar
Progress Telerik