SUNIL
Top achievements
Rank 2
Iron
Iron
Iron
Rank 2
Iron
Iron
Iron
If I include a certain kedo ui theme like default or nova or uniform in my asp.net mvc view/web page that uses kendo ui, then what would be the quickest way to apply the kendo ui theme to everything on the asp.net mvc view i.e. to the textboxes, buttons etc.?
The asp.net mvc view/web page is always applying boostrap theme to the textboxes, buttons etc, but I want to change it so that the kendo ui theme gets automatically applied to these textboxes, buttons etc.
I know that I could execute jquery code on document ready event that looks for all elements in the web page and then changes each element to a corresponding kendo ui element (example code as below), but this would involve quite a bit of coding in jquery.
$(document).ready(function () {
let allElements = document.querySelectorAll("button,input,textarea");
console.log("allElements length is " + allElements.length);
for (let i=0; i < allElements.length; i++) {
let emt = allElements[i];
emt.className = "";
console.log("element tag name is " + emt.tagName);
if (emt.tagName === "BUTTON") {
$(emt).kendoButton();
} else if (emt.tagName === "INPUT" && (emt.getAttribute("type") === "text" || emt.getAttribute("type") === "password")) {
$(emt).kendoTextBox();
} else if (emt.tagName === "TEXTAREA" ) {
$(emt).kendoTextArea();
}
}
$(".jumbotron").kendoResponsivePanel({breakpoint:769});
});It would be really cool if by simply removing bootstrap.css from the web page, the entire page would automatically have the kendo ui theme applied or a single method could be called on the global kendo ui object like kendo.applyTheme(<theme-name>).
Hello!
To apply a Kendo UI theme to your ASP.NET MVC view, include the Kendo UI theme CSS in your layout or view (e.g., kendo.default-v2.min.css). Remove any Bootstrap CSS to prevent conflicts. Use jQuery to initialize Kendo UI widgets for elements like buttons, textboxes, and text areas on document ready. Since there's no built-in kendo.applyTheme() method, this approach ensures that all relevant components are styled according to the Kendo UI theme.
Hi Sunil,
Could you please provide more details on how the resources are loaded in the _Layour.cshtml page in your applicaton?
Regards,
Neli
Hi Neli, I have used the standard way that's normally used in an asp.net MVC app. Code is as given below. First include the necessary javascript and css files in the appropriate bundles and then render these bundles in the common layout view.
_Layout.cshtml
@using Kendo.Mvc.UI <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Styles.Render("~/Content/kendo/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/kendo") @Scripts.Render("~/bundles/bootstrap") </head>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/MVC/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/MVC/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/MVC/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/MVC/bootstrap.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Styles/MVC/bootstrap.css", "~/Styles/MVC/site.css")); bundles.Add(new ScriptBundle("~/bundles/kendo").Include( "~/Scripts/kendoUIMVC/kendo.all.min.js", // Uncomment below if you use the Scheduler. // "~/Scripts/kendo/kendo.timezones.min.js", "~/Scripts/kendoUIMVC/kendo.aspnetmvc.min.js")); bundles.Add(new StyleBundle("~/Content/kendo/css").Include( //"~/Styles/kendoUIMVC/kendo.bootstrap-v4.min.css", "~/Styles/kendoUIMVC/kendo.common.min.css", "~/Styles/kendoUIMVC/kendo.default.min.css", "~/Styles/kendoUIMVC/kendo.mobile.all.min.css")); bundles.IgnoreList.Clear(); } }Thanks
Sunil
Hi Sunil,
The provided code seems correct. After reviewing the snippet of the Layout page and the bundles I did not manage to find any reason for the observed behavior.
What I would suggest is try remove also the Bootstrap scripts. I see that you are not including the Bootstrap styles, but you could try removing also the scripts.
Also, could you please try to load the application and check in the Network Tab of the browser what are the loaded CSS files?
Regards,
Neli
Hi Neli,
I tried after removing the bootstrap.js file, but the kendo ui theme is not automatically applied to the login page or other pages. You can see in the attached images the css files being loaded and also the appearance of login page after I excluded bootstrap.js.
Thanks, Sunil
Hi Sunil,
From the provided images I am not sure what is the cause of the observed issue. In order to be able to help I will need an isolated runnable example where the issue is replicated. This will give me the opprotunity to troubleshoot locally and try to find the cause of the issue. Thus, I would like to kindly ask you to try to isolate the issue in a small project and send it back to us for review.
Looking forward to your reply.
Hi Neil,
I am not sure if you wanted a sample in ASP.Net MVC or a simple html page that replicates this issue.
The html sample that replicates this issue is at https://dojo.telerik.com/@sun21170/EZopeqel
In this sample, the moonlight theme from Kendo UI is included, but the elements for button and textbox are not being styled automatically and they render with browser based styling rather than KendoUI styling. The Kendo UI menu is being styled with moonlight theme because of the script that creates Kendo UI menu from an html element.
Thanks
Sunil
Hi Sunil,
May be I misunderstood the issue. From the initially provided information I assumed that there are kendo components to which the loaded theme is not applied correctly. However, from the provided example I realize that you need to style the standard buttons and inputs as Kendo components, but without initialize Kendo Button and Kendo TextBox. Is this correct?
In the provided example if you need to style the 'Button 1' and input 'File Name' you could inspect the respective Kendo components and add the same classes to the elements:
<button id="btn1" class="k-button">Button 1</button> <button id="btn2">Kendo Button</button> <div style="clear:both;margin-top:30px;"></div> <label id="lbl1" for="txtBox1">First Name:</label> <input type="text" id="txtBox1" class="k-textbox" /> <label id="lbl2" for="txtBox2">Kendo TextBox:</label> <input type="text" id="txtBox2"/>Here you will find the modified example where the above is demonstrated - https://dojo.telerik.com/@NeliK/UNohulEk
Please note that the classes below are suitable with the version used in the example you have sent - 2020.3.1021.
In 2022 R1 new rendering has been introduced for most of our components. In case you decide to upgrade you can fnd more information on the links below:
- https://docs.telerik.com/kendo-ui/styles-and-layout/components-rendering-overview
- https://docs.telerik.com/kendo-ui/controls/textbox/appearance
- https://docs.telerik.com/kendo-ui/controls/button/button-styling
i hope this helps.
Regards,
Neli
Hi Neil,
Thanks for your reply. Using an appropriate kendo ui class for each element is a good way of applying a kendo ui theme. Using a Javascript method like the one I used in my original post serms to be ok too, if one wants to assign kendo ui classes in an automated manner.
Thanks
Sunil