Set the Data Tab as the Default to the Data Source Tab in the Bold Reports Angular Designer

In Bold Reports Angular Designer, clicking the Data icon opens the Dataset panel by default. If your workflow focuses more on managing data sources, you can change this behavior to open the Datasource panel instead. Use the dataTabIndex property to control which panel opens and streamline your design workflow.

Steps to Configure the Default Data Panel

Step 1: Update the HTML Template

In your app.component.html file, add the dataTabIndex binding to the <bold-reportdesigner> component:

<bold-reportdesigner 
  id="designer"
  [serviceUrl]="serviceUrl"
  [dataTabIndex]="dataTabIndex"
  style="position: absolute; height:700px; width: 100%;">
</bold-reportdesigner>

Step 2: Set the Property in the TypeScript Component

In app.component.ts, initialize dataTabIndex to ej.ReportDesigner.DataTab.Datasource:

import { Component } from '@angular/core';
import { BoldReportDesignerModule } from '@boldreports/angular-reporting-components';

@Component({
  selector: 'app-root',
  imports: [BoldReportDesignerModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'reportdesignerapp';
  public serviceUrl: string;
  public dataTabIndex: any;

  constructor() {
    this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportingAPI';
    this.dataTabIndex = ej.ReportDesigner.DataTab.Datasource;
  }
}

Step 3: Test the Configuration

1. Run your Angular application.

2. Open the Report Designer.

3. Click the Data icon. It should now open the Datasource panel directly (previously, it defaulted to Dataset).

   
   

• Sample Application: Download the sample application for reference.

Conclusion

Configuring the dataTabIndex property in the Bold Reports Angular Designer, you can customize the Data icon behavior to open the Datasource panel by default, improving navigation efficiency for data-focused workflows.