Disabling FlexGrid Filter Icon in Vue

Background:

Wijmo's FlexGridFilter icon is fully customizable. You can adjust the appearance or change the icon entirely using CSS. Additionally, you can add further customization using built in events to alter the behavior of the icon.

Steps to Complete:

1. Add a checkbox that controls whether the filter icon is disabled (optional).
2. Handle the grid’s formatItem event and add a CSS class (e.g. disabled-icon) to the column header cells you want to disable when the checkbox is checked.
3. Add CSS that targets the filter element (.wj-elem-filter) inside those header cells and turns off pointer events.

Getting Started:

Add a checkbox that controls whether the filter icon is disabled (optional)

In Vue, bind a checkbox to a boolean using v-model and use that value inside your formatItem handler.

<!-- src/App.vue -->
<template>
  <label style="display:inline-flex; gap:.5rem; align-items:center; margin-bottom: 0.75rem;">
    <input type="checkbox" v-model="disableFilterIcon" />
    Disable Filter Icon (ID + Sales)
  </label>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const disableFilterIcon = ref(false);
    return { disableFilterIcon };
  },
});
</script>

Handle the grid’s formatItem event and add a CSS class (e.g. disabled-icon) to the column header cells you want to disable when the checkbox is checked

The Wijmo Vue wj-flex-grid component supports the FlexGrid API (properties + events), so you can attach a formatItem handler and toggle a CSS class on the header cell.

<!-- src/App.vue -->
<template>
  <label style="display:inline-flex; gap:.5rem; align-items:center; margin-bottom: 0.75rem;">
    <input type="checkbox" v-model="disableFilterIcon" />
    Disable Filter Icon (ID + Sales)
  </label>

  <wj-flex-grid :itemsSource="data" @format-item="onFormatItem">
    <!-- Enables the Excel-like filter UI (and the filter icons in column headers) -->
    <wj-flex-grid-filter></wj-flex-grid-filter>

    <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
    <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
    <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
    <wj-flex-grid-column header="Expenses" binding="expenses"></wj-flex-grid-column>
  </wj-flex-grid>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import * as wjCore from "@mescius/wijmo";
import * as wjGrid from "@mescius/wijmo.grid";

import { WjFlexGrid, WjFlexGridColumn } from "@mescius/wijmo.vue2.grid";
import { WjFlexGridFilter } from "@mescius/wijmo.vue2.grid.filter";

type RowItem = {
  id: number;
  country: string;
  sales: number;
  expenses: number;
};

export default defineComponent({
  name: "App",
  components: {
    "wj-flex-grid": WjFlexGrid,
    "wj-flex-grid-column": WjFlexGridColumn,
    "wj-flex-grid-filter": WjFlexGridFilter,
  },
  setup() {
    const disableFilterIcon = ref(false);

    const data = ref<RowItem[]>([
      { id: 1, country: "US", sales: 12000, expenses: 8000 },
      { id: 2, country: "Germany", sales: 9000, expenses: 7000 },
      { id: 3, country: "Japan", sales: 15000, expenses: 11000 },
    ]);

    /**
     * Adds/removes a CSS class on specific column-header cells so CSS can disable the filter icon.
     */
    function onFormatItem(s: wjGrid.FlexGrid, e: wjGrid.FormatItemEventArgs) {
      if (e.panel !== s.columnHeaders) return;

      const col = e.getColumn();
      const shouldDisable =
        disableFilterIcon.value && (col.binding === "id" || col.binding === "sales");

      wjCore.toggleClass(e.cell, "disabled-icon", shouldDisable);
    }

    return { disableFilterIcon, data, onFormatItem };
  },
});
</script>

Add CSS that targets the filter element (.wj-elem-filter) inside those header cells and turns off pointer events

/* src/styles.css (or App.vue <style> WITHOUT scoped) */
.disabled-icon .wj-elem-filter {
  pointer-events: none;
  opacity: 0.2 !important;
}

And that's it! If implemented correctly, your FlexGrid filter icon is now disabled.

Happy coding!