VS2012 RTM, MVC4, Kendo Bundle not Rendering

Thread is closed for posting
27 posts, 1 answers
  1. ben
    ben avatar
    1 posts
    Member since:
    Jul 2007

    Posted 17 Aug 2012 Link to this post

    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

  2. Jay
    Jay avatar
    1 posts
    Member since:
    Apr 2012

    Posted 19 Aug 2012 Link to this post

    I've run into the same problem with VS2012 RTM & MVC4 projects.

    I haven't found a solution yet.

    Jay

  3. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8235 posts
    Member since:
    Sep 2012

    Posted 20 Aug 2012 Link to this post

    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!

  4. Dan
    Dan avatar
    3 posts
    Member since:
    Oct 2010

    Posted 22 Aug 2012 Link to this post

    One other solution is to just copy the .min files and remove the .min from the copies to have a "regular" version of them. This avoids potenital problems as the solution listed above will return duplicates in debug mode for things like JQuery (i.e. the bunding engine will link to both JQuery and JQuery.min making debugging difficult).
     
    I would suggest to the Telerik team to please release a non-minified version which will both help with debugging and match standards with other projects like JQuery and Knockout.

  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8235 posts
    Member since:
    Sep 2012

    Posted 22 Aug 2012 Link to this post

    Hi Dan,

     The non-minified JavaScript files are already available in the \src\js folder (included only in the commercial distribution).

    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!

  6. Phil
    Phil avatar
    30 posts
    Member since:
    Aug 2012

    Posted 25 Aug 2012 Link to this post

    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. 

  7. Dimo
    Admin
    Dimo avatar
    7423 posts
    Member since:
    Sep 2012

    Posted 27 Aug 2012 Link to this post

    Hi Phil,

    The image paths in the theme CSS file are relative to the CSS file's location. What image URLs is the browser requesting? Are the images available at their proper location?

    ~ / [some path] / CSS-file-here
    ~ / [some path] / BlueOpal / theme-images-here

    Let me know if you need more information.

    All the best,
    Dimo
    the Telerik team

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

  8. Phil
    Phil avatar
    30 posts
    Member since:
    Aug 2012

    Posted 27 Aug 2012 Link to this post

    Yes, the folders are in the proper directories, and the images were in there.  As i said, the images show up fine when i use

    <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" />
        <link href="@Url.Content("~/Content/kendo/2012.2.710/kendo.black.min.css")" rel="stylesheet" />

    but does not work when i use MVC4 script bundling.

  9. Dan
    Dan avatar
    3 posts
    Member since:
    Oct 2010

    Posted 27 Aug 2012 Link to this post

    It is the same problem with the css bundling as with the scripting, any .min files are ingored in debug mode. if you copy the files and remove the .min in the copies it will start working. I've looked at about 15 major NuGet packages that contain javascript and/or CSS and they all package both the minified and non-minified packages. MS did just add these filters withh the RTM release which is why you didn't see this in the RC for MVC.

  10. Phil
    Phil avatar
    30 posts
    Member since:
    Aug 2012

    Posted 27 Aug 2012 Link to this post

    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.

  11. Dan Miser
    Dan Miser avatar
    25 posts
    Member since:
    Nov 2009

    Posted 29 Aug 2012 Link to this post

    To get around the duplicate min and non-min versions of the files being included after applying the ignoreList workaround above, just be sure to not use the wildcard pattern when building up your bundles. If you use the {version} macro, you will just get the correct version, e.g.:

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
      "~/Scripts/jquery-{version}.js"));

  12. Jason Denney
    Jason Denney avatar
    3 posts
    Member since:
    Jun 2005

    Posted 20 Sep 2012 Link to this post

    I made a post on the asp.net forums asking about the Bundle rendering but thought I would add the link to the post here in case someone here also has some thoughts on this.

    http://forums.asp.net/t/1845117.aspx/1?StyleBundle+not+rendering 

  13. Garry
    Garry avatar
    1 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    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

  14. Phil
    Phil avatar
    30 posts
    Member since:
    Aug 2012

    Posted 17 Oct 2012 Link to this post

    Yeah, unfortunately that is a separate unrelated issue for me.  My bundles already had different names, and jquery was already at the top of my layout as well.  Neither fixes the original issue.

  15. Joshua
    Joshua avatar
    7 posts
    Member since:
    Oct 2011

    Posted 25 Oct 2012 Link to this post

    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

  16. Brendon
    Brendon avatar
    19 posts
    Member since:
    Dec 2008

    Posted 27 Oct 2012 Link to this post

    I would second the comment above mine. The installation docs at http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction do not explain how to install using NuGet. Seems this should be the first installation procedure.

  17. Jon
    Jon avatar
    5 posts
    Member since:
    Apr 2007

    Posted 05 Nov 2012 Link to this post

    The problem is not with Kendo.  The default bundle transformer in MVC4 does not handle relative image paths in the .CSS files. To enable this you would have to implement your own "IBundleTransform" and convert the relative paths to absolute paths.  You would then implement your own bundler that used this new type.  Google   "IBundleTransform" for examples.


    Thanks
    -JJ

  18. Jon
    Jon avatar
    5 posts
    Member since:
    Apr 2007

    Posted 05 Nov 2012 Link to this post

    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









  19. jholt
    jholt avatar
    21 posts
    Member since:
    May 2007

    Posted 06 Nov 2012 Link to this post

    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

  20. Jon
    Jon avatar
    5 posts
    Member since:
    Apr 2007

    Posted 07 Nov 2012 Link to this post

    Glad you found this useful.  I cut and pasted from 4 different stackoverflow posts to get that code.  I new the app_physical_path thing smelled funny.  Adding your update now.

    -JJ

  21. Lorenzo Raimondi
    Lorenzo Raimondi avatar
    38 posts
    Member since:
    Jul 2009

    Posted 18 Nov 2012 Link to this post

    Hi,
    just upgraded to version Q3 2012 and getting back the bundles problem. I've reproduced all the steps suggested, but if Debug="false" something goes wrong. I prepared a simple sample page containing only a simple directive to test Kendo UI 

    $("#tabs").kendoTabStrip();
    ...and in console Log i get "Uncaught TypeError: Cannot call method 'ready' of undefined". Nothing in Kendo works anymore.
    Did anything change regarding bundles ?

    Thanks.

  22. jholt
    jholt avatar
    21 posts
    Member since:
    May 2007

    Posted 18 Nov 2012 Link to this post

    Same problem here.

    For some reason when the scripts are combined into one script, the reference to "$" changes to "jQuery". Running jQuery 1.8.3.

    I've gone back to putting the references in the header and not bundling. Very annoying!

  23. IT
    IT avatar
    1 posts
    Member since:
    Nov 2012

    Posted 29 Nov 2012 Link to this post

    I found that if i was using any version of jquery greater than 1.7.2 that i would receive the following error.

    Uncaught TypeError: Cannot call method 'ready' of undefined

  24. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8235 posts
    Member since:
    Sep 2012

    Posted 30 Nov 2012 Link to this post

    Hi,

     The getting started help topic shows how to use bundles with Kendo UI. Consider reviewing it.

    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!

  25. King Wilder
    King Wilder avatar
    232 posts
    Member since:
    Oct 2007

    Posted 20 Jan 2013 Link to this post

    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.

  26. King Wilder
    King Wilder avatar
    232 posts
    Member since:
    Oct 2007

    Posted 20 Jan 2013 Link to this post

    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

  27. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8235 posts
    Member since:
    Sep 2012

    Posted 21 Jan 2013 Link to this post

    Hello,

     The getting started help topic shows how to use bundles with Kendo UI. We also have a running code library project. The latter works both and release and debug mode. I don't know how to better document and demonstrate how to use ASP.NET bundles.

    Consider comparing your implementation with the sample project.

    I am going to close this thread because I believe it digressed a lot from the original intent of its author. Feel free to open a new thread or support ticket.

    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!

Back to Top