How to Disable the FlexGrid Filter Icon

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.

If you want to disable and make the filter icon non-interactable then you can use the ‘formatItem’ event on a custom CSS class on the desired header cells and cancel pointer events through CSS:

// The JS Code
let disableCheckbox = document.querySelector('#disableFilterIcon');

var theGrid = new wjGrid.FlexGrid("#theGrid", {
  itemsSource: data,
  formatItem: (s, e) => {
    if (e.panel == s.columnHeaders) {
      let col = e.getColumn();
      if (
        (col.binding == "id" || col.binding == "sales") &&
        disableCheckbox.checked
      ) {
        wjCore.addClass(e.cell, "disabled-icon");
      }
    }
  },
});

/* The style being added */
.disabled-icon .wj-elem-filter{
  pointer-events: none;
  opacity: 0.2 !important;
}

We hope this article was helpful for you. The example code can be found here.

Happy coding!