Rank 1
I'm following this video tutorial:
https://learn.telerik.com/learn/course/external/view/elearning/3/telerik-ui-for-aspnet-mvc
My application does not appear to be rendering Kendo CSS properly.
Here is my BundleConfig.cs
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/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 https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new ScriptBundle("~/bundles/kendojs").Include(
"~/Scripts/kendo/2021.3.1207/kendo.all.min.js",
"~/Scripts/kendo/2021.3.1207/kendo.aspnetmvc.min.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/styles/site.css"));
bundles.Add(new StyleBundle("~/Content/kendocss").Include(
"~/Content/kendo/2021.3.1207/kendo.default-v2.min.css"));
bundles.Add(new StyleBundle("~/Content/dashboardcss").Include(
"~/Content/styles/dashboard.css"));
bundles.Add(new StyleBundle("~/Content/backlogcss").Include(
"~/Content/styles/backlog.css"));
bundles.Add(new StyleBundle("~/Content/detailcss").Include(
"~/Content/styles/detail.css"));
}
Here is the head tag in my _Layout.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RPS Project Tracker</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/Content/kendocss")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("styles", required: false)
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/kendojs")
@Html.Kendo().DeferredScripts()
@RenderSection("scripts", required: false)
</head>Here's some examples of the errors in my UI:
in /Backlog/{id}/Details view, my DropDownListFor has no styling attributes:
On the Dashboard and Backlog pages, my buttons have broken styling:
Inside DevTools, I'm getting the following error:
Any help sorting this out is greatly appreciated.
1 Answer, 1 is accepted
Hello Justin,
Thank you for writing to us.
There is a line in the definition which reads:
@Scripts.Render("~/Content/kendocss")But I suppose it needs to be:
@Styles.Render("~/Content/kendocss")That should resolve the issue. For your convenience, I am also sending a full working MVC project with CDN references.
Regards,
Eyup
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.