jQWidgets jqxGrid getfilterinformation() Method

Last Updated : 29 Mar, 2023

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 getfilterinformation() method is used to return the details regarding the filters of the displayed jqxGrid. In other words, it returns an array of the stated filters. However, the details returned from this method involve the filter objects as well as the filter columns. It has no parameters and returns None.

Here, each of the filters in the Array possesses the below-given fields:

filter: It is an object of the filter that might hold one or more than one filter.

Properties and Methods of the filter object:

getfilters: It is a method and when it’s invoked an array of each and every filter in the filter object is returned.
value: It is a property of the filter object. It specifies the value of the filter.
id: This property specifies the id of the filter.
condition: This property specifies the condition of the filter. Where, the value for the String filter are ‘EMPTY’, ‘NOT_EMPTY’, ‘CONTAINS’, ‘CONTAINS_CASE_SENSITIVE’, ‘DOES_NOT_CONTAIN’, ‘DOES_NOT_CONTAIN_CASE_SENSITIVE’, ‘STARTS_WITH’, ‘STARTS_WITH_CASE_SENSITIVE’, ‘ENDS_WITH’, ‘ENDS_WITH_CASE_SENSITIVE’, ‘EQUAL’, ‘EQUAL_CASE_SENSITIVE’, ‘NULL’, ‘NOT_NULL. The value for the Date and Number filter are ‘EQUAL’, ‘NOT_EQUAL’, ‘LESS_THAN’, ‘LESS_THAN_OR_EQUAL’, ‘GREATER_THAN’, ‘GREATER_THAN_OR_EQUAL’, ‘NULL’, ‘NOT_NULL’. And the value for the Boolean filter are: ‘EQUAL’, ‘NOT_EQUAL’.
type: It is the type of filter. The possible values are ‘stringfilter’, ‘numericfilter’, ‘booleanfilter’ or ‘datefilter’.
operator: It is the operator which specifies the bond between the filters in the stated group. The possible values are ‘and’ or ‘or’.
datafield: It is the datafield of the specified column.
displayfield: It is the display field of the specified column.

Syntax:

var info = $('Selector').jqxGrid('getfilterinformation');

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 getfilterinformation() method in jQWidgets.

<!DOCTYPE html>

<html lang="en">

<head>

<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/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>

<script type="text/javascript"

src="jqwidgets/jqxgrid.columnsresize.js">

</script>

</head>

<body>

<center>

<h1 style="color: green">

GeeksforGeeks

</h1>

<h3>

jQWidgets jqxGrid getfilterinformation()

method

</h3><br />

<div id="jqxg"></div>

<div>

<input type="button"

id="jqxBtn"

style="margin-top: 25px"

value="Click here" />

</div>

<div id="log"></div>

</center>

<script type="text/javascript">

$(document).ready(function () {

var d = new Array();

var subjectNames =

["C++", "Scala", "Java", "C", "R", "JavaScript"];

var pageNumber =

["7", "8", "12", "11", "10", "19"];

for (var j = 0; j < 50; j++) {

var r = {};

r["subjectnames"] =

subjectNames[(Math.floor(

Math.random() * subjectNames.length))

];

r["pagenumber"] =

pageNumber[(Math.floor(

Math.random() * pageNumber.length))

];

d[j] = r;

}

var src = {

localdata: d,

datatype: "array",

};

var data_Adapter = new $.jqx.dataAdapter(src);

$("#jqxg").jqxGrid({

source: data_Adapter,

theme: 'energyblue',

filterable: true,

height: "260px",

width: "240px",

columns: [

{

text: "Subject Name",

datafield: "subjectnames",

width: "120px",

},

{

text: "Page No.",

datafield: "pagenumber",

width: "120px",

},

],

});

$("#jqxBtn").jqxButton({

width: "180px",

height: "30px",

});

var fg = new $.jqx.filter();

$("#jqxBtn").on("click", function () {

$("#jqxg").jqxGrid('addfilter', 'subjectnames', fg);

$("#jqxg").jqxGrid('applyfilters');

var gfi = $("#jqxg").jqxGrid('getfilterinformation');

var detail = "";

for (var j = 0; j < gfi.length; j++) {

var Fg = gfi[j];

detail += Fg.filtercolumn;

}

$("#log").html("Filtered column's name: " + detail);

});

</script>

</body>

</html>

Output:

Example 2: The below is another example that illustrates the jqxGrid getfilterinformation() method in jQWidgets.

<!DOCTYPE html>

<html lang="en">

<head>

<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/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>

<script type="text/javascript"

src="jqwidgets/jqxgrid.columnsresize.js">

</script>

</head>

<body>

<center>

<h1 style="color: green">

GeeksforGeeks

</h1>

<h3>

jQWidgets jqxGrid getfilterinformation()

method

</h3><br />

<div id="jqxg"></div>

<div>

<input type="button"

id="jqxBtn"

style="margin-top: 25px"

value="Click here" />

</div>

<div id="log"></div>

</center>

<script type="text/javascript">

$(document).ready(function () {

var d = new Array();

var subjectNames =

["C++", "Scala", "Java", "C", "R", "JavaScript"];

var pageNumber =

["7", "8", "12", "11", "10", "19"];

for (var j = 0; j < 50; j++) {

var r = {};

r["subjectnames"] =

subjectNames[(Math.floor(

Math.random() * subjectNames.length))

];

r["pagenumber"] =

pageNumber[(Math.floor(

Math.random() * pageNumber.length))

];

d[j] = r;

}

var src = {

localdata: d,

datatype: "array",

};

var data_Adapter = new $.jqx.dataAdapter(src);

$("#jqxg").jqxGrid({

source: data_Adapter,

theme: 'energyblue',

filterable: true,

height: "230px",

width: "240px",

columns: [

{

text: "Subject Name",

datafield: "subjectnames",

width: "120px",

},

{

text: "Page No.",

datafield: "pagenumber",

width: "120px",

},

],

});

$("#jqxBtn").jqxButton({

width: "180px",

height: "30px",

});

var add_filter = function () {

var fg = new $.jqx.filter();

var val = 'ja';

var conditn = 'contains';

var opratr = 2;

var fltr =

fg.createfilter('stringfilter', val, conditn);

fg.addfilter(opratr, fltr);

$("#jqxg").jqxGrid('addfilter', 'subjectnames', fg);

$("#jqxg").jqxGrid('applyfilters');

}

$("#jqxBtn").on("click", function () {

add_filter();

var gfi = $("#jqxg").jqxGrid('getfilterinformation');

var details = "";

for (var j = 0; j < gfi.length; j++) {

var Fg = gfi[j];

details += Fg.filtercolumn;

var f = Fg.filter.getfilters();

for (var k = 0; k < f.length; k++) {

details += ", \nValue to be filtered: " + f[k].value;

details += ", \nCondition applied: " + f[k].condition;

details += ", \nOperator used: " + f[k].operator;

}

$("#log").html("Column to be filtered: " + details);

});

</script>

</body>

</html>

Output:

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

Here's a complete roadmap for you to become a developer: Learn DSA -> Master Frontend/Backend/Full Stack -> Build Projects -> Keep Applying to Jobs

And why go anywhere else when our DSA to Development: Coding Guide helps you do this in a single program! Apply now to our DSA to Development Program and our counsellors will connect with you for further guidance & support.

Like Article

Suggest improvement

Share your thoughts in the comments

jQWidgets jqxGrid getfilterinformation() Method

jQWidgets jqxGrid getfilterinformation() Method

Recommend

5 Cheap Ryobi Substitutes If You're Shopping For Power Tools

RIO微醺×林黛玉：我在人间黛醉上班

Airbnb dominates in search sentiment report

早报|华为 Pura 70 / Pro+ 开售/ 雷军称着急购车可考虑智界蔚来小鹏/ 理想汽车宣布降...

号称全球最环保浏览器，Ecosia 浏览器登场

口子窖，成也高端，困也高端

1H 2024 - Release highlights of SuccessFactors Suc... - SAP Community

How The Higgins Boat Helped The Allies Win WWII

设计工具必备的几个图片编辑助手分享给你！

Zuckerberg opens up Meta Quest operating system to third-parties

About Joyk