Obtain a filtering dropdown list directly from the database within Ag-grid

Currently in my interface, I am attempting to implement a filter for the FOLDER column. This filter is supposed to retrieve data from the database and present it in a dropdown checkbox within that column. The filtering should be based on the selected data. Here is a snapshot of my interface: https://i.sstatic.net/5StRY.png

I believe that using cellEditor may be the way to go, but I'm uncertain about how to proceed. Here is a snippet of my code:

deals.component.ts : 

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Grid, GridApi } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';

import { DealsService } from '../services/deals.service';
import * as moment from 'moment';
@Component({
  selector: 'app-deals',
  templateUrl: './deals.component.html',
  styleUrls: ['./deals.component.scss']
})
export class DealsComponent implements OnInit {
  private gridApi;

  gridOptions = {
    rowHeight :90,
    headerHeight:60,
    enableFilter: true,
    defaultColDef: {
      sortable: true
  },
  }
  columnDefs = [

    {headerName: 'Block' ,field:'BLOCKID',width:200, resizable:true,  filter: 'agNumberColumnFilter'} ,

    {headerName: 'Deal' ,field:'DEALID',width:200, resizable:true,    } ,
    {headerName: 'Deal Class' ,field:'DEALCLASS',width:200, resizable:true,  } ,
      {headerName: 'Instr Class' ,field:'INSTRCLASS',width:200, resizable:true,  } ,

     // {headerName: 'Trade \n Start',cellRendererFramework: DateCellRendererComponent ,width:210, resizable:true,  filter: 'agDateColumnFilter' } ,
      {headerName: 'Trade', field : 'TRADEDATE', valueFormatter : this.dateFormatter ,width:150, resizable:true,  filter : 'agDateColumnFilter', filterParams: {          //inRangeInclusive: true,
        comparator: function(filterLocalDateAtMidnight, cellValue) {
        //using moment js
        var dateAsString = moment(cellValue).format('DD/MM/YYYY');
        var dateParts = dateAsString.split("/");
        var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

        if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
        return 0
        }

  if (cellDate < filterLocalDateAtMidnight) {
    return -1;
    }

    if (cellDate > filterLocalDateAtMidnight) {
    return 1;
    }
    }
    }}   ,
    {headerName: 'Start', field : 'STARTDATE', valueFormatter : this.dateFormatter ,width:200, resizable:true,  filter : 'agDateColumnFilter', filterParams: {          //inRangeInclusive: true,
      comparator: function(filterLocalDateAtMidnight, cellValue) {
      //using moment js
      var dateAsString = moment(cellValue).format('DD/MM/YYYY');
      var dateParts = dateAsString.split("/");
      var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

      if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
      return 0
      }

      if (cellDate < filterLocalDateAtMidnight) {
      return -1;
      }

      if (cellDate > filterLocalDateAtMidnight) {
      return 1;
      }
      }
      }}   ,

  {headerName: 'Folder' ,field:'FOLDERSHORTNAME',valueGetter: function(params) {
    return params.data.FOLDERSHORTNAME;
  },width:130, resizable:true},
  {headerName: 'Cpty' ,field:'CPTYSHORTNAME',width:200, resizable:true} ,
  ,
  {headerName: 'ShortName \n Name', cellRenderer: function(params){  return   params.data.INSTRSHORTNAME + '<br/>' + params.data.INSTRNAME },width:200, resizable:true,  filter: true, } ,

  {headerName: 'Quantity \n Settl.Amt',cellRenderer: function(params){  return   params.data.QUANTITY + '<br/>' + params.data.SETTLEAMT + '\n'+ params.data.SETTLECURRENCIESSHORTNAME },width:200, resizable:true,  filter: 'agNumberColumnFilter'} ,
  {headerName: 'Rate \n Fees', cellRenderer: function(params){  return   params.data.FLOATINGRATESSHORTNAME + '<br/>' + params.data.RENTSPREADFIXEDRATE },width:200, resizable:true,  filter: true} ,
  {headerName: 'Category \n Type',cellRenderer: function(params){  return   params.data.DEALCAT + '<br/>' + params.data.DEALTYPE },width:200, resizable:true,  filter: true} ,
  {headerName: 'End', field : 'ENDDATE', valueFormatter : this.dateFormatter ,width:200, resizable:true,  filter : 'agDateColumnFilter', filterParams: {
    //inRangeInclusive: true,
    comparator: function(filterLocalDateAtMidnight, cellValue) {
    //using moment js
    var dateAsString = moment(cellValue).format('DD/MM/YYYY');
    var dateParts = dateAsString.split("/");
    var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

    if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
    return 0
    }

    if (cellDate < filterLocalDateAtMidnight) {
    return -1;
    }

    if (cellDate > filterLocalDateAtMidnight) {
    return 1;
    }
    }
    }}   


];

rowData : any;

constructor(private service:DealsService) {



}
dateFormatter(params){
return moment(params.value).format('DD/MM/YYYY');
}



ngOnInit() {
this.service.getDealsList().subscribe(data => {
  this.rowData = data;
});    }

}

and here is the deals.component.html : 

<ag-grid-angular class="ag-theme-balham" ng-grid="gridOptions"
     style="width: 2550px; height: 1080px;"
     class="ag-theme-alpine"
     [rowData]="rowData"
     [columnDefs]="columnDefs"
     [gridOptions]="gridOptions"
     [animateRows]="true"


     [paginationPageSize]="10"
     [pagination]="true">


 </ag-grid-angular>
javascriptangulartypescriptfilterag-grid

Answer №1

To implement cellEditorParams, use the code snippet below.

 columnDefs= {
      headerName: "Area of Focus",
      field: "improvementArea",
      cellEditor: "agSelectCellEditor",
      cellEditorParams: { values:getDropdownList()
   }

getDropdownList(){
     //make a service call
     //retrieve dropdown values
}

For HTML implementation:

    <ag-grid-angular class="ag-theme-balham" ng-grid="gridOptions"
         style="width: 2550px; height: 1080px;"
         class="ag-theme-alpine"
         [rowData]="rowData"
         [columnDefs]="columnDefs"
         [gridOptions]="gridOptions"
         [animateRows]="true"
         [editType]="'fullRow'"
         singleClickEdit="true"
         [paginationPageSize]="10"
         [pagination]="true">                                    
   </ag-grid-angular>

This solution should be beneficial to you.

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

Encountering a `Syntax Error` in a Jade view

I am attempting to create a basic chat application using the simple jade view engine with express. Upon running my app, I encountered a syntax error in the following view code, even though it seems quite straightforward. extends layout block scrip ...

javascriptnode.jsexpresspug

What is the best way to update the value of an input in a child component?

I have two files named person-input.ts and person-input.html What I want to achieve is that when inside the AddPerson function in person-input.ts, I would like to dynamically modify the name-input component by setting [focused]="true" So, the code needs ...

angular

Validation does not occur once the data has been loaded

I developed a function that calculates the percentage of form completion. However, I am encountering an issue where when editing an existing record, the validation does not kick in until data is edited in one of the inputs. <div ng-form="dtform" class ...

javascriptangularjsformsvalidation

What is the best way to save the value returned by a foreach loop into an array and then send two responses

After attempting to store the doctor details in an array and display the appointment and doctor Name Value response, I encountered a problem. The Appointment value is successfully achieved, but the doctor Name Value appears empty even though it shows in th ...

javascriptreactjsmongodbreact-nativeexpress

Issue: Import statement cannot be used outside a module in Appium

Encountering the following error while working on a colleague's laptop, so it appears that there is no issue with the code itself. It could be related to my local packages but I am not entirely certain. node version: v18.20.1 npm version : 10.5.0 impo ...

node.jstypescriptwdio

Application Initialization Error: appInits is not a valid function

When my Angular v17 application starts, I need to set some important values right away. This is how it's done in app.config.ts: export const appConfig: ApplicationConfig = { providers: [ ConfigService, ... { pr ...

angulartypescriptangular17app-initializer

Creating an HTML table using an array of objects

I'm currently working on creating a function that will generate an HTML table from an array of objects. The array provided below is what I need to convert into a table. let units = [ { 'code': 'COMP2110', &apos ...

javascripthtmlarrays

Caching HTML5 videos in Google Chrome

I am currently in the process of building a website and have successfully added an HTML5 video. However, I encountered an issue when attempting to change the video file in the background for users to upload a new one. Despite updating the video URL, Chro ...

javascripthtmlgoogle-chromecachingvideo

Exploring TypeScript nested interfaces and types within VSCode

I often find myself hovering over functions or objects in VSCode with TypeScript to inspect their type. However, many times the types and interfaces of these objects are dependent on other interfaces and types, making it difficult to get detailed informat ...

typescriptvisual-studio-code

Discover the paths to locate all keys within an object that correspond to a specified string

I need help creating a function in plain JavaScript that can find all paths to keys with a specific name in an object. The object may have repeated key names at different depths. Here is an example: const obj = { stuff: { A: 'text' ...

javascriptecmascript-6

What is the best way to display a JavaScript object array on the screen

As someone who is new to JavaScript, I have a JavaScript object array that I would like to print the values of in the browser. However, I am unsure of how to do this without using document.write(vehicle); var vehicle = [{name:'Van',wheel:4,cha ...

javascripthtmlarraysobjectprinting

Generating a component and rendering it according to the dynamic route parameters using mapStateToProps and reselect techniques

I have set up a global app container to store data for different rooms, with a sub-container called roomDetails that utilizes a reselect selector to pick a room from the global state based on ownProps.params.slug. This process is accomplished through mapSt ...

javascriptreactjsreduxreact-reduxreselect

How come React-Native isn't displaying successfully retrieved data using Axios?

I recently installed axios using the command below: npm i axios After writing the code below, I encountered an issue where React-Native doesn't display any data or throw any errors: import React, {useState, useEffect} from 'react'; import a ...

javascriptreactjsreact-nativeaxios

Adding retrieved ejs elements

Aim: I am struggling with a button that triggers a function to fetch more items from my Mongoose DataBase and display them in a table row dynamically. I am using the get method to retrieve data from the server side. Despite referring to advice from this po ...

javascriptexpressappendejsfetch-api

The aesthetic of the material tree design is not being reflected as expected

I am attempting to recreate the material tree example showcased here. This is the desired outcome: https://i.sstatic.net/dnkm2.png However, my result appears like this: https://i.sstatic.net/JXdbo.png Below is the HTML code I am utilizing: <mat-tr ...

angulartypescriptangular-material

Simple Steps to View Angular Logs in Terminal

Upon initializing my Angular project, I utilized the npm start command to kickstart the application. The console.log() function displays logs exclusively in the browser console window. Is there a way to view these logs in the terminal window? ...

angular

The project needs to either compile a comprehensive list of all files or adhere to an 'include' pattern

When working in VSCode, I came across this warning: https://i.sstatic.net/jvUsk.png The line of code that triggered the TypeScript warning is: import packageJson from "../package.json"; Interestingly, the project builds and lints without any issues: $ ...

typescripttslint

"Redirecting to an HTML page from the POST method is not supported in the Flask backend and Vanilla JS frontend setup

Utilizing the selected dropdown value from the frontend to perform calculations on the backend, resulting in an HTML page being returned. It's worth noting that no response is needed from the POST method, such as using return jsonify. Currently, I am ...

javascriptpythonhtmlflask

What steps can you take to resolve the "TypeError: Cannot read property 'id' of undefined" issue?

I have been developing an app that involves using databases to add items for users based on their user ID, which is their username. However, whenever I attempt to add an item, I encounter an error that I can't seem to troubleshoot. The error message r ...

javascriptnode.jsmongodbexpressmongoose

Alter the color of a single character using JQuery, all while keeping the HTML tags unchanged

I'm currently working on iterating through the DOM using JQuery in order to change the color of every occurrence of the letter m. Here is what I have so far: $(document).ready(function(){ var m = "<span style='color: red;'>m</span& ...

javascriptjqueryhtmldomdom-manipulation