How to Move the FlexGrid Filter Apply Button in Angular

Background

Wijmo’s FlexGrid filter editor provides Apply, Cancel, and Clear buttons for managing column filters. By default, the Apply button appears on the left.

You can customize this layout with CSS to move the Apply button to the right, position the Cancel button on the left, and adjust the spacing around the Clear button.

Steps to Complete

1. Import the FlexGrid and filtering modules.
2. Create a FlexGrid with column filtering.
3. Load the Wijmo stylesheet.
4. Move the Apply button to the right.
5. Position the Cancel button on the left.
6. Adjust the Clear button’s spacing.

Getting Started

Import the FlexGrid and filtering modules

import { Component } from '@angular/core';
import { WjGridModule } from '@mescius/wijmo.angular2.grid';
import { WjGridFilterModule } from '@mescius/wijmo.angular2.grid.filter';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WjGridModule, WjGridFilterModule],
  templateUrl: './app.component.html'
})
export class AppComponent {
  data = [
    { id: 1, country: 'Germany', expenses: 689.45 },
    { id: 2, country: 'UK', expenses: 2103.84 },
    { id: 3, country: 'Japan', expenses: 4622.68 },
    { id: 4, country: 'Italy', expenses: 3156.03 },
    { id: 5, country: 'Greece', expenses: 3557.94 }
  ];
}

• WjGridModule provides the FlexGrid and column components. WjGridFilterModule provides the column filtering component. The data array supplies the rows displayed in the grid.

Create a FlexGrid with column filtering

<wj-flex-grid
  [itemsSource]="data"
  [autoGenerateColumns]="false"
  [isReadOnly]="true">

  <wj-flex-grid-column
    binding="id"
    header="ID"
    [width]="80">
  </wj-flex-grid-column>

  <wj-flex-grid-column
    binding="country"
    header="Country"
    [width]="160">
  </wj-flex-grid-column>

  <wj-flex-grid-column
    binding="expenses"
    header="Expenses"
    format="n2"
    [width]="140">
  </wj-flex-grid-column>

  <wj-flex-grid-filter></wj-flex-grid-filter>
</wj-flex-grid>

• The grid binds to the component’s data array and displays explicitly defined columns. Adding wj-flex-grid-filter inside the grid enables column filtering. Users can click a column’s filter icon to open its filter editor.

Load the Wijmo stylesheet

@import '@mescius/wijmo.styles/wijmo.css';

• This stylesheet provides the default appearance of Wijmo controls. Place the custom CSS rules below this import so they override the default button layout.

Move the Apply button to the right

.wj-columnfiltereditor [wj-part="btn-apply"] {
  float: right;
}

• The selector targets the Apply button inside the column filter editor. Setting float: right moves it to the right side of the editor’s button area.

Position the Cancel button on the left

.wj-columnfiltereditor [wj-part="btn-cancel"] {
  float: left;
}

• This rule targets the Cancel button and positions it on the left side of the button area.

Adjust the Clear button’s spacing

.wj-columnfiltereditor [wj-part="btn-clear"] {
  margin-right: 1.4em;
}

• This rule adds a right margin to the Clear button to improve spacing in the updated layout.
• Keep these rules in the global styles.css file. Angular’s default component style encapsulation can prevent component-level styles from reaching the filter popup.

With this setup, the FlexGrid filter editor displays the Apply button on the right, the Cancel button on the left, and adjusted spacing around the Clear button. These CSS changes customize the layout while preserving the buttons’ existing functionality.

Happy coding!