How to display a fixed stand-alone Pivot Field List UI layout like a popup field list style in Angular?

Introduction:

When working with a pivot field list, you may want to modify the layout of the fixed stand-alone field list in Angular Pivot Table to match the style of a pop-up field list. This customization can be particularly useful when you want a more dynamic and flexible UI. You can achieve this by customizing the CSS and manipulating the DOM elements during component creation within the created event. In this article, we will guide you through the process with a step-by-step example.

Step-by-step implementation:

Step 1: Setup the fixed stand-alone pivot field list component

To create a fixed stand-alone field list component, you need to include the ejs-pivotfieldlist tag in your HTML page (i.e., app.component.html) and specify the renderMode as Fixed. This will render the static field list in the web page layout. In addition, bind the created event to trigger the necessary DOM manipulations after the component is created.

[app.component.html]

<div class="pivotfieldlist-control">
   <ejs-pivotfieldlist #pivotfieldlist renderMode="Fixed" (created)="created()">
   </ejs-pivotfieldlist>
</div>

Step 2: Implement the created event:

Next, you need to implement the created event in your TypeScript file (i.e., app.component.ts). This function will modify the DOM structure programmatically and apply CSS classes to emulate a popup field list.

[app.component.ts]

created(): void {
  // Remove the "e-static" classname to change the static field list to a pop-up fixed field list.
  let rootElement: HTMLElement = this.fieldlistObj.element.querySelector('.e-pivotfieldlist-container');
  rootElement.classList.remove('e-static');
  
  // Add e-dialog and "e-popup" classes to apply the popup field list styles.
  rootElement.classList.add('e-dialog');
  rootElement.classList.add('e-popup');
  
  // Customize the field list header to resemble the pop-up field list header.
  let header: HTMLElement = rootElement.querySelector('.e-field-list-title');
  header.classList.remove('e-field-list-title');
  header.classList.add('e-title-header');
  const headerDiv: HTMLElement = createElement('div', { className: 'e-dlg-header-content' });
  rootElement.prepend(headerDiv);
  rootElement.querySelector('.e-dlg-header-content').appendChild(rootElement.querySelector('.e-title-header'));
  
  // Customize the title style of the header.
  let headerChildDiv: HTMLElement = createElement('div', { className: 'e-dlg-header' });
  headerChildDiv.style.width = '100%';
  rootElement.querySelector('.e-dlg-header-content').prepend(headerChildDiv);
  rootElement.querySelector('.e-dlg-header').appendChild(rootElement.querySelector('.e-title-header'));
  
  // Change the DOM structure of the field list footer content to resemble the pop-up field list footer.
  let contentDiv: HTMLElement = createElement('div', { className: 'e-dlg-content e-fieldlist-content' });
  rootElement.append(contentDiv);
  rootElement.querySelector('.e-dlg-content').appendChild(rootElement.querySelector('.e-field-list-container'));
  let footerDiv: HTMLElement = createElement('div', { className: 'e-footer-content e-fieldlist-footer' });
  rootElement.append(footerDiv);
  rootElement.querySelector('.e-footer-content').appendChild(rootElement.querySelector('.e-layout-footer'));
}

The following steps explain the above code snippet:

1. Removing the static field list class: First, we remove the e-static class to transform the static field list into a popup field list.
2. Adding popup field list classes: Then, we add the e-dialog and e-popup classes to apply the styles of the popup field list.
3. Customizing the header: Next, we change the DOM structure and classes associated with the field list header to resemble the popup-styled header.
4. Transforming content and footer: Similarly, we transform the DOM structure and classes for the content and footer sections to fit the popup style.

Step 3: Define custom styles to your style sheet

Finally, define the following CSS styles in your component’s CSS file (i.e., app.component.css). These styles will remove default shadows, set borders, manage overflows, and hide unnecessary elements to create a seamless pop-up experience.

[app.component.css]

.e-center-title {
display: none;
}

.e-pivotfieldlist-container.e-dialog {
box-shadow: unset;
border: 1px solid;
border-color: rgba(0,0,0,.14);
}

.e-pivotfieldlist-container .e-fieldlist-footer {
display: none;
}

.e-pivotfieldlist-container .e-fieldlist-content {
overflow: revert;
}

The following screenshot portrays the results of the code snippet mentioned above:

Screenshot:

For a practical demonstration, refer to the sample of stackblitz.

Conclusion:

I hope you enjoyed learning how to display a fixed stand-alone pivot field list UI layout like a popup field list style in Angular Pivot Table

You can refer to our Angular Pivot Table feature tour 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!