How to Move the FlexGrid Filter Apply Button in Vue

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 and register the FlexGrid components.
2. Create a FlexGrid with column filtering.
3. Move the Apply button to the right.
4. Position the Cancel button on the left.
5. Adjust the Clear button’s spacing.

Getting Started

Import and register the FlexGrid components

<script>
import { WjFlexGrid, WjFlexGridColumn } from '@mescius/wijmo.vue2.grid';
import { WjFlexGridFilter } from '@mescius/wijmo.vue2.grid.filter';

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

export default {
  components: {
    WjFlexGrid,
    WjFlexGridColumn,
    WjFlexGridFilter
  },

  data() {
    return {
      items: [
        { 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 }
      ]
    };
  }
};
</script>

• The imports provide the grid, column definitions, and filtering component. Registering them makes them available in the template. The items array supplies the grid’s sample data, and the stylesheet provides the default Wijmo appearance.

Create a FlexGrid with column filtering

<template>
  <wj-flex-grid
    :items-source="items"
    :auto-generate-columns="false"
    :is-read-only="true"
  >
    <wj-flex-grid-column
      binding="id"
      header="ID"
      :width="80"
    />

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

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

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

• The grid binds to the items 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.

Move the Apply button to the right

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

• 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.
• Use an unscoped style block so the rule can reach the filter popup.

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.

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!