从 Ag-grid 中的数据库获取下拉列表过滤器

Question

In my interface im trying to add a filter to my FOLDER column which get the data from database and display them in a dropdown checkbox in that column and the filtering happens according to selected data. here is my interface:

I think that i have to use the cellEditor but im not sure how. here is 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>

Answer 1

Use cellEditorParams like follows.

 columnDefs= {
      headerName: "Opportunity area",
      field: "improvementArea",
      cellEditor: "agSelectCellEditor",
      cellEditorParams: { values:getDropDownlist()
   }

getDropDownlist(){
     //service hit
     //fetch the dropdown values
}

In 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"
         [editType]="'fullRow'"
         singleClickEdit="true"
         [paginationPageSize]="10"
         [pagination]="true">                                    
   </ag-grid-angular>

I hope it will help.