This is a migrated thread and some comments may be shown as answers.

VS2012 RTM, MVC4, Kendo Bundle not Rendering

26 Answers 2627 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

ben asked on 17 Aug 2012, 03:05 PM

Started a brand new VS2012 MVC4 project and pulled down the Kendo UI from NuGet.

Followed the setup instructions for Kendo from http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction and I'm finding the CSS or js for Kendo is never rendered/sent to my browser.

This worked in the RC version of VS2012, but once i upgraded to RTM it started to fail.
from BundleConfig.cs

//jquery

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

"~/Scripts/jquery-1.*"));

// The Kendo JavaScript bundle

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(

"~/Scripts/Kendo/2012.2.710/kendo.web.min.js", // or kendo.all.* if you want to use Kendo UI Web and Kendo UI DataViz

"~/Scripts/Kendo/2012.2.710/kendo.aspnetmvc.min.js"));

// The Kendo CSS bundle

bundles.Add(new StyleBundle("~/Content/kendo").Include(

"~/Content/Kendo/2012.2.710/kendo.common.*",

"~/Content/Kendo/2012.2.710/kendo.default.*"));

From _Layout.cshtml

@Styles.Render("~/Content/kendo")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/kendo")

No errors are generated when my site runs, and looking at Chrome developer window nothing is generated for those @Scripts.Render lines for Kendo, the css or the js.

Thoughts, or something else I can try?

-ben

26 Answers, 1 is accepted

Accepted

answered on 20 Aug 2012, 10:52 AM

Hello,

In ASP.NET MVC 4 RC the bundles included minified JavaScript and CSS files in debug mode (<compilation debug="true">). In ASP.NET MVC 4 this is no longer the case - minified files are ignored in debug mode. The solution is to modify the default IgnoreList setting:

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

We have updated our introduction help topic as well as the code library project which shows how to use bundles with Kendo UI.

Regards,
Atanas Korchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 26 Aug 2012, 01:39 AM

Capture.PNG

This still doesn't work like a final workable solution for me unfortunately. When i use the method above, most of the css for the kendo controls seem to work, except for the images. See attached image, you can see the 2 numerictextboxes are missing the up/down arrows and the grid is missing the filter icon. If i remove the kendo css from the BundleConfig.cs file and instead move it into the _Layout.cshtml file as:

<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.common.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.blueopal.min.css")" rel="stylesheet" />

it works fine, the images show with no problem at all.

answered on 27 Aug 2012, 02:23 PM

Instead of renaming the files, i use

bundles.Add(new StyleBundle("~/Content/kendocss").Include(

"~/Content/kendo/2012.2.710/kendo.common.min.css",

"~/Content/kendo/2012.2.710/kendo.blueopal.min.css",

"~/Content/kendo/2012.2.710/kendo.black.min.css"));

and

BundleTable.EnableOptimizations = true;

so that it pointed to the min files directly, and EnableOptimizations means that i don't have to mess with debug=false/true at all, it just always uses the .min versions. The css for the kendo files works fine, i see the colors/fonts/everything except for just the images.

answered on 17 Oct 2012, 09:20 PM

Greetings fellow geeks.

I recently worked though a similar issue where not only was my styles not rendering but I was getting duplicate css files being pushed to the browser. My solution was to give the kendo javascript bundle a different name from the kendo css bundle. Although the two bundles are different types, it seems the bundle logic gets confused if there are identical names.

One side note, I also noticed that I had to put at least my jquery bundle in the head element of my layout page. Normally I like to include all of my javascript files at the bottom of my page but it seems the bundle logic works a little differently. I did notice that I can put the jquery bundle in the head element but then but my other javascript bundles like the kendo bundle at the bottom of the page and it works just fine.

Just my two cents, maybe it will help.

-Garry

answered on 25 Oct 2012, 03:09 PM

Can someone at Telerik please answer this problem correctly?

The original question said they used NUGET and that creates a 2 subfolders inside of the Scripts folder:

kendo/2012.2.710

Please tell us what to type to get BUNDLES to work with nuget installation.
Your code library sample does not have anything to do with nuget.
Please SPECIFICALLY give us a NUGET solution with bundles.
Tell us what we should type and how to name our bunldes as it is causing hell.
I do not want to hear about a solution where the kendo files are directly in the Script folder as that is not where nuget puts them.

Josh

answered on 05 Nov 2012, 08:20 PM

Here is how you accomplish what I mention in my post above:

First define ordering types: (to make sure things are bundled in the order you add them!)

public class AppCssOrderer : IBundleOrderer

{

public IEnumerable<FileInfo> OrderFiles(BundleContext context,

IEnumerable<FileInfo> files)

{

if (context == null)

throw new ArgumentNullException("context");

if (files == null)

throw new ArgumentNullException("files");

return files;

}

public class AppJsOrderer : IBundleOrderer

{

public IEnumerable<FileInfo> OrderFiles(BundleContext context,

IEnumerable<FileInfo> files)

{

if (context == null)

throw new ArgumentNullException("context");

if (files == null)

throw new ArgumentNullException("files");

return files;

}

Then define your bundle transformer (this will ensure the relative paths in the CSS work right when bundled - your primary issue):

public class StyleRelativePathTransform : IBundleTransform

{

public StyleRelativePathTransform(){}

public void Process(BundleContext context, BundleResponse response)

{

response.Content = String.Empty;

Regex pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase);

// open each of the files

foreach (FileInfo cssFileInfo in response.Files)

{

if (cssFileInfo.Exists)

{

// apply the RegEx to the file (to change relative paths)

string contents = File.ReadAllText(cssFileInfo.FullName);

MatchCollection matches = pattern.Matches(contents);

// Ignore the file if no match

if (matches.Count > 0)

{

string cssFilePath = cssFileInfo.DirectoryName;

string cssVirtualPath = cssFilePath.Replace(context.HttpContext.Request.ServerVariables["APPL_PHYSICAL_PATH"], String.Empty);

foreach (Match match in matches)

{

// this is a path that is relative to the CSS file

string relativeToCSS = match.Groups[2].Value;

// combine the relative path to the cssAbsolute

string absoluteToUrl = Path.GetFullPath(Path.Combine(cssFilePath, relativeToCSS));

// make this server relative

string serverRelativeUrl = "/" + absoluteToUrl.Replace(context.HttpContext.Request.ServerVariables["APPL_PHYSICAL_PATH"], String.Empty).Replace(@"\", "/");

string quote = match.Groups[1].Value;

string replace = String.Format("url({0}{1}{0})", quote, serverRelativeUrl);

contents = contents.Replace(match.Groups[0].Value, replace);

}

// copy the result into the response.

response.Content = String.Format("{0}\r\n{1}", response.Content, contents);

}

Then define a Bundle that uses this transform:

public class StyleImagePathBundle : Bundle

{

public StyleImagePathBundle(string virtualPath)

: base(virtualPath)

{

base.Transforms.Add(new StyleRelativePathTransform());

base.Transforms.Add(new CssMinify());

}

public StyleImagePathBundle(string virtualPath, string cdnPath)

: base(virtualPath, cdnPath)

{

base.Transforms.Add(new StyleRelativePathTransform());

base.Transforms.Add(new CssMinify());

}

Now create the bundles using the new bundler and orderers:

public static void RegisterBundles(BundleCollection bundles)

{

bundles.Add(new StyleImagePathBundle("~/Content/themes/blueopal/css").Include(

"~/Content/site.css",

"~/Content/KendoMvc/kendo.common.min.css",

"~/Content/KendoMvc/kendo.blueopal.min.css",

"~/Content/Custom/BlueOpal/blueopal.custom.css"));

bundles.Add(new ScriptBundle("~/Scripts/js").Include(

"~/Scripts/KendoMvc/jquery.min.js",

"~/Scripts/KendoMvc/kendo.web.min.js",

"~/Scripts/KendoMvc/kendo.all.min.js",

"~/Scripts/jquery.validate.min.js",

"~/Scripts/jquery.unobtrusive-ajax.min.js",

"~/Scripts/jquery.validate.unobtrusive.min.js",

"~/Scripts/KendoMVC/cultures/kendo.culture.en-US.min.js",

"~/Scripts/Site.js"));

bundles.GetBundleFor("~/Content/themes/blueopal/css").Orderer = new AppCssOrderer();

bundles.GetBundleFor("~/Scripts/js").Orderer = new AppJsOrderer();

BundleTable.EnableOptimizations = true;

}

Thats it. I have shown Kendo CSS and your own custom CSS working in default nuget locations with Bundling! caution: don't mix absolute and relative paths in your custom CSS files versus Kendo . css files. Always use relative CSS image paths. The bundle transformer takes care of the rest.

Happy Coding
-JJ

answered on 07 Nov 2012, 03:56 AM

Brilliant code - helped me enormously.

If you change

// make this server relative

// make this server relative

var serverRelativeUrl = "/" + absoluteToUrl.Replace(context.HttpContext.Request.ServerVariables["APPL_PHYSICAL_PATH"], String.Empty).Replace(@"\", "/");

in StyleRelativePathTransform

to

// make this server relative

var serverRelativeUrl = context.HttpContext.Request.Path +"/" + absoluteToUrl.Replace(context.HttpContext.Request.ServerVariables["APPL_PHYSICAL_PATH"

],

String.Empty).Replace(@"\", "

/");





it will also work when the app is a Web Application i.e. not located at the root of Default Web Page.



Jeremy

answered on 20 Jan 2013, 06:14 AM

I struggled with this also, but I just got it working. My KendoUI version is 2012.3.1315.

I had installed the jQuery NuGet package which installed version 1.9.0. KendoUI doesn't work with this. I changed the reference in the scripts bundle for jQuery to point to the "jquery.min.js" from the kendo folder, and everything worked.

I thought this might help others.

Here's my RegisterBundles code:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

"~/Scripts/kendo/jquery.*"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

"~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

"~/Scripts/jquery.unobtrusive*",

"~/Scripts/jquery.validate*"));

// Use the development version of Modernizr to develop with and learn from. Then, when you're

// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

"~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(

"~/Scripts/kendo.all.*",

"~/Scripts/kendo.aspnetmvc.*"));

bundles.Add(new ScriptBundle("~/bundles/pgo").Include("~/Scripts/pgo.js"));

bundles.Add(new StyleBundle("~/Content/pgo").Include("~/Content/pgo/pgo.css"));

bundles.Add(new StyleBundle("~/Content/kendo").Include(

"~/Content/kendo.compatibility.css",

"~/Content/kendo/kendo.common.*",

"~/Content/kendo/kendo.dataviz.*",

"~/Content/kendo/kendo.default.*",

"~/Content/kendo/kendo.dataviz.default.*"));

// 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's my _Layout.cshtml Head stuff:

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title - My ASP.NET MVC Application</title>

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<meta name="viewport" content="width=device-width" />

@Scripts.Render("~/bundles/modernizr")

@Styles.Render("~/Content/kendo")

@Styles.Render("~/Content/pgo")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/kendo")

@Scripts.Render("~/bundles/pgo")

</head>

I spent over an hour trying to get this to work and I even referenced the Help topic that Atanas mentions as well as the Code Library project, before trying to change the jQuery version.

answered on 20 Jan 2013, 08:03 PM

bundles-403.png

Ok, this is an update to my last post, while the code I presented in my last post works, it only seems to work in development, in Debug mode. When I change the "debug" attribute to "false", I get a 403 Forbidden error on the minified versions.

<compilation debug="false" targetFramework="4.5" />

I've attached a screenshot of the Firebug console.

It's most likely not directly a KendoUI issue, but hopefully the team has a solution for this, since we developers will be deploying to production servers in Release mode, and would need to work.

I have read this post many times and I've followed it as you can see in my code in my last post, but I still have the 403 error for Release mode. An explanation of where my code is wrong would be appreciated.

Any help is appreciated.

Thanks,

King Wilder