Search within flexgrid: Custom filtering of which columns to search?

Search within flexgrid: Custom filtering of which columns to search?

Posted by: oanderson on 29 May 2025, 3:20 pm EST

• 

  oanderson

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 May 2025, 3:20 pm EST - Updated 29 May 2025, 3:26 pm EST

  Hey all,

  I’m working in an Angular2 project that uses Wijmo FlexGrid and Search components, and I’m attempting to add an Angular component for restricting which grid columns are searched.

  In my Angular component (see screenshot below), by selecting or deselecting columns (which are pulled dynamically from the associated grid), I want the search to display rows with values found only in those selected columns, and the deselected columns are ignored by the search. Additionally, I don’t want to hide any columns – even if columns are not selected in the custom filter component, those columns should still be visible in the grid.

  

  907×314 19.4 KB

  My issue is I haven’t been able to figure out how to implement this custom columns filter while keeping all columns visible in the grid. It seemed like using a FlexGridFilter is a good start, because that appears to allow fine-tuning filtering in individual columns. But when I assign filters per column (via getColumnFilter().filterType), call apply() on the filter, and finally refresh() on the grid – I’m not even sure all these steps are necessary to do what I want – I don’t see the search restricted to particular columns per what’s selected in the Angular component. I’m guessing I’m on the wrong track or am missing something.

  Thanks for any assistance! Let me know if any more info is needed or helpful.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 30 May 2025, 2:04 am EST

  Hi OAnderson,
  
  You can override the default filter function of the flexgrid search to apply restrictions and perform a search within the specific columns while searching. Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/angular-ivy-dncag3uo?file=src%2Fapp%2Fapp.component.ts
  
  Please note that, in the above sample, when we search a value in the specific column, all the rows will be filtered based on the data in that column, now within these filtered data rows, if any other cell in any other column also has the searched string, then it will also be highlighted in that cell, however that doesn’t mean search is performed on that column.
  
  If you want to remove that highlights, you can set the cssClass property on the columns that are searched(make sure to update the cssClass property on all column, whenever there is a change in searched columns list) and override the ‘wj-state-match’ class background color using CSS for the selected columns, because the highlighted element are wrapped in a span element with ‘.wj-state-match’ class.
  
  In case, you face any issues, please let us know.
  
  Regards

• 

  oanderson

  • Post Options:
  • Link
    Copy

  Posted 30 May 2025, 4:33 pm EST

  Thanks very much, Vivek! The information and code sample were very helpful, and because of them I was able to solve the filtering issue on my end.

  For anyone else reading this, I thought this bit in the code sample was worth calling out, as it demonstrates a neat trick that I hadn’t seen before:

  for (const col of this.columnToBeSearched) {
    let property = col.binding; // 👈👈👈👈
    if (item[property]) { // 👈👈👈👈
      let value = item[property].toString().toLowerCase();
      if (value.includes(text.toLowerCase())) {
        return item;
      }
    }
  }

  This is a handy thing to know, that we can implicitly make a connection between a column binding and a property of the same name in an item object. Very helpful when we have a callback that provides only the items, but when we need to do additional logic based on additional info from column objects. We can use the item properties as binding names to get columns out of the grid. Pretty nice!

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 2 June 2025, 12:29 am EST

  Hi OAnderson,

  Thank you for the update, we are glad that the issue is resolved now.

  Regards