Checking for Active FlexGrid Column Filters in Vue

Background:

There are many use cases for when someone would like to know if a column filter is active or how many total active filters there are on their dataGrid. Wijmo's FlexGrid has built in properties and methods to easily achieve this.

Steps to Complete:

1. Render the grid and attach the filter.
   
2. Capture control instances with initialized.
3. Count active column filters.

Getting Started:

Render the grid and attach the filter:

Bind your data to <wj-flex-grid> and drop <wj-flex-grid-filter> inside to get Excel-like filter UI.

<wj-flex-grid
        :itemsSource="data"
        :isReadOnly="true"
        :alternatingRowStep="0"
        :initialized="onGridInitialized"
        style="height: 360px"
      >
        <wj-flex-grid-column :binding="'id'" :header="'ID'" :width="60" />
        <wj-flex-grid-column :binding="'country'" :header="'Country'" />
        <wj-flex-grid-column :binding="'downloads'" :header="'Downloads'" />
        <wj-flex-grid-column :binding="'sales'" :header="'Sales'" />
        <wj-flex-grid-column :binding="'expenses'" :header="'Expenses'" />

        <!-- Attach Excel-like filter UI -->
        <wj-flex-grid-filter :initialized="onFilterInitialized" />
      </wj-flex-grid>

Capture control instances with initialized:

Wijmo Vue components expose an initialized prop that passes you the underlying control. Store references for later.

onFilterInitialized(ctl) {
      this.filterCtl = ctl;
    },

Count active column filters:

Loop grid.columns, call filter.getColumnFilter(col), and increment when isActive is true.

countActiveFilters() {
      // we need live control instances to inspect filter state
      if (!this.gridCtl || !this.filterCtl) return 0;

      let count = 0;
      this.gridCtl.columns.forEach((col /** @type {wjcGrid.Column} */) => {
        const cf = this.filterCtl.getColumnFilter(col);
        if (cf && cf.isActive) count++;
      });
      return count;
    },

And that's it. Now you know how to check if a column filter is active and how to determine how many filters are currently active.

Happy coding!

Combined file for reference:

<!-- src/App.vue -->
<template>
  <main
    style="
      max-width: 980px;
      margin: 40px auto;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
        sans-serif;
    "
  >
    <section
      style="border: 1px solid #e6e6e6; border-radius: 12px; padding: 16px 20px"
    >
      <h2 style="margin-top: 0; font-size: 18px">
        Checking for Active FlexGrid Column Filters
      </h2>

      <div
        style="
          display: flex;
          gap: 10px;
          align-items: center;
          margin-bottom: 10px;
        "
      >
        <button
          @click="showActiveFilterCount"
          style="
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid #ccc;
            background: #fff;
            cursor: pointer;
          "
        >
          Show Active Filter Count
        </button>
        <button
          @click="clearAllFilters"
          style="
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid #ccc;
            background: #fff;
            cursor: pointer;
          "
        >
          Clear All Filters
        </button>
        <span
          v-if="gridCtl && filterCtl"
          style="margin-left: 8px; font-size: 14px; opacity: 0.8"
        >
          Current count: {{ countActiveFilters() }}
        </span>
      </div>

      <wj-flex-grid
        :itemsSource="data"
        :isReadOnly="true"
        :alternatingRowStep="0"
        :initialized="onGridInitialized"
        style="height: 360px"
      >
        <wj-flex-grid-column :binding="'id'" :header="'ID'" :width="60" />
        <wj-flex-grid-column :binding="'country'" :header="'Country'" />
        <wj-flex-grid-column :binding="'downloads'" :header="'Downloads'" />
        <wj-flex-grid-column :binding="'sales'" :header="'Sales'" />
        <wj-flex-grid-column :binding="'expenses'" :header="'Expenses'" />

        <!-- Attach Excel-like filter UI -->
        <wj-flex-grid-filter :initialized="onFilterInitialized" />
      </wj-flex-grid>
    </section>
  </main>
</template>

<script>
import * as wjcGrid from "@mescius/wijmo.grid";

export default {
  name: "App",
  data() {
    return {
      gridCtl: null,
      filterCtl: null,
      data: this.buildData(),
    };
  },
  methods: {
    onGridInitialized(ctl) {
      this.gridCtl = ctl;
    },
    onFilterInitialized(ctl) {
      this.filterCtl = ctl;
    },
    buildData() {
      const countries = ["US", "Germany", "UK", "Japan", "Italy", "Greece"];
      return Array.from({ length: 50 }, (_, i) => ({
        id: i + 1,
        country: countries[i % countries.length],
        downloads: Math.round(Math.random() * 20000),
        sales: +(Math.random() * 10000).toFixed(2),
        expenses: +(Math.random() * 5000).toFixed(2),
      }));
    },
    countActiveFilters() {
      // we need live control instances to inspect filter state
      if (!this.gridCtl || !this.filterCtl) return 0;

      let count = 0;
      this.gridCtl.columns.forEach((col /** @type {wjcGrid.Column} */) => {
        const cf = this.filterCtl.getColumnFilter(col);
        if (cf && cf.isActive) count++;
      });
      return count;
    },
    showActiveFilterCount() {
      // basic UX feedback without extra dependencies
      alert(`Active column filters: ${this.countActiveFilters()}`);
    },
    clearAllFilters() {
      // single-call reset keeps exploration snappy
      this.filterCtl?.clear();
    },
  },
};
</script>

<style>
/* optional: small tweaks */
.wj-flexgrid {
  border-radius: 10px;
  overflow: hidden;
}
</style>