Customization of UI:

• Default options are copied from menuUI.gridOptions and applied to pqgrid used in filter dropdowns for all columns.

  Some or all of them can be overridden or new options can be specified in menuUI.gridOptions or filterModel.gridOptions

  //override some of the default options for all columns
  gridOptions: {
      numberCell: {show: false},
      width: 'flex',
      flex: {one: true}
  }
  

• The popup container of all filter dropdown can also be customized with css.

  .pq-popup
  {
      width: auto !important;
  }
  

• Pass options to a specific column filter dropdown grid without affecting other columns ( Ship Country column ).
  In this case gridOptions are added to column.filter.

  gridOptions: {
      stripeRows: false,
      filterModel: {header: false}//hide search box in the dropdown.
  }

• Mutate initialization object just before it's used to create the dropdown grid ( Ship Country column ).

  selectGridObj: function(ui){
      //add renderLabel to first column.
      ui.obj.colModel[0].renderLabel = ui.column.render;
  }

• use column.filterFn to conditionally add filter properties ( Ship Country column ).

  filterFn: function{
      //customize max number of checks for range condition
      if(ui.condition == 'range' ){                
          return {
              //limits checkbox selection to 3 only.
              maxCheck: 3
          }
      }
  }

• Pass options to jQueryUI datepicker ( Order Date column ).

  dpOptions: {
      //same options as of jQueryUI datepicker API.
      showWeek: true
  }

• Limit the conditions in filter dropdown ( ShipCountry column ).

      conditionList: ['contain', 'range']
  

• Exclude the conditions from filter dropdown ( OrderID column ).

      conditionExclude: ['between']
  

Please check datetime filter example for more custom filter UI.

Declare new filter condition.

When new filter condition is defined, it becomes available in the filter condition drop down menu.

The following new filter condition is added as "Not between" in the drop down menu.

New filter condition is set to default in Order ID and Order Date columms.

pq.filter.conditions.notbetween = {
    filter: {
        type: 'textbox2', //type of UI control.
        init: pq.filter.datepicker //use inbuilt init callback for jQueryUI datepicker or any other control of your choice.
    },
    
    number: 1, date: 1, //condition applicable to number and date dataType

    /*actual function doing the local filtering.    
    For remote filtering, comparator is added in the FilterHelper class.*/
    compare: function (cellData, val, val2) { 
        //exclude values lying between val and val2.
        return (cellData < val || cellData > val2)
    }
}

Override whole filter definition of inbuilt condition

It's same as defining a new filter condition e.g., to display a textbox instead of a checkbox in a boolean column for equal condition

pq.filter.conditions.equal = {
	filter: {
		type: 'textbox', //type of UI control.
		init: function(){} 
	},

	bool: 1, //condition applicable to boolean data types.

	//actual function doing the local filtering			
	compare: function (cellData, val) { 				
		return (cellData == val);
	}
}

Override compare function of inbuilt conditions.

In (Shipped - Order) Days column, custom options are provided and compare function is overridden for range condition.

//override range compare.
conditions: {
    range: {
        compare: function (cellData, val) {
            //debugger;
            if ( val.length ) {                                
                return (val.find(function (sel) {
                    if( sel ){ //non blanks
                        var arr = (sel + "").split(":"),
                            a = arr[0] * 1, b = arr[1] * 1;
                        return (cellData > a && cellData <= b);                                            
                    }
                    else{ //blanks
                        return (cellData == null || cellData === "");
                    }
                }) != null);
            }
            else {
                return true;
            }
        }
    }
}

Clear text icon in filter textbox

By default clear icon ✖ is displayed when there is text in header filter textboxes. Clear icon can be removed by setting filterModel.hideClearIcon to true.

Clear icon can be displayed in individual textboxes selectively by adding is = "clear-text" attribute to textboxes.