Customizing FlexGrid Filter Editor UI

One way to style the filter editor UI is by modifying the template of the FlexGridFilter by using the static controlTemplate property of the ColumnFilterEditor. While modifying the template be sure that the template contains all the required elements with the 'wj-part' attribute:

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>&nbsp;&nbsp;&nbsp;<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>&nbsp;|&nbsp;<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>&nbsp;&nbsp;<button wj-part="btn-cancel" class="wj-btn"></button>&nbsp;&nbsp;<button wj-part="btn-clear" class="wj-btn"></button></div></div>';

You can customize and style the editor UI with whatever preferences and requirements you have with CSS:

/* Hides unwanted div or buttons from the filter editor. */
div[wj-part='div-type'],
button[wj-part='btn-cancel'] {
  display: none !important;
}
/* Remove background color from the selected listbox item/ */
div[wj-part='div-edt-val'] .wj-state-selected {
  background-color: unset;
  color: unset;
}
/* Control styling of buttons present in the filter editor. */
.wj-columnfiltereditor .wj-btn {
  background-color: unset;
  border: 1px solid;
  border-color: #0088ce;
}
/* Control styling of buttons present in the filter editor. */
.wj-columnfiltereditor .wj-btn:hover {
  background-color: #0088ce !important;
  color: white;
}
/* Close button styling */
.close,
.close:hover {
  color: #0088ce;
  opacity: 1;
}
/* change the color of the filter glyphs */
.wj-filter-on .wj-glyph-filter {
  color: #0088ce;
}

An app example showcasing this can be found here.

Happy coding!