Customize the FlexGrid Filter Editor UI in Angular

Background:

By default, the Wijmo FlexGrid filter editor UI uses a built-in template for column filtering dialogs. You can customize this UI by replacing the internal filter editor template, then applying your own CSS to style or hide parts of the editor as needed. When doing so, ensure that any necessary elements with specific wj-part attributes remain present, since the control relies on these placeholders.

Steps to Complete:

1. Override the static controlTemplate property of the ColumnFilterEditor class with a custom HTML template.
2. Ensure the template includes required wj-part placeholders.
3. Add CSS rules to style or hide specific parts of the editor.

Getting Started:

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

Wijmo uses a default HTML structure for the filter editor dialog. By assigning a string to ColumnFilterEditor.controlTemplate, you can completely replace that HTML with your own layout. Be sure to retain required elements such as those with wj-part attributes so that the filter UI still functions correctly.

import { Component } from '@angular/core';
import { ColumnFilterEditor } from '@mescius/wijmo.grid.filter';

@Component({
  selector: 'app-filter-ui',
  template: `
    <wj-flex-grid
      #flex
      [itemsSource]="data"
      [allowSorting]="true"
      [allowFiltering]="true">
    </wj-flex-grid>
  `
})
export class FilterUIComponent {
  data = getData();

  constructor() {
    // 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>
    `;
  }
}

function getData() {
  return [
    { id: 1, country: 'USA', sales: 100 },
    { id: 2, country: 'Canada', sales: 200 },
    { id: 3, country: 'Germany', sales: 150 }
  ];
}

Ensure the template includes required wj-part placeholders

The filter editor uses wj-part attributes as anchors to inject logic (apply, cancel, sort, value/condition toggles). Even if you change the layout or CSS, retaining all required wj-part elements is mandatory for proper filtering functionality.

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

Add CSS rules to style or hide specific parts of the editor

After overriding the template, you can use CSS to hide, restyle, or reflow parts of the filter editor. This lets you hide entire sections, change button colors, adjust spacing, and highlight active filters.

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

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

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

/* Hover styling for buttons */
.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 filter is active */
.wj-filter-on .wj-glyph-filter {
  color: #0088ce;
}

With this Angular setup, you can completely customize the filter editor experience in a Wijmo FlexGrid. You’re modifying the underlying template that defines the filter dialog UI and applying custom CSS to control layout, visibility, and styling, all while preserving essential functionality driven by wj-part attributes.

Happy coding!