Checking for Active FlexGrid Column Filters in JavaScript

Checking for Active FlexGrid Column Filters

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. Add markup for the grid and controls

  2. Prepare data

  3. Initialize FlexGrid and attach FlexGridFilter

  4. Count active column filters

  5. Wire up buttons

Getting Started:

Add markup for the grid and controls

Provide a host element for the grid and a couple of buttons for UX.

<div style="display:flex; gap:8px; margin-bottom:10px;">
  <button id="btnCount">Show Active Filter Count</button>
  <button id="btnClear">Clear All Filters</button>
  <span id="liveCount" style="opacity:.8;"></span>
</div>
<div id="theGrid" style="height:360px;"></div>

 

Prepare data

Create data from an array of objects.

function 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)
  }));
}

 

Initialize FlexGrid and attach FlexGridFilter

Create the grid, define columns, then attach the filter so users can filter per column.

const grid = new wijmo.grid.FlexGrid('#theGrid', {
  itemsSource: buildData(),
  isReadOnly: true,
  alternatingRowStep: 0,
  columns: [
    { binding: 'id', header: 'ID', width: 60 },
    { binding: 'country', header: 'Country' },
    { binding: 'downloads', header: 'Downloads' },
    { binding: 'sales', header: 'Sales' },
    { binding: 'expenses', header: 'Expenses' }
  ]
});

const filter = new wijmo.grid.filter.FlexGridFilter(grid);

 

Count active column filters

Walk every column, inspect its ColumnFilter.isActive, and tally.

function countActiveFilters(grid, filter) {
  // Guards prevent UI hiccups if grid not ready
  if (!grid || !filter) return 0;
  let count = 0;
  grid.columns.forEach(col => {
    const cf = filter.getColumnFilter(col);
    if (cf && cf.isActive) count++;
  });
  return count;
}

 

Wire up buttons

Button triggers an alert; the live badge shows the current count without clicking.

const btnCount = document.getElementById('btnCount');
const btnClear = document.getElementById('btnClear');
const liveCount = document.getElementById('liveCount');

function refreshLiveCount() {
  liveCount.textContent = `Current count: ${countActiveFilters(grid, filter)}`;
}

btnCount.addEventListener('click', () => {
  alert(`Active column filters: ${countActiveFilters(grid, filter)}`);
});
btnClear.addEventListener('click', () => {
  filter.clear();             // single-call reset for all columns
  refreshLiveCount();
});

// Update the badge whenever filtering changes
grid.hostElement.addEventListener('mousedown', () => setTimeout(refreshLiveCount, 0));
grid.hostElement.addEventListener('keyup', () => setTimeout(refreshLiveCount, 0));
refreshLiveCount();

 

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:

<!-- /public/index.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>FlexGrid (Vanilla JS) – Count Active Filters</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Wijmo styles -->
  <link rel="stylesheet" href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.css" />

  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 24px; }
    .card { border: 1px solid #e6e6e6; border-radius: 12px; padding: 16px 20px; margin-bottom: 18px; }
    .hero { background:#0b1020; color:#e8ecff; padding:16px 20px; border-radius:12px; margin-bottom:18px; }
    .hero h1 { margin:0 0 6px 0; font-size:22px; }
    .hero p { margin:4px 0 0 0; opacity:.9; }
    .wj-flexgrid { border-radius: 10px; overflow: hidden; }
    button { padding:8px 12px; border-radius:8px; border:1px solid #ccc; background:#fff; cursor:pointer; }
    code { background:#f7f7f7; padding:0 4px; border-radius:4px; }
    pre { background:#f7f7f7; padding:10px; border-radius:8px; overflow:auto; }
  </style>

  <!-- Wijmo (order matters) -->
  <script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.js"></script>
  <script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.js"></script>
  <script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.grid.filter.js"></script>
</head>
<body>

  <!-- Background -->
  <section class="hero">
    <h1>Checking for Active Column Filters in FlexGrid (Vanilla JS)</h1>
    <p>Count how many FlexGrid column filters are currently applied using the FlexGridFilter API.</p>
  </section>

  <!-- Steps to Complete -->
  <section class="card">
    <h2 style="margin-top:0; font-size:18px;">Steps to Complete</h2>
    <ol style="margin-left:18px; line-height:1.6;">
      <li><strong>Load Wijmo scripts and styles.</strong> Bring in core, grid, and filter bundles.</li>
      <li><strong>Add markup for the grid and controls.</strong> Host element for grid and UX buttons.</li>
      <li><strong>Prepare data.</strong> Any array of objects fits the grid.</li>
      <li><strong>Initialize FlexGrid + FlexGridFilter.</strong> Define columns, attach filter.</li>
      <li><strong>Count active filters.</strong> Iterate columns and check <code>isActive</code>.</li>
      <li><strong>(Optional) Clear all.</strong> Call <code>filter.clear()</code>.</li>
    </ol>
  </section>

  <!-- Getting Started (live demo) -->
  <section class="card">
    <h2 style="margin-top:0; font-size:18px;">Getting Started</h2>

    <div style="display:flex; gap:8px; align-items:center; margin-bottom:10px;">
      <button id="btnCount">Show Active Filter Count</button>
      <button id="btnClear">Clear All Filters</button>
      <span id="liveCount" style="margin-left:8px; font-size:14px; opacity:.8;"></span>
    </div>

    <div id="theGrid" style="height:360px;"></div>
  </section>

  <script>
    // --- data
    function 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)
      }));
    }

    // --- grid + filter
    const grid = new wijmo.grid.FlexGrid('#theGrid', {
      itemsSource: buildData(),
      isReadOnly: true,
      alternatingRowStep: 0,
      columns: [
        { binding: 'id', header: 'ID', width: 60 },
        { binding: 'country', header: 'Country' },
        { binding: 'downloads', header: 'Downloads' },
        { binding: 'sales', header: 'Sales' },
        { binding: 'expenses', header: 'Expenses' }
      ]
    });

    const filter = new wijmo.grid.filter.FlexGridFilter(grid);

    // --- count helpers
    function countActiveFilters(g, f) {
      // Guard for robustness if invoked before init
      if (!g || !f) return 0;
      let count = 0;
      g.columns.forEach(col => {
        const cf = f.getColumnFilter(col);
        if (cf && cf.isActive) count++;
      });
      return count;
    }

    // --- UI wiring
    const btnCount = document.getElementById('btnCount');
    const btnClear = document.getElementById('btnClear');
    const liveCount = document.getElementById('liveCount');

    function refreshLiveCount() {
      liveCount.textContent = `Current count: ${countActiveFilters(grid, filter)}`;
    }

    btnCount.addEventListener('click', () => {
      alert(`Active column filters: ${countActiveFilters(grid, filter)}`);
    });

    btnClear.addEventListener('click', () => {
      filter.clear();          // Single-call reset improves UX when exploring filters
      refreshLiveCount();
    });

    // Update on common interactions that change filters
    grid.hostElement.addEventListener('mousedown', () => setTimeout(refreshLiveCount, 0));
    grid.hostElement.addEventListener('keyup', () => setTimeout(refreshLiveCount, 0));

    refreshLiveCount();
  </script>
</body>
</html>

Andrew Peterson

Technical Engagement Engineer