Client-side filtering of jqGrid with multiple conditions

I am faced with a challenge in filtering records in a jqGrid based on multiple conditions.

For example, if there are columns for Name, Age, and City, and I need to filter the grid using the following condition:

Name = "Mark" and Age = 25 and City = 'NY'

The code below effectively filters the records-

 var grid = jQuery("#memberDetails");
 var postdata = grid.jqGrid('getGridParam', 'postData');

 var filterArray = new Array();
 var filterCondition; 

 filterCondition = new Object();
 filterCondition.field = "name";
 filterCondition.op = "eq";
 filterCondition.data = "Mark";
 filterArray.push(filterCondition);

 filterCondition = new Object();
 filterCondition.field = "Age";
 filterCondition.op = "eq";
 filterCondition.data = "25";
 filterArray.push(filterCondition);

 filterCondition = new Object();
 filterCondition.field = "City";
 filterCondition.op = "eq";
 filterCondition.data = "NY";
 filterArray.push(filterCondition);

 jQuery.extend(postdata, {
        filters: {
            "groupOp": "and",
            "rules": filterArray
        }
    });

 grid.jqGrid('setGridParam', {
            search: true,
            postData: postdata
    });

 grid.trigger("reloadGrid", [{
        page: 1
    }]);

However, I am unsure how to implement the following more complex filter:

Name = "Mark" and Age = 25 and (City = 'NY' OR City = 'FL')

The groupOp currently only supports AND or OR conditions, making it challenging to include sub-conditions within the main condition.

Any suggestions would be greatly appreciated. Thank you.

javascriptjqgrid

Answer №1

The documentation outlines the format of filters for implementing advanced search criteria using the groups property. Below is an example of how this can be implemented:

var $grid = $("#memberDetails");

$.extend($grid.jqGrid("getGridParam", "postData"), {
    filters: JSON.stringify({
        groupOp: "AND",
        rules: [
            { field: "Name", op: "eq", data: "Sarah" },
            { field: "Age",  op: "gt", data: "30" }
        ],
        groups: [
            {
                groupOp: "OR",
                rules: [
                    { field: "City", op: "eq", data: "LA" },
                    { field: "City", op: "eq", data: "SF" }
                ],
                groups: []
            }
        ]
    })
});
$grid.jqGrid("setGridParam", {search: true})
     .trigger('reloadGrid', [{current: true, page: 1}]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What's the source of this undefined error and is there a way to eliminate it from the code?

After successfully filtering and reducing the data, I encountered an issue with undefined. I am trying to figure out what is causing this and how I can either remove it or make it visible on the screen without being invisible. You can also check the codes ...

javascriptreactjsjson

Troubleshooting date range validation in jQuery

I am facing an issue in my code where I have a set of start and end date fields that need to be validated to ensure the start date comes before the end date. I am currently using the jQuery validation plugin for this purpose. For reference, here is the li ...

javascriptjqueryvalidationjquery-validate

Retrieve an element generated by a React script without using the ref attribute

There is a chat button on my website generated by a script (zendesk chat) that creates an iframe with the ID "launcher". I am using Nextjs and I am trying to access this element, but I am unable to attach a ref since I do not have the code. I have been sea ...

javascriptreactjsnext.jsref

Guide to dynamically resizing the Monaco editor component using react-monaco-editor

Currently, I am integrating the react-monaco-editor library into a react application for viewing documents. The code snippet below showcases how I have set specific dimensions for height and width: import MonacoEditor from 'react-monaco-editor'; ...

javascriptreactjstypescriptmonaco-editor

Decompressing an array within a function invocation

Is there a method to pass an array's elements as arguments to a function? For instance, in Python I can accomplish this using: user = ["John", "Doe"] def full_name(first_name, last_name): return first_name + last_name Therefore, full_name(*user ...

javascripttypescript

Creating beautiful prints with images

I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...

javascripthtmlcssajax

Create a page turning effect in React that simulates scrolling a certain amount at a time

Is there a way to disable default scrolling and have the page automatically scroll to the next item? For example, if I have element2 below element1, how can I set it up so that when I scroll down once, the page scrolls directly to the position of element2 ...

javascriptcssreactjsscrollnodes

When attempting to update a task with the Microsoft Graph API, the server returned a 400 error code

Attempting to update a Task using the Graph API from an angular2 typescript app. Here is an example of my request - Request URL:https://graph.microsoft.com/beta/tasks/_1EKXXuN1UGInJ9yVHAjIpYAKuC2 Request Method:PATCH Request Body: { "createdBy":"f16 ...

javascriptasp.net.netajaxmicrosoft-graph-api

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

javascripthtmlangularjs

Dynamic reloading of a div with form data using jQuery's AJAX functionality

I am currently developing an online visitor chat software using PHP and MySQL. My goal is to load the page when the submit button is clicked. Submit Button ID: send Visitor ID: vid Chat ID: cid Below is the snippet of code for an Ajax request that I hav ...

javascriptphpjqueryhtmlajax

Can you identify the issue within this code that combines HTML5, CSS, and JavaScript?

I'm attempting to create a feature where, upon clicking a button, a hidden div will be revealed. However, my current implementation doesn't seem to be working. function reload(){ window.reload(); } function vis(x,z,a){ var xpar = docu ...

javascripthtmlcsswebhidden

Tips for validating a text field in React Material UI depending on the input from another text field

Currently, I am working with Material UI TextField and encountered an issue where I need to create a code that establishes a dependency between two textfields. For example, if I enter the number 4 in textfield one, then the number in textfield two should ...

javascriptreactjsecmascript-6material-uifrontend

The issues of cross-origin domains arise when utilizing iframes with src links originating from the server side

Encountering a cross-origin domain issue, receiving the following error while working with an iframe: candidateInterviewCtrl.js:39 Uncaught SecurityError: Blocked a frame with origin "http://localhost:9000" from accessing a frame with origin "http://local ...

javascriptangularjsiframe

JavaScript validation for basic "select" isn't functioning as expected

I need assistance with my simple "select" validation using JavaScript. The issue I am facing is that when validating the "select" element, it does not display the select options to users after a validation error occurs. "The select option is not re-enabl ...

javascripthtmlvalidation

How can we send state updates directly to a conditionally rendered React component?

I am currently developing a React application with a tab section that displays specific components upon clicking on a tab. Initially, I have my parent component: class Interface extends Component { constructor(props) { super(props); ...

javascriptreactjs

Ensure all fields are valid prior to performing an update

I'm currently faced with the challenge of validating my form data before executing an AJAX update. Essentially, what I want to achieve is to validate the input data in the form before triggering the ajax update function. I'm unsure about where to ...

javascriptjqueryajaxspringvalidation

Issue with React Google Maps Api: Error occurs while trying to access undefined properties for reading 'emit'

I'm trying to integrate a map using the google-map-react API, but I keep encountering the following error: google_map.js:428 Uncaught TypeError: Cannot read properties of undefined (reading 'emit') at o.r.componentDidUpdate (google_map.js: ...

javascriptreactjsapigoogle-mapsmaterial-ui

The AJAX callback resulted in the request being aborted and the window location being

I am currently working on implementing a client-side redirect for users who are deemed invalid. The server checks if the user has access to the current page, and if not, it returns {data: 'invalid'}. In the success callback of the ajax call, I va ...

javascriptjqueryajaxwindow.location

"Troubleshooting the lack of functionality in nested ajax calls, click events, or event

Initially, a navigation click event was created: $('#inner-navigation li a') .on('click', function (e) { e.preventDefault(); AjaxNavUrl.checkURL(this.hash); }); This event triggers an ajax call and respo ...

javascriptjqueryajax

How to create a manual mock for @material-ui withStyles in React using Jest

I have been experimenting with creating manual mocks for the @material-ui/core/styles module, specifically targeting the HOC known as withStyles. Initially, using an inline mock with jest.mock function worked flawlessly. However, when attempting to reloca ...

javascriptreactjsmockingjestjsmaterial-ui