When I inspect a Kendo UI component, like kendo-grid, in dev tools, no CSS is displayed. I can see that there are css classes applied to the component, k-grid and k-grid-md, but there's nothing displayed in dev tools for those css classes. I verified that I can create my own component, put it on my home component (as I've done with Kendo UI components), apply css classes to it and that css shows up in dev tools as I expect when I inspect it. So it only appears that I can't see the css for Kendo UI components. What do I need to do to get the css to show up?
Here's the element in dev tools:
Here's what the css pane in dev tools looks like:
2 Answers, 1 is accepted
Rank 1
Iron
Iron
Veteran
I stumbled across the solution when playing with something else.
You need to add one of the stylesheets to your <head> in index.html.
<link rel="stylesheet" href="http://unpkg.com/@progress/kendo-theme-default/dist/all.css" />
This would be a good little nugget to add to the "Getting Started with Kendo UI for Angular" article.
Hi Doug,
I can confirm that the installation of a Kendo Theme is needed in order for the styling of the corresponding component to take effect.
In case the quick setup approach with Angular CLI is used for installing the component packages, the Kendo UI Default theme is also automatically installed and registered in the angular.json file. This means that additional intervention from the developer is not necessary.
On the other hand, when operating with the manual setup approach, the developer can reference the desired theme in their project by using a CDN link, a precompiled CSS file, or by compiling the theme from the SCSS source files.
In addition, every Kendo UI component has a dedicated Getting Started article, in which both setup approaches are described, along with the Kendo Themes installation step. Nevertheless, your feedback regarding the general 'Getting Started with Kendo UI for Angular' article is appreciated and will be considered for further improvement, as only the quick installation approach is mentioned there and thus the Kendo Themes part might not be so noticeable.
I hope the provided information is helpful.
Regards,
Zornitsa
Progress Telerik
Rank 1
Iron
Iron
Veteran
Zornitsa,
Thanks for the response however I did in fact use the quick setup approach you link to (for both the grid and the chart) but I don't see anything in my angular.json that jumps out. The controls worked but as mentioned I was unable to style them until I added the kendo stylesheet to my index.html.
Hi Doug,
I have tested the quick setup approach on my side with both standalone and ngModule applications and everything seems to be working as expected. The approach behaves according to the steps described in the shared article and the Kendo UI Default theme was automatically registered in the angular.json file of my test application. In addition, when inspecting the Grid component in the browser, the corresponding styles were correctly applied to the element and I was able to observe them in the DevTools console.
For more detailed reference, here are the steps that I followed to create the applications:
- Created an Angular app -'ng new test-project' ('ng new test-project --no-standalone' for ngModule app).
- Navigated to the application - 'cd test-project'.
- Added the Grid component to the app using the quick setup approach - 'ng add @progress/kendo-angular-grid'.
In the case of the standalone application, the only additional step I had to do manually was importing the GridModule:
import { GridModule } from '@progress/kendo-angular-grid';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, GridModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
}As for the addition of the Kendo Themes, I am sharing a screenshot of the angular.json file in my test application for an observation of the location where the Kendo UI Default theme was automatically registered:
Therefore, since the experienced issue with the quick installation approach is not expected and is not reproducible on my side, I would like to ask you to provide more specific information regarding the exact steps performed for the installation of the corresponding Kendo packages. Also, any additional details about your scenario that might be related to the setup process would be appreciated.
This kind of information would help us troubleshoot the process and eventually determine a possible cause for the unexpected behavior that occurs on your side.
Thank you in advance for your cooperation.
Regards,
Zornitsa
Progress Telerik
Rank 1
Iron
Iron
Veteran
Zornitsa,
Thanks for your response. If I follow your steps to create a new application and add the kendo components I get the same result you did. Everything looks good there. With my application in question, I had created the app through "ng new" and had been working on it a while before I decided to incorporate the Kendo components but I then added the chart through "ng add @progress/kendo-angular-charts" (and subsequently the grid) and my angular.json styles node does not include the input in your red box above. It only has src/styles.css.
One thing to note: My node_modules\@progress folder does not contain a "kendo-theme-default" folder after adding the kendo components. In the manual setup instructions there is a step to install the theme, but I can say with certainty that I did not use the manual setup process
So at this point I can't say what exactly occurred in my app between the time I created it and the time I added the kendo components but something in there is preventing it from adding the theme.
One other thing to note: I just tried to add another kendo component (ripple, just to pick one) and it installed but I also got this message which I recall seeing before when I originally added the chart and grid: "Bootstrap call not found". So maybe that's preventing it from adding the theme? Here's the full output:
PS C:\Userdata\CrapsSimulator> ng add @progress/kendo-angular-ripple
ℹ Using package manager: npm
✔ Found compatible package version: @progress/kendo-angular-ripple@15.0.1.
✔ Package information loaded.
The package @progress/kendo-angular-ripple@15.0.1 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
Bootstrap call not found
When I follow your steps to create a new application and add the kendo components I don't get the bootstrap message so apparently it's something specific to my app that's causing the issue. I don't know what that would be but here's a link to my app repo in github if you want to take a look at it.
https://github.com/DougBowen72/CrapsSimulator
Hi Doug,
Thank you very much for the thorough explanation and resources provided.
The mentioned "Bootstrap not found" message is not familiar to us and nothing similar has been reported up till now. Therefore, based on the fact that the problem is not reproducible on a new application on your side as well, the issue is probably not related to our components but rather has some external cause.
After doing some research regarding the matter, it seems that the mentioned message is associated with the configuration in the main.ts file of your project. A similar case is discussed in the following StackOverflow thread, which suggests temporarily modifying the content of your main.ts file as a possible approach for solving this issue:
Thus, what I would suggest is trying the above approach in your application to verify whether it solves the issue in your scenario as well.
Let me know how it goes.
Regards,
Zornitsa
Progress Telerik