Ignite UI™ API Documentation

ui.igGridFiltering

Overview
Options
Events
Methods
Theming

Both the igGrid and igHierarchicalGrid controls feature row filtering which allows users to restrict grid rows to only the data that meets a given criteria. Filtering options include numeric, string and date filters. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igGrid control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igGrid control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

  
        <!doctype html>
        <html>
        <head>
            <!-- Infragistics Combined CSS -->
            <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
            <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>
            <!-- Infragistics Combined Scripts -->
            <script src="js/infragistics.core.js" type="text/javascript"></script>
                  <script src="js/infragistics.lob.js" type="text/javascript"></script>
            <script type="text/javascript">
                var products = [
                    { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" },
                    { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" },
                    { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" },
                    { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" },
                    { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" },
                    { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" },
                    { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" },
                    { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" },
                    { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }
                ];

                $(function () {
                    $("#gridFiltering").igGrid({
                        columns: [
                            { headerText: "Product ID", key: "ProductID", dataType: "number" },
                            { headerText: "Product Name", key: "Name", dataType: "string" },
                            { headerText: "Product Number", key: "ProductNumber", dataType: "string" }
                        ],
                        features:[
                            {
                                name: "Filtering"
                            }
                        ],
                        width: "500px",
                        dataSource: products
                    });
                });
            </script>
        </head>
        <body>
            <table id="gridFiltering"></table>
        </body>
        </html>

Related Samples

advancedModeEditorsVisible

Type:: bool
Default:: false

Defines whether to render editors in advanced mode. If false, no editors will be rendered in the advanced mode.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						advancedModeEditorsVisible : true
					}
				]
			});

			// Get
			var editorsVisible = $(".selector").igGridFiltering("option", "advancedModeEditorsVisible");

			// Set
			$(".selector").igGridFiltering("option", "advancedModeEditorsVisible", true);

advancedModeHeaderButtonLocation

Type:: enumeration
Default:: left

Location of the advanced filtering button when advancedModeEditorsVisible is false (i.e. when the button is rendered in the header).

Members

left
Type:string
right
Type:string

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							advancedModeHeaderButtonLocation : "right"
						}
					]
				});
				// Get
				var location = $(".selector").igGridFiltering("option", "advancedModeHeaderButtonLocation");
				// Set
				$(".selector").igGridFiltering("option", "advancedModeHeaderButtonLocation", "right");

caseSensitive

Type:: bool
Default:: false

Enables or disables the filtering case sensitivity. Works only for local filtering. If true, it case sensitive filtering is performed. If false, filtering is case insensitive.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						caseSensitive : true
					}
				]
			});

			// Get
			var caseSensitive = $(".selector").igGridFiltering("option", "caseSensitive");

			// Set
			$(".selector").igGridFiltering("option", "caseSensitive", true);

columnSettings

Type:: array
Default:: []
Elements Type:: object

A list of column settings that specifies custom filtering options on a per column basis.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						columnSettings : [
							{
								columnKey: "ProductDescription", 
								condition: "endsWith"
							}
						]
					}
				]
			});

			// Get
			var colSettings = $(".selector").igGridFiltering("option", "columnSettings");

			// Set
			$(".selector").igGridFiltering("option", "columnSettings", 
				[{columnKey: "ProductDescription", 
					condition: "endsWith"
				}]
			);

allowFiltering

Type:: bool
Default:: true

Enables/disables filtering for the column.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "ProductDescription", 
										allowFiltering: false
									}
								]
							}
						]
					});

					//Get
					var colSettings = $(".selector").igGridFiltering("option", "columnSettings");
					var filterAllowed = colSettings[0].allowFiltering;

					// Set
					$(".selector").igGridFiltering("option", "columnSettings", colSettings);

columnIndex

Type:: number
Default:: null

Identifies the grid column by index. Either key or index must be set in every column setting.

Code Sample

 
					// Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnIndex: 0,
										allowFiltering: false
									}
								]
							}
						]
					});

					// Get
					var colSettings = $(".selector").igGridFiltering("option", "columnSettings");
					var colIndex = colSettings[0].columnIndex;

columnKey

Type:: string
Default:: null

Identifies the grid column by key. Either key or index must be set in every column setting.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "ProductDescription", 
										allowFiltering: false
									}
								]
							}
						]
					});

					//Get
					var colSettings = $(".selector").igGridFiltering("option", "columnSettings");
					var colKey = colSettings[0].columnKey;

condition

Type:

enumeration

Default:

null
Initial filtering condition for the column.
Members
- empty
- Type:string
- notEmpty
- Type:string
- null
- Type:string
- notNull
- Type:string
- equals
- Type:string
- doesNotEqual
- Type:string
- startsWith
- Type:string
- contains
- Type:string
- doesNotContain
- Type:string
- endsWith
- Type:string
- greaterThan
- Type:string
- lessThan
- Type:string
- greaterThanOrEqualTo
- Type:string
- lessThanOrEqualTo
- Type:string
- true
- Type:bool
- false
- Type:bool
- on
- Type:string
- notOn
- Type:string
- before
- Type:string
- after
- Type:string
- today
- Type:string
- yesterday
- Type:string
- thisMonth
- Type:string
- lastMonth
- Type:string
- nextMonth
- Type:string
- thisYear
- Type:string
- nextYear
- Type:string
- lastYear
- Type:string
- at
- Type:string
- notAt
- Type:string
- atBefore
- Type:string
- atAfter
- Type:string
Code Sample
```
 
					// Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "ProductDescription", 
										condition: "startsWith"
									}
								]
							}
						]
					});
					// Get
					var colSettings = $(".selector").igGridFiltering("option", "columnSettings");
					var condition = colSettings[0].condition;
					// Set
					$(".selector").igGridFiltering("option", "columnSettings", colSettings);
					 
```

conditionList

Type:: array
Default:: []
Elements Type:: object

An array of strings that determine which conditions to display for this column.

Code Sample

 
					//Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [{
									columnKey: "ProductNumber",
									conditionList: ["startsWith", "contains"]
								}]
							}
						]
					});

					//Get
					var conditionList = $(".selector").igGridFiltering("option", "columnSettings")[2].conditionList;

customConditions

Type:: object
Default:: null

An object used to specify custom filtering conditions as objects for this column.

labelText The label as it will appear in the column's condition dropdown.
expressionText The text to display in the editor when requireExpr is false.
requireExpr If this condition requires the user to input a filtering expression.
filterImgIcon Class applied to the dropdown item when in simple mode.
filterFunc The custom comparing filter function. Signature: function (value, expression, dataType, ignoreCase, preciseDateFormat).

Code Sample

 
					// Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [{
									columnKey: "ProductNumber",
									customConditions: {
										BE: {
											labelText: "BE",
											expressionText: "BE-####",
											requireExpr: false,
											filterFunc: filterProductNumber
										},
										CA: {
											labelText: "CA",
											expressionText: "CA-####",
											requireExpr: false,
											filterFunc: filterProductNumber1
										}
									}
								}]
							}
						]
					});

					function filterProductNumber(value, expression, dataType, ignoreCase, preciseDateFormat) {
						return value.startsWith("BE");
					}

					function filterProductNumber1(value, expression, dataType, ignoreCase, preciseDateFormat) {
						return value.startsWith("CA");
					}
					// Get
					var customConditions = $(".selector").igGridFiltering("option", "columnSettings")[2].customConditions;

defaultExpressions

Type:: object
Default:: []

Initial filtering expressions - if set they will be applied on initialization together with the preset condition.

Code Sample

 
					// Initialize
					$(".selector").igGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "Name", 
										defaultExpressions: [
											{ expr: "B", cond: "startsWith" }
										]
									}
								]
							}
						]
					});

					// Get
					var defaultExpressions = $(".selector").igGridFiltering("option", "columnSettings")[0].defaultExpressions;

editorOptions

Type:: object
Default:: null

Specifies options to initialize the corresponding editor with.

Code Sample

 
						//Initialize
						$("#grid").igGrid({
							features: [
								{
									name: "Filtering",
									columnSettings: [
										{
											columnKey : "Name",
											editorType: "text",
											editorOptions: {
												buttonType: "dropdown",
												listItems: names,
												readOnly: true
											}
										}
									]
								}
							]
						});

						//Get
						var columnSettings = $("#grid").igGridFiltering("option", "columnSettings")[0].editorOptions;

						//Set
						$("#grid").igGridFiltering("option", "columnSettings", columnSettings);

editorProvider

Type:: object
Default:: null

Specifies а custom editor provider instance. More information about editor providers can be found here and here.
It should either extend $.ig.EditorProvider or have definitions for the following methods:
$.ig.EditorProvider = $.ig.EditorProvider|| $.ig.EditorProvider.extend({
createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {},
attachErrorEvents: function (errorShowing, errorShown, errorHidden) {},
getEditor: function () {},
refreshValue: function () {},
getValue: function () {},
setValue: function (val) {},
setSize: function (width, height) {},
setFocus: function () {},
removeFromParent: function () {},
destroy: function () {},
validator: function () {},
validate: function (noLabel) {},
isValid: function () {}
});.

Code Sample

 
							// This editor provider demonstrates how to wrap HTML 5 number INPUT into editor provider for the igGridFiltering
							$.ig.EditorProviderNumber = $.ig.EditorProviderNumber || $.ig.EditorProvider.extend({
								// initialize the editor
								createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {
									element = element || $('<input  />');
									// call parent createEditor
									this._super(callbacks, key, editorOptions, tabIndex, format, element);

									element.on("keydown", $.proxy(this.keyDown, this));
									element.on("change", $.proxy(this.change, this));

									this.editor = {};
									this.editor.element = element;
										return element;
								},
								keyDown: function(evt) {
									var ui = {};
									ui.owner = this.editor.element;
									ui.owner.element = this.editor.element;
									this.callbacks.keyDown(evt, ui, this.columnKey);
									// enable "Done" button only for numeric character
									if ((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && evt.keyCode <= 105)) {
										this.callbacks.textChanged(evt, ui, this.columnKey);
									}
								},
								change: function (evt) {
									var ui = {};
									ui.owner = this.editor.element;
									ui.owner.element = this.editor.element;
									this.callbacks.textChanged(evt, ui, this.columnKey);
								},
								// get editor value
								getValue: function () {
									return parseFloat(this.editor.element.val());
								},
								// set editor value
								setValue: function (val) {
									return this.editor.element.val(val || 0);
								},
								// size the editor into the TD cell
								setSize: function (width, height) {
									this.editor.element.css({
									width: width - 2,
									height: height - 2,
									borderWidth: "1px",
									backgroundPositionY: "9px"
								});
								},
								// focus the editor
								setFocus: function () {
									this.editor.element.select();
								},
								// validate the editor
								validator: function () {
									// no validator
									return null;
								},
								// destroy the editor
								destroy: function () {
									this.editor.remove();
								}
							});

							//Initialize
							$("#grid").igGrid({
								features: [
									{
										name: "Filtering",
										columnSettings: [
											{
												columnKey : "SafetyStockLevel",
												editorProvider: new $.ig.EditorProviderNumber()
											}
										]
									}
								]
							});

							//Get
							var columnSettings = $("#grid").igGridFiltering("option", "columnSettings")[0].editorProvider;

editorType

Type:

enumeration

Default:

null
Specifies the type of editor to use for the column.
Members
- text
- Type:string
- An igTextEditor will be created.
- mask
- Type:string
- An igMaskEditor will be created.
- date
- Type:string
- An igDateEditor will be created.
- datepicker
- Type:string
- An igDatePicker will be created.
- timepicker
- Type:string
- An igTimePikcer will be created.
- numeric
- Type:string
- An igNumericEditor will be created.
- checkbox
- Type:string
- An igCheckboxEditor will be created.
- currency
- Type:string
- An igCurrencyEditor will be created.
- percent
- Type:string
- An igPercentEditor will be created.
- combo
- Type:string
- An igCombo editor is created. Both the JS and CSS files used by ui.igCombo should be available.
- rating
- Type:string
- An igRating editor is created. Both the JS and CSS files used by ui.igRating should be available.
Code Sample
```
 
						//Initialize
						$("#grid").igGrid({
							features: [
								{
									name: "Filtering",
									columnSettings: [
										{
											columnKey : "BirthDate",
											editorType: "datepicker"
										}
									]
								}
							]
						});
						//Get
						var columnSettings = $("#grid").igGridFiltering("option", "columnSettings")[0].editorType;
						//Set
						$("#grid").igGridFiltering("option", "columnSettings", columnSettings);
					 
```

dialogWidget

Type:: string
Default:: "igGridModalDialog"

Name of the dialog widget to be used. It should inherit from $.ui.igGridModalDialog.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						dialogWidget: "advancedModalDialog"
					}
				]
			});

			// Get
			var widgetName = $(".selector").igGridFiltering("option", "dialogWidget");

featureChooserText
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Feature chooser text when filter is shown and filter mode is simple. Use option locale.featureChooserText.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						featureChooserText : "Hide Filter"
					}
				]
			});

			// Get
			var text = $(".selector").igGridFiltering("option", "featureChooserText");

			// Set
			$(".selector").igGridFiltering("option", "featureChooserText", "Hide Filter");

featureChooserTextAdvancedFilter
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Feature chooser text when filter mode is advanced. Use option locale.featureChooserTextAdvancedFilter.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						featureChooserTextAdvancedFilter : "Advanced Filter"
					}
				]
			});

			// Get
			var text = $(".selector").igGridFiltering("option", "featureChooserTextAdvancedFilter");

			// Set
			$(".selector").igGridFiltering("option", "featureChooserTextAdvancedFilter", "Advanced Filter");

featureChooserTextHide
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Feature chooser text when filter is hidden and filter mode is simple. Use option locale.featureChooserTextHide.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						featureChooserTextHide : "Show Filter"
					}
				]
			});

			// Get
			var text = $(".selector").igGridFiltering("option", "featureChooserTextHide");

			// Set
			$(".selector").igGridFiltering("option", "featureChooserTextHide", "Show Filter");

filterButtonLocation

Type:: enumeration
Default:: left

The filtering button for filter dropdowns can be rendered either on the left of the filter editor, or on the right.

Members

left
Type:string
The button is rendered on the left.
right
Type:string
The button is rendered on the right.

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterButtonLocation : "right"
						}
					]
				});
				// Get
				var location = $(".selector").igGridFiltering("option", "filterButtonLocation");
				// Set
				$(".selector").igGridFiltering("option", "filterButtonLocation", "right");

filterDelay

Type:: number
Default:: 500

Time in milliseconds for which widget will wait between keystrokes before sending filtering requests.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDelay : 1000
					}
				]
			});

			// Get
			var delay = $(".selector").igGridFiltering("option", "filterDelay");

			// Set
			$(".selector").igGridFiltering("option", "filterDelay", 1000);

filterDialogAddButtonWidth

Type:: enumeration
Default:: 100

Add button width - in the advanced filter dialog.

Members

string
Type:string
The dialog Add button width in pixels (100px).
number
Type:number
The dialog Add button width in pixels as a number (100).

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogAddButtonWidth : 75
						}
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogAddButtonWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogAddButtonWidth", 75);

filterDialogAddConditionDropDownTemplate

Type:: string
Default:: null

Custom template for options in dropdown in add condition area in the filter dialog. The default template is "<option value='${value}'>${text}</option>"
and it is used when filterDialogAddConditionTemplate is applied.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDialogAddConditionDropDownTemplate: "<option value='${text}'>${text}</option>"
					}
				]
			});

			// Get
			var dropDownTemplate = $(".selector").igGridFiltering("option", "filterDialogAddConditionDropDownTemplate");

			// Set
			$(".selector").igGridFiltering("option",
										   "filterDialogAddConditionDropDownTemplate",
										   "<option value='${text}'>${text}</option>");

filterDialogAddConditionTemplate

Type:: string
Default:: null

Custom template for add condition area in the filter dialog. The default template is "<div><span>${label1}</span><div><input></input></div><span>${label2}</span></div>".

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDialogAddConditionTemplate: "<div><div><select></select></div><span>${label1}</span><span>${label2}</span></div>"
					}
				]
			});

			// Get
			var addConditionTemplate = $(".selector").igGridFiltering("option", "filterDialogAddConditionTemplate");

			// Set
			$(".selector").igGridFiltering("option",
										   "filterDialogAddConditionTemplate",
										   "<div><div><select></select></div><span>${label1}</span><span>${label2}</span></div>");

filterDialogColumnDropDownDefaultWidth

Type:: enumeration
Default:: null

Width of the column chooser dropdowns in the advanced filter dialog.

Members

string
Type:string
The column chooser dropdowns width in pixels (80px).
number
Type:number
The column chooser dropdowns width in pixels as a number (80).

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogColumnDropDownDefaultWidth : 100
					    }
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogColumnDropDownDefaultWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogColumnDropDownDefaultWidth", 100);

filterDialogContainment

Type:: string
Default:: "owner"

Controls containment behavior.

owner The filter dialog will be draggable only within the grid area.
window The filter dialog will be draggable within the whole window area.

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogContainment : "window"
					    }
					]
				});

				// Get
				var filterDialogContainment = $(".selector").igGridFiltering("option", "filterDialogContainment");

filterDialogExprInputDefaultWidth

Type:: enumeration
Default:: 100

Width of the filtering expression input boxes in the advanced filter dialog.

Members

string
Type:string
The filtering expression input boxes width in pixels (80px).
number
Type:number
The filtering expression input boxes width in pixels as a number (80).

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogExprInputDefaultWidth : 100
					    }
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogExprInputDefaultWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogExprInputDefaultWidth", 100);

filterDialogFilterConditionTemplate

Type:: string
Default:: null

Custom template for options in condition list in filter dialog. The default template is "<option value='${condition}'>${text}</option>"
and it is used for custimizing DOM elemenent with attribute "data-af-cond".

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDialogFilterConditionTemplate: "<option value='${conditionName}'>${conditionLabel}</option>"
					}
				]
			});

			// Get
			var filterConditionTemplate = $(".selector").igGridFiltering("option", "filterDialogFilterConditionTemplate");

			// Set
			$(".selector").igGridFiltering("option",
										   "filterDialogFilterConditionTemplate",
										   "<option value='${conditionName}'>${conditionLabel}</option>");

filterDialogFilterDropDownDefaultWidth

Type:: enumeration
Default:: 150

Width of the filtering condition dropdowns in the advanced filter dialog.

Members

string
Type:string
The filtering condition dropdowns width in pixels (80px).
number
Type:number
The filtering condition dropdowns width in pixels as a number (80).

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogFilterDropDownDefaultWidth : 100
						}
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogFilterDropDownDefaultWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogFilterDropDownDefaultWidth", 100);

filterDialogFilterTemplate

Type:: string
Default:: null

Custom template for filter dialog.
Each DOM element which is used for selecting filter conditions/columns/filter expressions has "data-*" attribute.
E.g.: DOM element used for selecting column has attribute "data-af-col", for selecting filter condition - "data-af-cond", for filter expression- "data-af-expr".
NOTE: The template is supported only with <tr />.
The default template is "<tr data-af-row><td><input data-af-col/></td><td><input data-af-cond/></td><td><input data-af-expr /> </td><td><span data-af-rmv></span></td></tr>".

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogFilterTemplate: "<tr><td>Choose column<input/></td><td>Condition<select></select></td><td>Search value<input /> </td><td><span></span></td></tr>"
						}
					]
				});

				// Get
				var dialogFilterTemplate = $(".selector").igGridFiltering("option", "filterDialogFilterTemplate");

				// Set
				$(".selector").igGridFiltering("option",
											   "filterDialogFilterTemplate",
											   "<tr><td>Choose column<input/></td><td>Condition<select></select></td><td>Search value<input /> </td><td><span></span></td></tr>");

filterDialogHeight

Type:: enumeration
Default:: 340

default filter dialog height (used for Advanced filtering mode).

Members

string
Type:string
The dialog window height in pixels (350px).
number
Type:number
The dialog window height in pixels as a number (350).

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogHeight : 30
						}
					]
				});
				// Get
				var height = $(".selector").igGridFiltering("option", "filterDialogHeight");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogHeight", 30);

filterDialogMaxFilterCount

Type:: number
Default:: 5

Maximum number of filter rows in the advanced filtering dialog. If this number is exceeded, an error message will be rendered.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDialogMaxFilterCount : 3
					}
				]
			});

			// Get
			var count = $(".selector").igGridFiltering("option", "filterDialogMaxFilterCount");

			// Set
			$(".selector").igGridFiltering("option", "filterDialogMaxFilterCount", 3);

filterDialogOkCancelButtonWidth

Type:: enumeration
Default:: 120

Width of the Ok and Cancel buttons in the advanced filtering dialogs.

Members

string
Type:string
The advanced filter dialog Ok and Cancel buttons width in pixels (120px).
number
Type:number
The advanced filter dialog Ok and Cancel buttons width in pixels as a number (120).

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogOkCancelButtonWidth : 120
						}
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogOkCancelButtonWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogOkCancelButtonWidth", 120);

filterDialogWidth

Type:: enumeration
Default:: 500

Default filter dialog width (used for Advanced filtering mode).

Members

string
Type:string
The dialog window width in pixels (500px).
number
Type:number
The dialog window width in pixels as a number (500).

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDialogWidth : 500
						}
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDialogWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDialogWidth", 500);

filterDropDownAnimationDuration

Type:: number
Default:: 500

Animation duration in milliseconds for the filterDropDownAnimations.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDropDownAnimationDuration : 300
					}
				]
			});

			// Get
			var duration = $(".selector").igGridFiltering("option", "filterDropDownAnimationDuration");

			// Set
			$(".selector").igGridFiltering("option", "filterDropDownAnimationDuration", 300);

filterDropDownAnimations

Type:: enumeration
Default:: linear

Type of animations for the column filter dropdowns.

Members

linear
Type:string
The column filtering drop downs are shown with a linear animation.
none
Type:string
No animation is used when showing the filtering drop downs.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterDropDownAnimations : "none"
					}
				]
			});
			// Get
			var animation = $(".selector").igGridFiltering("option", "filterDropDownAnimations");
			// Set
			$(".selector").igGridFiltering("option", "filterDropDownAnimations", "none");

filterDropDownHeight

Type:: object
Default:: 0

Height of the column filter dropdowns.

string The height of the column filter dropdowns in pixels (0px).
number The height of the column filter dropdowns in pixels as a number (0).

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDropDownHeight : 30
						}
					]
				});

				// Get
				var height = $(".selector").igGridFiltering("option", "filterDropDownHeight");

				// Set
				$(".selector").igGridFiltering("option", "filterDropDownHeight", 30);

filterDropDownItemIcons

Type:: enumeration
Default:: true

Enable/disable filter icons visibility.

Members

true
Type:bool
All predefined filters in the filter dropdowns will have icons rendered in front of the text.
false
Type:bool
No icons will be rendered.

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDropDownItemIcons : false
						}
					]
				});
				// Get
				var showIcons = $(".selector").igGridFiltering("option", "filterDropDownItemIcons");
				// Set
				$(".selector").igGridFiltering("option", "filterDropDownItemIcons", false);

filterDropDownWidth

Type:: enumeration
Default:: 0

Width of the column filter dropdowns.

Members

string
Type:string
The width in pixels (0px).
number
Type:number
The width in pixels as a number (0).

Code Sample

 
				// Initialize
				$(".selector").igGrid({
					features: [
						{
							name : "Filtering",
							filterDropDownWidth : 100
						}
					]
				});
				// Get
				var width = $(".selector").igGridFiltering("option", "filterDropDownWidth");
				// Set
				$(".selector").igGridFiltering("option", "filterDropDownWidth", 100);

filterExprUrlKey

Type:: string
Default:: null

URL key name that specifies how the filtering expressions will be encoded for remote requests, e.g. &filter('col') = startsWith. Default is OData.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterExprUrlKey : "filter"
					}
				]
			});

			// Get
			var key = $(".selector").igGridFiltering("option", "filterExprUrlKey");

			// Set
			$(".selector").igGridFiltering("option", "filterExprUrlKey", "filter");

filterSummaryAlwaysVisible

Type:

bool

Default:

true
Enable/disable footer visibility with summary info about the filter.
When false, the filter summary row (in the footer) will only be visible when paging is enabled (or some other feature that renders a footer).
When true, the filter summary row will only be visible when a filter is applied i.e. it's not visible by default.
Code Sample
```
 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterSummaryAlwaysVisible : false
					}
				]
			});

			// Get
			var showSummary = $(".selector").igGridFiltering("option", "filterSummaryAlwaysVisible");

			// Set
			$(".selector").igGridFiltering("option", "filterSummaryAlwaysVisible", false);
			 
```

filterSummaryTemplate
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Summary template that will appear in the bottom left corner of the footer. Has the format '${matches} matching records'. Use option locale.filterSummaryTemplate.

Code Sample

 
			// Initialize
			$(".selector").igGrid({
				features: [
					{
						name : "Filtering",
						filterSummaryTemplate: "${matches} products found"
					}
				]
			});

			// Get
			var summaryTemplate = $(".selector").igGridFiltering("option", "filterSummaryTemplate");

			// Set
			$(".selector").igGridFiltering("option", "filterSummaryTemplate", "${matches} products");

inherit

Type:: bool
Default:: false

Enables/disables feature inheritance for the child layouts. NOTE: It only applies for igHierarchicalGrid.

Code Sample

 
			// Initialize
			$(".selector").igHierarchicalGrid({
				features: [
					{
						name: "Filtering",
						inherit: true
					}
				]
			});

			// Get
			var inherit = $(".selector").igGridFiltering("option", "inherit");

labels
Removed

Type:: string
Default:: "{}"

This option has been removed as of 2017.2 Volume release.
A list of configurable and localized labels that are used for the predefined filtering conditions in the filter dropdowns. Use option locale.