jQWidgets jqxGrid filter Property

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxGrid is used to illustrate a jQuery widget that shows data in tabular form. Moreover, it renders full support for connecting with data, as well as paging, grouping, sorting, filtering, and editing.

The filter property is a callback function that is used to customize filtering. It is used to override the filtering that is inbuilt. This property is invoked whenever the grid is filtered. It renders a value of type boolean or returns "undefined". It is of function type and its default value is "null".

Syntax:

• Set the filter property:

$('Selector').jqxGrid({ filter: null });

• Return the filter property:

var filter = $('Selector').jqxGrid('filter');

The values that this function can hold are as follows.

• cellValue: It is the present value of the cell.
• rowData: It is a JSON object that holds the data of the present row.
• dataField: It is the data field of the filter column.
• filterGroup: It is the group of the stated filters.
• defaultFilterResult: It is the stated default result of the filter.

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>

Example 1: The below example illustrates the jqxGrid filter property in jQWidgets.

Output:

Example 2: Below is another example that illustrates the jqxGrid filter property in jQWidgets by setting its value as "null".

Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm?search=