TelerikReport v18 - Trying to add a default value to ComboBox options

[Bob]

Hello again Dimitar,

If I may follow up with some follow-up questions re: our Angular 16 implementation of Report Viewer v18:

1) I need to add a default  'ALL' option to the combo_box dropdown values.

Would I need to do that in the backend report designer, or is it easy enough on the front end?

In the old v14 javaScript code, we had option 'ALL' directly coded into TelerikViewerv14.js, but I'd like to avoid that.

In the latest telerik-angular-report-viewer "^21.24.305" (not the native angular one), our HTML looks as follows:

<tr-viewer    
    [containerStyle]="viewerContainerStyle"
    [serviceUrl]="serviceUrl"
    [reportSource]="reportSource"
    [viewMode]="'INTERACTIVE'"
    [scaleMode]="'SPECIFIC'"
    [scale]="1.0"
    [templateUrl]="telerikTemplateUrl"
    [parameters]="{
        editors: {
            multiSelect: 'COMBO_BOX',
            singleSelect: 'COMBO_BOX'
        }
    }"
>
</tr-viewer>

import { Component } from "@angular/core";
import { AppConfigService } from "src/app/core/services/app-config.service";
import * as GG from "../core/models/globals";


@Component({
    selector: "app-statistics",
    templateUrl: "./statistics.component.html",
    styleUrls: ["./statistics.component.scss"],
})
export class StatisticsComponent {
    currentPatient: any;
    serviceUrl: string;
    reportSource: any;


    telerikTemplateUrl: string;
    viewerContainerStyle = {
        position: 'relative',
        width: '100%',
        height: '100%',
        ['font-family']: 'ms sans serif'
    };
    
    constructor(private readonly config: AppConfigService) {
        this.serviceUrl = this.config.host + GG.SV_REPORTS;
        this.telerikTemplateUrl = "assets/templates/telerikReportViewerTemplate-18.0.24.305.html";

        this.reportSource = {
            report: "SynReports.ReportCatalog, SynReports",
            parameters: {
                UserID: ...,
                SessionID: ...,
                RootUrl: "",                
            },
        };
    }
}

and we import from our stats.module.ts -

import { TelerikReportingModule } from '@progress/telerik-angular-report-viewer';

2) In the dropdowns, the list is bleeding into the datepicker below it. Would I need a specific version of kendo-theme-material package, for example, with telerik-report-viewer v21.24.305 ?

   In the meantime, I'm looking at overriding some classes coming from the backend css, which is linked in your template, telerikReportViewerTemplate-18.0.24.305.html - but no success in figureout out this div issue.

<link href="{service}resources/font/fonticons-18.0.24.305.css/" rel="stylesheet" />

Thanks,

Bob

[Dimitar]

Hello Bob,

Thank you for the provided information!

First Question

Regarding the first question, about an option for selecting all values, please note that something similar is available out of the box. 

If the Report Parameter is MultiValue and visible, when the report is loaded in the report viewer, above the widget, there will automatically be created an "select all" button that would select all available values in the widget upon click.

For example, you may visit the Product Line Sales Report Demo | Telerik Reporting and see the buttons below the "Subcategory" title for selecting all values or clearing the selection.

The difference between this solution and what you have described is that the "All" selection is not part of the dropdown but is instead moved to a separate button outside the dropdown. This is necessary because the value "All" is not a valid value, it is not a part of the available values for that report parameter. The "select all" button simply selects all of the available options.

To implement something like this, where the "All" option is part of the dropdown, it would be necessary for such option to exist as part of the available values returned by the data source component assigned to the report parameter, or there has to be client-side logic that insert such value in the dropdown despite it nor existing on the server. For the latter scenario, you could try to implement it with a custom parameter editor - Creating and Using Custom Parameter Editors in HTML5 ReportViewer - Telerik Reporting. However, we have had such cases where we have tried to implement this and it can get complicated to maintain. for that reason, I do not recommend using this approach and using the default functionality with the button instead.

Second Question

If I understand correctly, you are using the @progress/kendo-theme-material package to style the report viewer. The Angular Wrapper Report Viewer is built on top of Kendo UI 2022.3.913 and the recommended version of the themes for that is @progress/kendo-theme-material@5.8.0.

For more details on the versions of kendo and compatibility with the themes, you may visit the Compatibility - Sass Themes - Kendo UI for jQuery (telerik.com) article.

With that being said, I noticed that you have a license that gives you access to the Kendo UI for Angular suite. Considering this, I would recommend giving a try to our newer Native Angular Report Viewer component which can be used with the latest version of the Kendo SASS themes.

You may follow the Integrating the Native Angular Report Viewer with the VS Code Extension - Telerik Reporting article for details on how to add the viewer.

Wrapping Up

I hope that the provided information is helpful. Please let me know if you have any additional questions.

Regards,
Dimitar
Progress Telerik