When using the newer kendo SASS themes as found in npm, the toolbar of my telerik reports disappears. telerikReportViewer-css is still being loaded, but the toolbar does not end up with any visible buttons.
Are telerik reports incompatible with the kendo SASS themes found in npm? How can I get this working with the SASS styles as they work better with the Kendo React components.
14 Answers, 1 is accepted
Since we are discussing this on your support ticket #1342500 also, I'll post my reply here too.
A few notes before that:
- This behavior of the report viewer is caused by the fact that you are trying to switch from Less-Based theme to Sass-based theme for styling the ReportViewer.
- At the moment, the workaround is described in step 8 of How To: Use Angular Report Viewer with Angular CLI (please note that this is not just for the angular report viewer, but it could be a solution for the HTML5 Report Viewer also): "When using Sass-Based Themes: Use pre-built CSS files or NPM packages as described in Getting the Sass-Based Themes. Then set the templateUrl of the report viewer to an HTML template specifically designed for use with the Sass-Based themes"
And here is my last answer of a question if there is another placement of telerikReportViewer-sass.html and telerikReportViewer-sass.css files than through the @progress/telerik-angular-report-viewer npm package:
"However, you question about the placement of the telerikReportViewer-sass.html and telerikReportViewer-sass.css is relevant to the topic. In general, there is an existing sass template in Telerik Reporting installation folder, for example C:\Program Files (x86)\Progress\Telerik Reporting <VERSION>\Html5\ReportViewer\templates, but there is no telerikReportViewer-sass.css into the styles folder. We haven't put it there at first, due to the internal discussion with Kendo team for further fix and improvement, so the user will not be required to add any custom templates and styles to run custom Kendo themes with the Report Viewer. I've already mentioned that there is an opened issue - https://github.com/telerik/kendo-themes/issues/225.
After that, telerikReportViewer-sass.css and telerikReportViewerTemplate-sass.html will no longer exist for manual configuration to work properly.
So far this file is distributed only through the @progress/telerik-angular-report-viewer npm package.
We will continue following the case with Kendo team and either provide the sass stylesheet file in installation folder in future versions or prevent the need of using the sass template structure at all."
Regards,
Silviya
Progress Telerik
Dear Team,
2 years later I have the same question: Are telerik reports incompatible with
the kendo SASS themes found in npm?
There are multiple small visual defects when using the npm packages
@progress/kendo-theme-default or -material:
- Toolbar glyphs are not centered; they are also red when using default theme.
- Export submenu appears to the far left side.
- Toast messages for Loading/Done have no background and so interfere with
report data.
- All report data is offset when using material theme.
I know that the workaround (to set a specialized template) is no longer
necessary - thank you for fixing that - but the GitHub issue which you pointed
out https://github.com/telerik/kendo-themes/issues/225 was actually never resolved.
After two years of inactivity it was closed and invalidated with this strange
comment:
"The report viewer is using menu component instead of toolbar and it's not
unexpected to have some issues -- after all, the menu is not conceived to work
like a toolbar."
What does that mean? Are we still expected to use the old less-based themes
with the HTML5 report viewer? They work perfectly indeed.
I'd like to use the npm packages only and to remove the global references to
the less-based themes (kendo.common.min.css and kendo.***.min.css).
Is that feasible?
To reproduce the defects in a clean environment I did the following:
- I followed this guide: https://docs.telerik.com/reporting/angular-report-how-to-use-with-angular-cli
- I installed the latest versions of the npm
packages so far:
@progress/telerik-angular-report-viewer: 11.20.1021
@progress/kendo-theme-default: 4.27.0
@progress/kendo-theme-material: 3.23.0
- I even copied @progress\kendo-theme-default(or material)\dist\all.css to
/assets and referenced it expilicitely in index.html.
Best regards,
Miroslav Vasilev
Hello Miroslav,
First I have tested our angular demo which was released with R3 2020:
C:\Program Files (x86)\Progress\Telerik Reporting R3 2020\Examples\Angular\CLI
with the less kendo themes released on 18th of November:
<link href="http://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default.min.css" rel="stylesheet" />
<!-- <link href="http://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.material.min.css" rel="stylesheet" /> -->
They worked well.
After that I checkеd which is the latest stable version of Kendo SASS themes. It was released on 16th of November as follows:
- @progress/kendo-theme-default: 4.26.0
- @progress/kendo-theme-material: 3.24.0
After referencing them in the demo, I confirm the observed behavior by you - icons are wrong color in the default theme and buttons' alignment is broken. One of the reason for this is that the kendo version does not correspond with the theme version. I will dig into this further and will let you know about my findings.
Regards,
Sia
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello again,
I have discussed the issue with my colleagues and it appears that the observed behavior is a bug. I have logged a public item, which you can follow to track its progress.
Replacing the Kendo less theme with a sass one should not lead to such icons misalignment. However the change of the color is expected as can be observed in the Kendo demos. The menu text in the Less default theme is black and the same is orange in the Sass theme.
As a sign of gratitude for your feedback, you can find your telerik points updated.
Regards,
Sia
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
I should emphasize that the most notable problem (to me at least) is the last one: All report data is offset when using material theme.
I use the less material theme now. While the rest of the sass bugs are just in the toolbar, the last one prevents me from using the sass material theme altogether.
I'll attach screenshots in the public item you opened. Sadly, its status was changed from Pending Review to Unplanned.
Happy Holidays!
Hello,
Any additional comments added to the public item are of great help to us.
This item is logged with a higher priority and you will be notified when its status is changed.
Meanwhile could you please try the following style on your end that should fix the dropdown position and the error div background:
#trv-main-menu-export-command { position: relative; } .trv-pages-area > .trv-error-pane > .trv-centered { background-color: white; }
Regarding the offset of the report, please send me your report so we can try to find a workaround
Regards,
Sia
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello,
I confirm that the style-patch you provided
above fixes the position of the export dropdown and the background of the
overlay messages.
Regarding the data offset problem using the material sass theme - I attached a
repro report to the public item, with more screenshots:
https://feedback.telerik.com/reporting/1500152-replacing-kendo-less-theme-with-a-sass-one-leads-to-unexpected-behavior
Best regards,
Miroslav Vasilev
Hello,
Please excuse me for the late reply.
I have tested our Angular demo with the attached demo report and the Kendo Material sass theme. However I have not reproduced such offset. Of course I have hard coded the textbox value. You can see the attached screenshot (demo.png) for reference.
I have tested the html5 demo as well and the offset cannot be reproduced as well. A screenshot (html5demo.png) is also attached. Am I missing something?
Regards,
Sia
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello again,
I am sorry. I was testing the default theme on my end. Now the wrong offset is reproduced. However the textbox is broken by local css setting. A possible solution which comes to my mind is to change the textbox height with the following style:
/* textbox height is locally set */
.textBox108 {
min-height: 20px;
}
/* aligns icons */
.k-menu-link {
display: inherit;
}
However I will need your full report with the objectDataSource to think of a better workaround which will cover all cases.
Regards,
Sia
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello,
I attached a zip file with demo in the public topic: https://feedback.telerik.com/reporting/1500152-replacing-kendo-less-theme-with-a-sass-one-leads-to-unexpected-behavior
Hello again,
I was able to download the files you have provided.
However I am still not able to run it with a sample data.
Could you please send me a runnable project with some sample data in it?
I will convert the thread to a general feedback one to make it private.
Regards,
Sia
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello Miroslav,
Thank you for providing the whole information related to the unexpected behavior when setting SaSS themes to our HTML5/Angular demo.
I see that the values' misplacement is caused by a style targeting the .k-splitter.
What I can suggest is applying the following style:
<style type="text/css">
/* align values */
.k-splitter {
line-height: inherit;
}
/* aligns icons */
.k-menu-link {
display: inherit;
}
/*fixes the dropdown popup of the export button */
#trv-main-menu-export-command {
position: relative;
}
/* loading message background */
.trv-pages-area > .trv-error-pane > .trv-centered {
background-color: white;
}
</style>
In my opinion it works well with the rest themes as well. Please test it on your end.
Regards,
Sia
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
In reality however we use Vuetify which sets an explicit line-height at the root level (.v-application { line-height: 1.5; }). When .k-splitter inherited the root line-height the data was still misplaced. To overcome that I had to reset the line-height of .k-splitter to the default for the browser. I also added a border to the loading message to mimic the less material theme.
The style ended up like that:
<style>
/* align values */
.k-splitter {
line-height: normal;
}
/* aligns icons */
.k-menu-link {
display: inherit;
}
/* fixes the dropdown popup of the export button */
#trv-main-menu-export-command {
position: relative;
}
/* loading message background */
.trv-pages-area > .trv-error-pane > .trv-centered {
background-color: white;
border: 1px solid lightgrey;
}
</style>
Please notify me if you release these fixes in a future version of the npm packages @progress/kendo-theme-material|default|...
Thanks for all your effort!
Hello Miro,
Thank you for your feedback and the working solution on your end.
By following the public item you will be notified when it is in development and when it is included in our release.
Regards,
Sia
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.