Start Building Professional
Web Apps Today

Combine filterBy and #select_filter and #text_filter

I understand that you can combine #select_filter, #text_filter and #numeric_filter and when the user selects a value from each, the grid will use the AND logic to do the filtering:

#select_filter AND #numeric_filter AND #text_filter = filtered result

Is it possible to ADD a filterBy (custom filter)? I'm noticing that the custom filter in the header acts independently from the # filters.

To create custom filter which will impact on filtering in other filters you should add it to grid's filters collection. 

dhtmlXGridObject.prototype._in_header_custom_filter = function(t, i, c) {
  t.innerHTML = c[0] + "<select style='width:90%;font-size:8pt;font-family:Tahoma;'></select>" + c[1];
  var o = this;
  var k=0;
  while (t.childNodes[k].tagName!="SELECT") k++;
  var f=t.childNodes[k];
  if (!this.filters) this.filters=[];
  this.filters.push([f,i]);
  f._filter = function (){
  return function(val){
     //any custom logic here
     return val.toString().indexOf(f.value)!=-1;
  };
  }
  t.firstChild.onclick = function(e) {
  (e||event).cancelBubble=true;
  }
  t.firstChild.onchange = function() {
 o.filterByAll();
  }
}

How can the provided example be modified so that the user is using <select> from a designated list of values similar to:

t.innerHTML = "<select id='dateopened' class='select'><option value=''>Opened In</option><option value='2009'>2009</option><option value='2008'>2008</option><option value='2007'>2007</option><option value='2006'>2006</option></select>";

I then want to filter the column based on the selected year.  Previously I would have filtered it by using mygrid.filterBy(cIndex,this.value); but this does not satisfy my objective.

Custom filter code should looks like that:
dhtmlXGridObject.prototype._in_header_checkbox_filter = function(t, i, c) {
  t.innerHTML = "<select id='dateopened' class='select'><option value=''>Opened In</option><option value='2009'>2009</option><option value='2008'>2008</option><option value='2007'>2007</option><option value='2006'>2006</option></select>";
  var o = this;
  var k=0;
  while (t.childNodes[k].tagName!="SELECT") k++;
  var f=t.childNodes[k];
  var fobj={};
  if (!this.filters) this.filters=[];
  this.filters.push([fobj,i]);
  fobj._filter = function (){ return f.value;}
  fobj.tagName="some";
  t.firstChild.onclick = function(e) {
  (e||event).cancelBubble=true;
  }
  t.firstChild.onchange = function() {
  o.filterByAll();
  }
}

Thanks. 

Just what I neede for my date filtering scenario.

You should modify _filter() function which should return custom filtering rule:

fobj._filter = function (){
   return function(val){
      //val - cell's value
      //f.value -  option's value
      //any custom logic here
      return val.toString().indexOf(f.value)!=-1;
   };
}