Kendo projects and MVC bundling

5 posts, 0 answers
  1. Adam
    Adam avatar
    24 posts
    Member since:
    Nov 2011

    Posted 12 Feb 2013 Link to this post

    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.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Adam
    Adam avatar
    24 posts
    Member since:
    Nov 2011

    Posted 14 Feb 2013 Link to this post

    Thanks Atanas,

    I used this method and it is working well.
  4. Fred
    Fred avatar
    4 posts
    Member since:
    Jan 2017

    Posted 22 Mar 2018 Link to this post

    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>

    ```

  5. Dimitar
    Admin
    Dimitar avatar
    677 posts

    Posted 26 Mar 2018 Link to this post

    Hello Fred,

    Thank you for sharing your solution with the community.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top