How to Move the FlexGrid Filter Apply Button in JavaScript

Background

The 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. Add a container for the FlexGrid.
2. Import the Wijmo controls and styles.
3. Create the FlexGrid and enable filtering.
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

Add a container for the FlexGrid

<div id="theGrid"></div>

• This element hosts the FlexGrid control. The JavaScript code will use its ID to locate the container and initialize the grid.

Import the Wijmo controls and styles

import { FlexGrid } from '@mescius/wijmo.grid';
import { FlexGridFilter } from '@mescius/wijmo.grid.filter';

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

• These imports provide the FlexGrid control and its column filtering functionality. Load the custom app.css file after the Wijmo stylesheet so your button styles override the default layout.

Create the FlexGrid and enable filtering

const 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 }
];

const grid = new FlexGrid('#theGrid', {
  itemsSource: data,
  autoGenerateColumns: false,
  isReadOnly: true,
  columns: [
    { binding: 'id', header: 'ID', width: 80 },
    { binding: 'country', header: 'Country', width: 160 },
    {
      binding: 'expenses',
      header: 'Expenses',
      format: 'n2',
      width: 140
    }
  ]
});

const filter = new FlexGridFilter(grid);

• The grid displays the sample data using explicitly defined columns. Creating a FlexGridFilter for the grid enables column filtering. Users can click a column’s filter icon to open its filter editor.

Move the Apply button to the right

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

• This 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 all three button rules together in app.css.

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!