angularreportdevexpressdevextreme

Devexpress Report styling issue

I'm trying to use dx-report-viewer in my angular application this is my .ts code :

import { Component, ViewChild} from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';
import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'


@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls:[
  "../../../node_modules/devextreme/dist/css/dx.common.css",
  "../../../node_modules/devextreme/dist/css/dx.material.orange.light.css",
  "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
  "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.material.orange.light.css",
  "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"


]
})
export class ReportComponent {
  @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;

  title = 'DXReportViewerSample';
  reportUrl = 'Report4';
  hostUrl = 'https://localhost:44369/';
  invokeAction = '/DXXRDV';

  constructor(
  ) {
  }

  ngOnInit(): void {
  }
  
  OnCustomizeExportOptions(event) {
    event.args.HideFormat(ExportFormatID.XLS);
}
}

and here is .html code

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (CustomizeExportOptions)="OnCustomizeExportOptions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

the problem is report is shown with big icons and no content as the pic below enter image description here

and when i try to press print button it works and view the report correctly i n the print window installed devexpress version :22.2.4 devextreme :22.2.4

Solution

  • Solved by adding

      encapsulation: ViewEncapsulation.None,

    like the code below

    @Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  encapsulation: ViewEncapsulation.None,  

  styleUrls: ['./report.component.scss',
  '../../../node_modules/jquery-ui/themes/base/all.css',
  '../../../node_modules/devextreme/dist/css/dx.common.css',
  '../../../node_modules/devextreme/dist/css/dx.light.css',
  '../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css',
  '../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css',
  '../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css',
  "../../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css"

]
})