How can we access parameters in ag-Grid's Angular 1 onFilterModified event?

Currently, I am incorporating grid options using the code snippet provided below:

var gridOptions = {
columnDefs: columnDefs,
rowData: null,
enableFilter: true,
onFilterChanged: function() {console.log('onFilterChanged');},
onFilterModified: function() {console.log('onFilterModified');}
};

However, I am encountering an issue with the onFilterModified event where I am unable to retrieve parameters or filter details.

If anyone has any suggestions or insights on this matter, please feel free to share.

javascriptangularjsag-grid

Answer №1

Here is my approach.

function handleFilterChange() {
    console.log($scope.gridOptions.api.getFilterModel());
}

In the configuration of gridOptions...

onAfterFilterUpdate: function () { handleFilterChange(); },

Answer №2

To retrieve the filter model, use the method 

$scope.gridOptions.api.getFilterModel()
. If you need to get the filter model after any change, simply call this method within the onFilterModified callback function like so:
$scope.gridOptions = {
    ...
    onFilterModified: function(event){
        console.log($scope.gridOptions.api.getFilterModel())
    }
}

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

Tips for updating the appearance of a ListItem with a click action

For my current project, I am using Material UI and React. One of my components is structured as follows: import React, { Component } from 'react'; import { List, ListItem } from 'material-ui'; import PropTypes from 'prop-types&apo ...

javascriptreactjsmaterial-ui

Unable to adjust image opacity using jQuery

I am attempting to change the opacity of an image based on a boolean flag. The image should have reduced opacity when the var pauseDisabled = true, and return to full opacity when pauseDisabled = false. To demonstrate this, I have created a fiddle below. ...

javascriptjqueryhtmlcssopacity

Tips on converting HTML code into a data image URI

My question may seem unconventional, but here is what I am trying to accomplish. I want to create a design similar to the one found at the following link: I would like to embed text with an image and retrieve the data image URL using Ajax. I know how to g ...

javascriptjqueryajaxdata-uri

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

When working with images, it can be tricky to set the original width while also ensuring it fits within a parent container. For example, if the parent container has a width of 1000px, you may want the image to have a max-width of 100%, but not exceed 1000p ...

javascriptcssimage

creating unique marker shapes with angular google maps

I am currently integrating the angular google maps directive (found at http://angular-ui.github.io/angular-google-maps/) into my application. In the process of converting my code to work with this directive, I have encountered an issue while trying to appl ...

angularjsgoogle-mapsgoogle-maps-api-3angular-google-maps

Every time I execute my program, it consistently displays a 500 error message when using both the POST and GET

I'm seeking assistance with mvvm as I am new to it. Can anyone help me in displaying details based on the selected date? Upon running my code, I encounter a 500 error with both the post and get methods. Schedule.cshtml <div class="col-lg-8" ng-ap ...

c#angularjsmvvmtypescript

Angular service providing a subset of resource data

I am currently working with an Angular factory called DogePrice: .factory('DogePrice', ['$resource', function ($resource) { return $resource("https://chain.so/api/v2/get_info/DOGE"); }]) Usually, the API response looks like this: ...

javascriptangularjsangular-promiseangular-resourceangular-providers

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

I am looking to create two similar pages, each with different percentages. However, when I try modifying the JS or changing class/ID names, it keeps pulling data from the first SPAN element. http://jsfiddle.net/K62Ra/ <div class="container"> <di ...

javascriptjqueryhtmlcss

How can you switch the property of an object in VueJS?

I am currently working with an array called cars, which contains names of cars as well as a property called starred. My goal is to toggle the value of starred between true and false for each car, ensuring that only one car can have starred set to true at a ...

javascriptvue.jsvuetify.js

Using AJAX in JavaScript within an HTML document is a valuable skill to have

I have the following JavaScript function that I need to call the /print2 function without clicking any buttons. I attempted to use Ajax for this, but I am new to Ajax and JavaScript. Can you help me identify where the issue might be? Thank you... <scr ...

javascripthtmlajax

Guide on incorporating jQuery into a jQuery plugin within an Angular 2+ application using Webpack or Angular CLI

I'm running into an issue importing a jQuery plugin into a single Angular component. It works fine in most browsers, but IE 11 is giving me this error: SCRIPT1002: Syntax error main.bundle.js (1376,1) When I investigate the error, it points me to th ...

javascriptjqueryangularwebpackangular-cli

The request.body in Express.js is currently undefined

const express = require('express'); const cors = require('cors'); const app = express(); app.use(express.json()) app.use(cors()); app.post('/', (req,res) => { console.log(req.body); res.send('received') ...

javascriptnode.jsexpressaxiosfetch

Is there a way to incorporate additional text into option text without compromising the existing values?

One challenge I'm facing is adding additional text to the options without changing their values upon selection. Would you be able to assist me with resolving this issue? I have come across the following HTML code: <select id="q_c_0_a_0_name"> ...

javascripthtmljqueryhtml-select

Creating a JSON data array for Highcharts visualization: rearranging values for xAxis and columns

I am facing an issue with my column chart where JSON data is being parsed in the "normal" form: Years are displayed on the xAxis and values on the yAxis (check out the fiddle here): array( array( "name" => "Bangladesh", ...

javascriptarraysjsonhighcharts

What is the process for validating observations with an observer confirmation?

Can you explain what the of() function creates in this scenario and how it operates? public onRemoving(tag): Observable<any> { const confirm = window.confirm('Do you really want to remove this tag?'); return Observable.of(tag).fil ...

javascriptangulartypescript

Receiving partial data through the API

My PHP API seems to be experiencing issues when I send data to it using either a post or get request. The strange thing is that the API receives only half of the data. This API functions perfectly fine on localhost, but encounters errors when used on the p ...

javascriptphphtmlapi

Is there a way to prevent redundancy when exporting functions in Node.js?

Is there a way to avoid repeating module.exports or usuariosControllers when writing a small API in express for fun? module.exports.getUsuarios = (request, response) => {}; module.exports.crearUsuario = (request, response) => {}; module.exports. ...

javascriptnode.jsexpress

Switching over to styled components from plain CSS using a ternary operator

Currently, I am in the process of converting my project from using regular CSS to styled components (https://styled-components.com/). So far, I have successfully converted all my other components except for one that I'm having trouble with. I've ...

javascriptcssreactjsmaterial-uistyled-components

a gentle breeze gathers a multitude of entities rather than items

When utilizing a restful server with node.js and sending a collection of entities wrapped in one entity object (Lookups), everything seems to be functioning properly. However, the issue arises when breeze views the entities in the collection as plain objec ...

javascriptnode.jsbreeze

Displaying random divs and subsequently animating them downwards using JavaScript

I am in the process of creating a random appearing div that then falls down. Here is the code I have so far: $(document).ready(function(){ $('#test').animate({top: 80 + '%'},900); }); <div id="test" style="background:#98bf21;heigh ...

javascriptjqueryhtmlcss