How to get input box (filterbox) values from ui-grid column header

Question

I'm trying to get the input box values present in the ui-grid column header.

I'm trying to use my own filtering function which requires to get values from multiple input boxes in the column header.

$scope.gridOptions.columnDefs = [
    {
        field: 'name', 
        displayName: 'Name', 
        headerCellTemplate: '<input type='text' &nbsp;disallow-spaces placeholder='Enter to Search'  ng-model='testCol' id='Enter to Search'>},
];

Answer 1

You can give your custom filter to the columnDef like this:

$scope.gridOptions.columnDefs = [
  {
    field: 'name', 
    displayName: 'Name', 
    headerCellTemplate: '<input type='text' &nbsp;disallow-spaces placeholder='Enter to Search'  ng-model='testCol' id='Enter to Search'>,
    filter: {
      type: uiGridConstants.filter.INPUT,
      condition: myCustomFilterFunction
  },
];

and your filtering function will look something like this:

function myCustomFilterFunction(term, value, row, column){
  //do something here
}

uiGrid will call the myCustomFilterFunction everytime the filter input changes. The parameter term refers is what you were looking for. It's the value present in the input box. Parameter value refers to the value of the column for the current row. Parameters row and col give you access to the current rowEntity and column.

myCustomFilterFunction should return a boolen. If the returned value for a row is true then the row is displayed otherwise not.