How to Enable Dropdown Search for Report Parameters in Angular Applications

In Bold Reports, parameter values play a key role in filtering data, enabling dynamic and customizable reporting. However, managing extensive lists of parameter values can be difficult, but the enableDropDownSearch feature simplifies this by allowing users to efficiently search and choose values from these lists.

This guide outlines the steps to enable the filter search function for parameter values in your Bold Reports Angular application, enhancing both usability and performance.

Steps to Enable Dropdown Search

1. Add the enableDropDownSearch property in the app.component.html file to enable the dropdown search feature.

<bold-reportviewer 
   id="reportViewer_Control" 
   [reportServiceUrl] = "serviceUrl"   
   [enableDropDownSearch]="enableDropDownSearch"
   [reportPath] = "reportPath" 
   style="width: 100%;height: 950px">
</bold-reportviewer> 

2. Configure the app.component.ts file to define the enableDropDownSearch property and other required settings.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { BoldReportViewerModule } from '@boldreports/angular-reporting-components';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.common.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/common/bold.reports.widgets.min';
import '@boldreports/javascript-reporting-controls/Scripts/v2.0/bold.report-viewer.min';

@Component({
 selector: 'app-root',
 imports: [BoldReportViewerModule],
 templateUrl: './app.html',
 styleUrl: './app.css'
})
export class AppComponent {
 title = 'reportviewerapp19';
 public serviceUrl: string;
 public reportPath: string;
 public enableDropDownSearch: any;
 constructor() {
   this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
   this.reportPath = '~/Resources/docs/sales-order-detail.rdl';
   this.enableDropDownSearch = true;
 }
} 

3. After applying your changes, save and run the application to view the applied changes.
   Before Configuration: The dropdown displays all options without a search feature.

   
   
   After Configuration: The dropdown includes a search bar, allowing users to filter options by typing.
   

See Also

• Enabling Filter Search for Parameter Values in Bold Reports