I have Sorting and Filtering enabled in Ag-Grid, the Grid graphically shows me these options, but they do not work

Question

I am trying to implement a grid with ag-grid with sortable and filterable columns. The arrows and search fields show up, but they do not do anything.

To start, I enabled the sorting and filtering options in my tags and in my defaultColDefs. This didn't work, so I individually set sortable in columns which I wanted to sort. Afterwards, I tried writing a comparator. Neither of these options worked.

Of Note: The Data is being loaded in from a JSON

here is the HTML:

 <ag-grid-angular 
      style="width: 100%; height: 800px;" 
      id="myGrid"
      class="ag-theme-balham"
      [enableSorting] = "true"
      [enableFilter] = "true"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [components]="components"
      [rowBuffer]="rowBuffer"
      [rowSelection]="rowSelection"
      [rowDeselection]="true"
      [rowModelType]="rowModelType"
      [paginationPageSize]="paginationPageSize"
      [cacheOverflowSize]="cacheOverflowSize"
      [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
      [infiniteInitialRowCount]="infiniteInitialRowCount"
      [maxBlocksInCache]="maxBlocksInCache"
      [rowData]="rowData"
      [animateRows] = "true"
      (gridReady)="onGridReady($event)"
    >
    </ag-grid-angular>

Here is a bare bones ag-grid version of my component:

import { Component, OnInit } from '@angular/core';
import { DataService } from 'app/data-service';
import { Grid, GridOptionsWrapper, GridApi } from 'ag-grid-community';

@Component({
  selector: 'app-grid-form',
  templateUrl: './grid-form.component.html',
  styleUrls: ['./grid-form.component.css']
})
export class GridFormComponent implements OnInit {



//grid variables
  private title: string;
  private columnDefs;
  private defaultColDef;
  private rowData;
  private gridApi;
  private gridColumnApi;
  private components;
  private rowBuffer;
  private rowSelection;
  private rowModelType;
  private paginationPageSize;
  private cacheOverflowSize;
  private maxConcurrentDatasourceRequests;
  private infiniteInitialRowCount;
  private maxBlocksInCache;
  private currentDate:Date;
  private sortingOrder;

 ngOnInit() {
 this.defaultColDef = { 
      sortable: true,
      resizable: true,
      filter: true,
    };
    this.components = {
      loadingRenderer: function(params) {
        if (params.value !== undefined) {
          return params.value;
        } else {
          return '<img src="../images/loading.gif">';
        }
      }
    };
    this.rowBuffer = 0;
    this.rowSelection = "multiple";
    this.rowModelType = "infinite";
    this.paginationPageSize = 100;
    this.cacheOverflowSize = 2;
    this.maxConcurrentDatasourceRequests = 1;
    this.infiniteInitialRowCount = 1000;
    this.maxBlocksInCache = 10;
    this.title = 'User Report Grid'
    this.columnDefs = [

      {
        headerName: "NUM User",
        field: "numUser",
        width: 50
        },
      {
        headerName: "ID Customer",
        field: "idCustomer",
        width: 150,
        sortable: true,
      },
      {
        headerName: "ID Event",
        field: "eventId",
        width: 100,
        filter: "agTextColumnFilter",
        sortingOrder:["asc", "desc"]
     },
    ];


  }

onGridReady(params){
    this.loadGrid(params);
  }

  private loadGrid(params){
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;


    this.dataService.getGridData(this.resourcePath, this.paramets).subscribe(
      data =>{
        var dataSource = {
          rowCount: null,
          getRows: function(params){
            setTimeout(function(){
              var rowsThisPage = data.slice(params.startRow, params.endRow);
              var lastRow = -1;
              if(data.length <= params.endRow){
                lastRow = data.length;
              }
              this.caller = params.successCallback(rowsThisPage, lastRow);
            }, 500);
          }
        };
        params.api.setDatasource(dataSource);
      }
    );
  }

The wierd thing is that the arrows and search options do exist in the grid. It's just that using them doesn't change the grid in any way.

I would very much appreciate some help with this, as I don't understand why this is happening and already answered questions and forums have not been helpful. Thank you.

NobiliChili NobiliChili · Accepted Answer · 2019-07-17T08:06:41

The issue is that infinite scrolling does not support any of these extra features, even though it was client-side. Changing the model to Client-Side and adding Pagination fixed my issues.

I have Sorting and Filtering enabled in Ag-Grid, the Grid graphically shows me these options, but they do not work

1 Answers