Identifying and Clearing Applied FlexGrid Filters in Vue

Background

In a Vue application, you can identify which columns currently have filters applied by reading the filterDefinition property of FlexGridFilter. Since filterDefinition is stored as a JSON string, parse it with JSON.parse.

Sorting information is available from the grid’s collectionView.sortDescriptions collection.

Steps to Complete

1. Install and import the Wijmo Vue grid packages.
2. Create the grid data and column definitions.
3. Store references to the FlexGrid and FlexGridFilter.
4. Read applied filters from filterDefinition.
5. Read applied sorting from sortDescriptions.
6. Clear a specific column’s filter and sort.
7. Clear all filters and sorting.
8. Add the Vue Template

Getting Started

Install and import the Wijmo Vue grid packages

npm install @mescius/wijmo.vue2.all

Import the required Vue components and Wijmo styles in App.vue:

<script setup>
import { ref } from 'vue';
import '@mescius/wijmo.styles/wijmo.css';

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

• The WjFlexGrid component displays the data grid, while WjFlexGridFilter adds Excel-like filtering to the grid.

Create the grid data and column definitions

<script setup>
const columns = [
  { binding: 'id', header: 'Id' },
  { binding: 'country', header: 'Country' },
  { binding: 'date', header: 'Date' },
  { binding: 'amount', header: 'Amount' },
  { binding: 'active', header: 'Active' }
];

const data = ref(getData(20));

function getData(count) {
  const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');

  return Array.from({ length: count }, (_, index) => ({
    id: index,
    country: countries[index % countries.length],
    date: new Date(2026, index % 12, (index % 28) + 1),
    amount: Math.round(Math.random() * 10000),
    active: index % 4 === 0
  }));
}
</script>

• The binding values are important because filters and sorts are both tracked by column binding.

Store references to the FlexGrid and FlexGridFilter

<script setup>
const flex = ref(null);
const gridFilter = ref(null);

function onGridInitialized(sender) {
  flex.value = sender;
  refreshGridState();
}

function onFilterInitialized(sender) {
  gridFilter.value = sender;
  refreshGridState();
}
</script>

• The grid reference gives access to sorting, and the filter reference gives access to filterDefinition.

Read applied filters from filterDefinition

<script setup>
const filteredColumns = ref([]);

function getFilterDefinition() {
  if (!gridFilter.value?.filterDefinition) {
    return { filters: [] };
  }

  return JSON.parse(gridFilter.value.filterDefinition);
}

function getColumnHeader(binding) {
  return flex.value?.getColumn(binding)?.header ?? binding;
}
</script>

• Each item in filterDefinition.filters represents one filtered column.

Read applied sorting from sortDescriptions

<script setup>
const sortedColumns = ref([]);

function refreshGridState() {
  if (!flex.value || !gridFilter.value) {
    return;
  }

  const filterDefinition = getFilterDefinition();

  filteredColumns.value = (filterDefinition.filters ?? []).map(filter =>
    getColumnHeader(filter.binding)
  );

  const sorts = flex.value.collectionView.sortDescriptions;
  sortedColumns.value = [];

  for (let i = 0; i < sorts.length; i++) {
    const sort = sorts[i];
    const direction = sort.ascending ? 'ascending' : 'descending';

    sortedColumns.value.push(
      `${getColumnHeader(sort.property)} (${direction})`
    );
  }
}
</script>

• This method updates both the filtered column count and the sorted column list.

Clear a specific column’s filter and sort

<script setup>
function clearColumnFilterAndSort(binding) {
  if (!flex.value || !gridFilter.value) {
    return;
  }

  const filterDefinition = getFilterDefinition();

  filterDefinition.filters = (filterDefinition.filters ?? []).filter(
    filter => filter.binding !== binding
  );

  gridFilter.value.filterDefinition = JSON.stringify(filterDefinition);

  const sorts = flex.value.collectionView.sortDescriptions;

  for (let i = sorts.length - 1; i >= 0; i--) {
    if (sorts[i].property === binding) {
      sorts.splice(i, 1);
    }
  }

  refreshGridState();
}
</script>

• This clears only the selected column’s filter and sort.

Clear all filters and sorting

<script setup>
function clearAllFiltersAndSorts() {
  if (!flex.value || !gridFilter.value) {
    return;
  }

  flex.value.collectionView.sortDescriptions.clear();
  gridFilter.value.clear();

  refreshGridState();
}
</script>

• This resets the grid to an unfiltered and unsorted state.

Add the Vue Template

<template>
  <p>
    Filters ({{ filteredColumns.length }}):
    {{ filteredColumns.join(', ') || 'None' }}
  </p>

  <p>
    Sorts ({{ sortedColumns.length }}):
    {{ sortedColumns.join(', ') || 'None' }}
  </p>

  <button
    v-for="column in columns"
    :key="column.binding"
    type="button"
    @click="clearColumnFilterAndSort(column.binding)">
    Clear {{ column.header }}
  </button>

  <button type="button" @click="clearAllFiltersAndSorts">
    Clear All Filters and Sorting
  </button>

  <wj-flex-grid
    :items-source="data"
    allow-sorting="MultiColumn"
    :initialized="onGridInitialized"
    :sorted-column="refreshGridState">

    <wj-flex-grid-column
      v-for="column in columns"
      :key="column.binding"
      :binding="column.binding"
      :header="column.header" />

    <wj-flex-grid-filter
      :initialized="onFilterInitialized"
      :filter-applied="refreshGridState" />
  </wj-flex-grid>
</template>

• The filterApplied event refreshes the filter information after filtering changes. The sortedColumn event refreshes the sort information after the user sorts a column.

With this setup, the Vue application can show the number of active filters, display the filtered and sorted column names, clear one column’s filter and sort, or clear all filters and sorting from the grid.

Happy coding!