This is a migrated thread and some comments may be shown as answers.

Telerik Report toolbar missing with Kendo SASS themes

14 Answers 250 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
IT Dept
Top achievements
Rank 1
IT Dept asked on 14 Sep 2018, 02:57 PM

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

Sort by
0
Silviya
Telerik team
answered on 19 Sep 2018, 07:33 AM
Hello Eric,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
n/a
Top achievements
Rank 1
answered on 10 Dec 2020, 09:01 AM

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

0
Sia
Telerik team
answered on 18 Dec 2020, 08:25 AM

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/.

0
Sia
Telerik team
answered on 23 Dec 2020, 12:49 PM

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/.

0
n/a
Top achievements
Rank 1
answered on 29 Dec 2020, 07:55 AM
Thank you, Sia, for pushing this issue forward.

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!
0
Sia
Telerik team
answered on 30 Dec 2020, 08:38 AM

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/.

0
n/a
Top achievements
Rank 1
answered on 30 Dec 2020, 12:44 PM

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

0
Sia
Telerik team
answered on 05 Jan 2021, 09:44 AM

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/.

0
Sia
Telerik team
answered on 05 Jan 2021, 09:58 AM

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/.

0
n/a
Top achievements
Rank 1
answered on 06 Jan 2021, 08:30 AM

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


0
Sia
Telerik team
answered on 11 Jan 2021, 08:30 AM

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/.

0
Sia
Telerik team
answered on 18 Jan 2021, 10:22 AM

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/.

0
n/a
Top achievements
Rank 1
answered on 22 Jan 2021, 09:08 AM
Your patch works great for the demo project which I uploaded.
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!
0
Sia
Telerik team
answered on 27 Jan 2021, 06:49 AM

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/.

Tags
General Discussions
Asked by
IT Dept
Top achievements
Rank 1
Answers by
Silviya
Telerik team
n/a
Top achievements
Rank 1
Sia
Telerik team
Share this question
or