Customize the FlexGrid Filter Editor UI in Vue

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. Ensure the template includes all required wj-part placeholders.
3. 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.

<template>
  <wj-flex-grid
    :itemsSource="data"
    :allowSorting="true"
    :allowFiltering="true"
  />
</template>

<script>
import { ColumnFilterEditor } from '@mescius/wijmo.grid.filter';
import { WjFlexGrid } from '@mescius/wijmo.vue2.grid';

export default {
  components: { WjFlexGrid },
  data() {
    return {
      data: getData()
    };
  },
  created() {
    // 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 }
  ];
}
</script>

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 Vue setup, you can fully customize the FlexGrid filter editor UI by replacing its internal template and applying custom CSS. This approach lets you tailor the filtering experience to your application’s design requirements while maintaining all built-in filtering and sorting functionality.

Happy coding!