Customize the FlexGrid Filter Editor UI in JavaScript

Background:

By default, the Wijmo FlexGrid filter editor UI uses a built-in template for column filtering dialogs. You can customize this UI by overriding the internal filter editor template, then applying your own CSS to style or hide parts of the editor as needed. When doing so, it’s important to keep all required elements with wj-part attributes intact, since the control relies on these placeholders for functionality.

Steps to Complete:

1. Override the static controlTemplate property of the ColumnFilterEditor class with a custom HTML template.
2. Initialize the Grid and Filter.
3. Ensure the template includes all required wj-part placeholders.
4. Apply CSS rules to customize the appearance or hide parts of the editor UI.

Getting Started:

Override the static controlTemplate property of the ColumnFilterEditor class with a custom HTML template

FlexGrid uses a default HTML template to render the column filter editor. By assigning a new template string to ColumnFilterEditor.controlTemplate, you can fully customize the structure and layout of the editor dialog. Required wj-part elements must remain so filtering logic continues to work correctly.

<div id="theGrid"></div>

import * as wjcGrid from '@mescius/wijmo.grid';
import { FlexGridFilter, ColumnFilterEditor } from '@mescius/wijmo.grid.filter';

// Override the built-in filter editor template
ColumnFilterEditor.controlTemplate = `
  <div>
    <div wj-part="div-sort" class="wj-sort-buttons">
      <div>Sort:</div>
      <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="close-editor"></div>
      <button wj-part="btn-asc" class="wj-btn"></button>
      <button wj-part="btn-dsc" class="wj-btn"></button>
    </div>

    <div wj-part="div-type" class="wj-filtertype">
      <a wj-part="a-cnd" href="" draggable="false"></a> |
      <a wj-part="a-val" href="" draggable="false"></a>
    </div>

    <div wj-part="div-edt-val" tabindex="-1">
      <div>Filter:</div>
    </div>

    <div wj-part="div-edt-cnd" tabindex="-1"></div>

    <div style="text-align:center;margin-top:10px">
      <button wj-part="btn-apply" class="wj-btn"></button>
      <button wj-part="btn-cancel" class="wj-btn"></button>
      <button wj-part="btn-clear" class="wj-btn"></button>
    </div>
  </div>
`;

• All required wj-part attributes (btn-asc, btn-apply, div-edt-val, etc.) are preserved to ensure proper behavior.

Initialize the Grid and Filter

This creates a FlexGrid instance and attaches a FlexGridFilter so the customized filter editor is used when filtering columns.

const data = getData();

const grid = new wjcGrid.FlexGrid('#theGrid', {
  itemsSource: data,
  allowSorting: true
});

// Enable filtering
const filter = new FlexGridFilter(grid);

Ensure the template includes all required wj-part placeholders

The filter editor relies on wj-part attributes as anchors for its internal logic. These parts are used to attach sorting, filtering, and action handlers. You can change layout and styling freely, but removing required parts will break the filter editor.

Examples of required parts include:

• wj-part="btn-asc" / wj-part="btn-dsc"
• wj-part="btn-apply" / wj-part="btn-cancel" / wj-part="btn-clear"
• wj-part="div-edt-val" / wj-part="div-edt-cnd"

Apply CSS rules to customize the appearance or hide parts of the editor UI

After overriding the template, CSS can be used to hide elements, adjust spacing, or restyle buttons and icons within the filter editor.

/* Hide filter type toggle and cancel button */
div[wj-part='div-type'],
button[wj-part='btn-cancel'] {
  display: none !important;
}

/* Remove default selected background styling */
div[wj-part='div-edt-val'] .wj-state-selected {
  background-color: unset;
  color: unset;
}

/* Style filter editor buttons */
.wj-columnfiltereditor .wj-btn {
  border: 1px solid #0088ce;
  background-color: unset;
}

/* Hover styling */
.wj-columnfiltereditor .wj-btn:hover {
  background-color: #0088ce !important;
  color: white;
}

/* Close button styling */
.close,
.close:hover {
  color: #0088ce;
  opacity: 1;
}

/* Change filter icon color when active */
.wj-filter-on .wj-glyph-filter {
  color: #0088ce;
}

With this JavaScript setup, you can fully customize the FlexGrid filter editor UI by replacing its internal template and applying custom CSS. This allows you to tailor the filtering experience while preserving all built-in sorting and filtering functionality.

Happy coding!