Kendo projects and MVC bundling

7 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
    764 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.
  6. Ed
    Ed avatar
    9 posts
    Member since:
    Aug 2012

    Posted 19 Feb in reply to Atanas Korchev Link to this post

    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?
  7. Dimitar
    Admin
    Dimitar avatar
    764 posts

    Posted 21 Feb Link to this post

    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

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top