Telerik Reporting Style For Angular Cli

[Hanaa]

Prerequisites:

• Using Telerik Reporting for angular as stated in its docs Telerik-Reporting-For-Angular-CLI.
• Using Sass-Based-Styles as here Sass-Based-Styles.
• Using kendo Multi-Select as here Kendo MultiSelect UI For Angular.

Test Case:

• Display Report  without MultiSelect.
• Display Report with MultiSelect in the same page.

Expected: MultiSelect should display fine besides Telerik Report.

Actual: MultiSelect Displayed with corrupted style.

You can check and review my screen shoots for packages used and multiselect with report and without display.

[Silviya]

Hi Hanaa,

Based on the provided information and the screenshots, we assume that you have custom report parameters UI, which is Kendo MultiSelect widget. However, on the reporthtml.png, I noticed that there are no available parameter values in the dropdown. This help article explains step-by-step how to use custom parameters UI to update the report parameters instead of using the report viewer's default implementation of the parameters area: How To: Pass Values to Report Parameters.  

Please note that as of R1 2019 we provide out-of-the-box editors that allow the user to defined parameters options for the report parameters. In Angular project to set up a Kendo MultiSelect widget for multivalued parameters, you should add the following code snippet in the viewer's initialization file:

<tr-viewer #viewer1
    [reportSource]="{
        report: 'Testing/Report1',
        parameters: {}
    }"
...
    [parameters]="{
        editors: {
           // singleSelect: 'COMBO_BOX', for single-value parameters
            multiSelect: 'COMBO_BOX' //for multi-value parameters
        }
    }">

If the issue still persists, we would like to review the problematic project. Please open a new support ticket where you could attach the project for further investigation.

Best Regards,
Silviya
Progress Telerik