How to resize the field list dialog in the Angular Pivot Table?

Introduction:

This knowledge base document provides a solution to enable resizing the Field List dialog box in the Angular Pivot Table. You can resize the entire Field List popup using the enableResize property of the dialog instance. This guide will demonstrate how to resize the Field List dialog with code examples and relevant explanations.

Enable the resize property:

The enableResize property of the dialog instance allows users to resize the entire Field List dialog. This property needs to be enabled within the actionBegin event of the Angular Pivot Table.

[app.component.html]

<ejs-pivotview #pivotview id='PivotView' showFieldList='true' (actionBegin)="actionBegin($event)">
</ejs-pivotview>

[app.component.ts]

import { Component, ViewChild } from '@angular/core';
import { PivotView, PivotViewModule, FieldListService } from '@syncfusion/ej2-angular-pivotview';

@Component({
    selector: 'app-root',
    styleUrls: ['app.component.css'],
    templateUrl: 'app.component.html',
	providers: [FieldListService],
    standalone: true,
    imports: [PivotViewModule]
})

export class AppComponent {

	@ViewChild('pivotview', { static: false })
	public pivotGridObj?: PivotView;

	actionBegin(args: any) {
        if (args.actionName === 'Open field list') {
            const fieldlistModule = this.pivotObj.pivotFieldListModule;
            if (fieldlistModule && fieldlistModule.dialogRenderer && fieldlistModule.dialogRenderer.fieldListDialog) {
                fieldlistModule.dialogRenderer.fieldListDialog.enableResize = true;
            }
        }
    }
}

Explanation of the code snippet:

In the above code example, we invoked the actionBegin event to enable the resizing option in the Field List dialog. Following this, we check if the actionName in the actionBegin event is “Open field list”. This condition ensures that we only proceed with enabling resizing when the Field List dialog is being opened. We obtain the dialog component instance using the Field List module, accessed specifically through this.pivotObj.pivotFieldListModule. Within this module, dialogRenderer.fieldListDialog refers to the specific instance of the dialog component we are targeting. We set the enableResize property to true for this instance.

Prevent CSS for the Field List container:

By default, the maximum height for the Field List dialog is set to “700px”. To allow resizing beyond this limit, you need to unset this restriction in your CSS file.

[app.component.css]

.e-pivotfieldlist-container {
    max-width: unset;
}

Screenshots:

Conclusion:

By following the steps outlined in this article and using the provided code examples, you can implement a resize/splitter option in the Field List dialog box of the pivot table.

You can refer to our Angular Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!