Tips on utilizing ag-grid's built-in column filtering to sort merged values

I am having trouble with the column filtering in my table. When I combine values to display as a title in the title column, the built-in column filter is not returning any results when I try to search for something. I'm wondering what I might be doing wrong here and why the column filtering doesn't work for combined values. Can anyone help me with this issue?

title: {
                minWidth: 90,
                cellClassRules: {
                    'completedFieldClass': function(params) {
                        return params.value && params.value.completed;
                    }
                },
                cellStyle: getCellStyle,
                cellRenderer: function(params) {
                    var prqId = params.data.id;
                    var type = (!!params.data.type) ? params.data.type.value + ': ' : '';
                    var desc = (!!params.data.id) ? '- '+params.data.description : '';

                    if(!!params.data.access){
                        var concatTitle = '<a>';
                        concatTitle = concatTitle + '<strong>'+type+'</strong><span>'+params.value.value+'</span>';
                        concatTitle = concatTitle + '<span>'+desc+'</span></a>';
                        return concatTitle;
                    } else{
                        var concatTitle = '<span class="notprint">';
                        concatTitle = concatTitle + '<strong>'+type+'</strong><span>'+params.value.value+'</span>';
                        concatTitle = concatTitle + '<span>'+desc+'</span></span>';
                        return concatTitle;
                        //return '<span class="notprint">' + modValue + ''+ configDesc +'</span>';
                    }
                },
                sortable: false
            },

Any suggestions or solutions would be greatly appreciated. Thank you!

javascriptangularjsag-grid

Answer №1

If you want to customize the default filters in your grid, you have a couple of options. You can either create a Custom Filter, or use a valueGetter.

For your specific scenario, using a valueGetter may be the simplest solution. Here's an example:

...
cellStyle: getCellStyle,
valueGetter: function(params) {
    // You can add your own custom logic here
    return params.data.id + params.data.access; 
},
cellRenderer: function(params) {
...

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

Merge the values of an object's key with commas

I'm dealing with an array of objects that looks like this: let modifiers = [ {name: "House Fries", price: "2.00"}, {name: "Baked Potato", price: "2.50"}, {name: "Grits", price: "1.50"}, {name: "Nothing on Side", price: "0.00"} ] My goal is to con ...

javascriptarraystypescriptobjectconcatenation

What is the best way to transfer a JS variable into a MySql database?

I have a JavaScript variable named count that I want to store in my MySQL database. let count = 0; countup.addEventListener("click", function() { count = count + 1; counter.innerText = count; let avgberechnung = count / 365; avg.innerText ...

javascriptphpmysql

Show a collection of elements containing attributes in JSX

I have a React component where I am displaying data from an array called pkgData: <div className="mainApp"> <div className="pkgsList"> {pkgData.map((p) => <h3 key={p.name}>{p.name}</h3> ...

javascripthtmlreactjsjsx

Optimal approach for displaying information on a webpage using AJAX requests

When it comes to loading details of an item on-click within a pre-defined div, I have two different approaches in mind. Note: Backed by Python/Django and utilizing jQuery on the frontend Option I Views.py def retrieve_item_data(id): obj = MyClass.o ...

javascriptjquerypythonajaxdjango

How can I eliminate the #!/ (bang prefix) from the URL in AngularJS?

I have implemented the $locationProvider.html5Mode(true); function but unfortunately, it does not seem to be working as expected. When I try to access http://example.com, the URL automatically redirects to http://example.com/#!/. Below is the snippet of th ...

angularjsroutesangular-ui-routerangularjs-1.6

Is there a way to segregate method calls when there are two distinct paths that lead to the same destination?

Currently, I am in the process of creating an express app that consists of a login page, a signup page, and a display page. Both the signup and login pages redirect to the display page where only the username is displayed. However, I am interested in findi ...

javascriptnode.jsexpresspostejs

Troubleshooting: The Jquery each loop is malfunctioning

I am new to using jquery and I have encountered a problem in my project. I am attempting to iterate through all the links within the #rate_box and attach a click event to them. This click event is supposed to send data to an external php script, then remov ...

javascriptjqueryajaxbind

Dynamic array of objects in Angular using ng-repeat

When given a JSON array of objects, how can one dynamically display it using ng-repeat? The key error is static and always remains the same. Only the values of error change. For example, if the password field has an error, then the key will be password in ...

javascriptangularjsjsonmultidimensional-array

Having issues with my custom AngularJS directive functionality

app.directive("myData", function() { return { templateUrl: '/my-data.html' }; }); my-data.html file code <tr ng-repeat="employee in employees"> <td>{{employee.id}}</td> <td>{{employee.name}}</t ...

javascriptangularjsweb-services

What is the best way to retrieve multiple elements within a handlebars helper block in a node.js application?

I am working with an object structured like this: object = { "group_1": [ { "name": "Foo" } ], "group_2": [ { "name": "Bar" } ] } In my Handlebars view, I currently have the following setup: {{#each group_1}} <p>{{name}}</p&g ...

javascriptnode.jsnpmhandlebars.jsnode-modules

How can you utilize a previously opened window from another page in JavaScript?

One of my challenges involves managing windows in a JavaScript environment. When I open a child window using window.open("http://foobar","name"), it reuses the same window when opened with the same name, which is exactly what I want. However, if the origi ...

javascriptwindow.open

Retrieve the observable value and store it in a variable within my Angular 13 component

Incorporating Angular 13, my service contains the following observable: private _user = new BehaviorSubject<ApplicationUser | null>(null); user$ = this._user.asObservable(); The ApplicationUser model is defined as: export interface ...

javascriptangulartypescript

Stop Swiper Slide from moving when clicked on

I am currently utilizing Swiper JS and have encountered an issue. In my Swiper slider, each slide contains a button. Whenever I click on the slide or the button itself, the slide becomes the active one, causing the entire slider to move. Is there a way to ...

javascripthtmlvue.jsswiper.js

Just released a new npm package called vue-izitheme. It's fully functional from the command line, but for some reason it's not showing up in search results. Any suggestions on how to fix

I released my project, vue-izitheme, two days ago but I can't seem to find it when searching. It is functioning correctly from the command line and has already been downloaded 44 times. Do you have any thoughts on what could be causing this issue? ...

javascriptvue.jsnpmpluginsthemes

Initiate the printing process by executing the window.print() function. As the document is being

Here's the code snippet : <body> <div class="headerCont noprint"> <div class="headerHold"> <div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"> ...

javascripthtmlcssprinting

Experiencing an issue with excessive re-renders in React as it restricts the number of renders to avoid getting stuck in an infinite loop while attempting to

I am working with a React component import React, {useState} from 'react'; function App() { const [number, setNumber] = useState(12); return ( <> <h1>The number value is: {number}</h1> <div className=" ...

javascriptreactjs

The baffling quirks of variables within a Jquery loop

Unfortunately, I'm struggling to come up with a more fitting title for my question, but I'll do my best to provide a clear explanation of my issue. Here is the code snippet I am working with: let pdfInvoice_sub_template = [ {text: '{ ...

javascriptjqueryobject

assign a JSON key to a variable

Is there a way to use a variable as a JSON key in JavaScript? var chtid = "1234" firebase.database().ref().set ({chtid :"hi"}); In this case, chtid is the variable. I have attempted this method without success: var chtid = "1234" firebase.database().re ...

javascriptangularjsjson

Guide on triggering a modal upon receiving a function response in React

I am looking for a way to trigger a function call within a response so that I can open a modal. Currently, I am utilizing Material UI for the modal functionality. Learn more about Modals here The process involves: Clicking on a button Sending a request ...

javascriptreactjsmaterial-ui

The PHP code encountered a syntax error due to an unexpected $EOF on the final empty line

I've been tasked with maintaining an old website that went offline due to script errors. I managed to resolve most of the issues in the script, but there's one error that's giving me trouble. The site is showing a syntax error that says "une ...

javascriptphphtmlsyntaxeof