ag grid - Aggrid setFilterModel syntax issue - Stack Overflow

admin管理员组

文章数量:1127170

I'm using Aggrid to display a large table with server-side rendering and custom sidebar filters. Sorting is working as expected, and with some cajoling, I've managed to get text filtering functional. However, I'm running into issues with filtering the number columns.

I found the following code online/prompt:

const onFilterChange = async (params) => {

  let newFilterModel = {
    [params.id]: {
      filterType: "number",
      type: "lessThan",
      filter: 9,
    },
  };
  gridApi.setFilterModel(newFilterModel);

  // Refresh the data
  gridApi.onFilterChanged();
};

This generates a query with the following:

filters : {fct_rx.total_unique_patients: '9'}

This is missing vital operation information. The format I need for my DB query is {"fct_rx.total_unique_patients": "<9",}

I'm using setFilterModel and onFilterChanged to force a rerender of the SSR but maybe there is another?

Is there a way to do this with setFilterModel or is there a way to statically set the filter directly? Or even pass more information

I'm using Aggrid to display a large table with server-side rendering and custom sidebar filters. Sorting is working as expected, and with some cajoling, I've managed to get text filtering functional. However, I'm running into issues with filtering the number columns.

I found the following code online/prompt:

const onFilterChange = async (params) => {

  let newFilterModel = {
    [params.id]: {
      filterType: "number",
      type: "lessThan",
      filter: 9,
    },
  };
  gridApi.setFilterModel(newFilterModel);

  // Refresh the data
  gridApi.onFilterChanged();
};

This generates a query with the following:

filters : {fct_rx.total_unique_patients: '9'}

This is missing vital operation information. The format I need for my DB query is {"fct_rx.total_unique_patients": "<9",}

I'm using setFilterModel and onFilterChanged to force a rerender of the SSR but maybe there is another?

Is there a way to do this with setFilterModel or is there a way to statically set the filter directly? Or even pass more information

• ag-grid
• ag-grid-react

Share Improve this question Follow asked Jan 8 at 18:28 wearsahatwearsahat 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

1. Create a Custom Filter Component allows you to specify the filter type (e.g., less than, greater than, equal) and the filter value

import React from 'react';

const CustomNumberFilter = (props) => {
  const [filterValue, setFilterValue] = React.useState('');
  const [filterType, setFilterType] = React.useState('lessThan');

  const onFilterChanged = () => {
    const filterModel = {
      filterType: 'number',
      type: filterType,
      filter: filterValue,
    };
    props.filterChangedCallback(filterModel);
  };

  return (
    <div>
      <input
        type="number"
        value={filterValue}
        onChange={(e) => setFilterValue(e.target.value)}
      />
      <select
        value={filterType}
        onChange={(e) => setFilterType(e.target.value)}
      >
        <option value="lessThan">Less Than</option>
        <option value="greaterThan">Greater Than</option>
        <option value="equal">Equal To</option>
      </select>
      <button onClick={onFilterChanged}>Apply Filter</button>
    </div>
  );
};

export default CustomNumberFilter;

2. Integrate the Custom Filter with AG Grid into the column definition of AG Grid

const columnDefs = [
  {
    headerName: 'Total Unique Patients',
    field: 'fct_rx.total_unique_patients',
    filter: 'customNumberFilter',
    filterParams: {
      filterChangedCallback: (model) => {
        const newFilterModel = {
          [model.colId]: model,
        };
        gridApi.setFilterModel(newFilterModel);
        gridApi.onFilterChanged();
      },
    },
  },
  // other column definitions
];

3. Register the Custom Filter Component in the grid options

const gridOptions = {
  components: {
    customNumberFilter: CustomNumberFilter,
  },
  // other grid options
};

4. Format the Filter Model for Database Queries Adjust the filter model to ensure it is correctly formatted for your database queries

const onFilterChanged = (params) => {
  const newFilterModel = {
    [params.colId]: {
      filterType: 'number',
      type: params.type,
      filter: params.filter,
    },
  };
  gridApi.setFilterModel(newFilterModel);
  gridApi.onFilterChanged();

  // Format the filter model for your database query
  const dbFilterModel = {};
  Object.keys(newFilterModel).forEach((key) => {
    const filter = newFilterModel[key];
    if (filter.type === 'lessThan') {
      dbFilterModel[key] = `<${filter.filter}`;
    } else if (filter.type === 'greaterThan') {
      dbFilterModel[key] = `>${filter.filter}`;
    } else if (filter.type === 'equal') {
      dbFilterModel[key] = `${filter.filter}`;
    }
  });

  // Use dbFilterModel to query your database
  console.log(dbFilterModel);
};

This approach allows you to suppress the default filter behavior and provide a more flexible and customizable filtering experience.

Edit: To get the dbFilterModel information into your server-side rendering function, you can modify the onFilterChanged function to store the dbFilterModel in a state or a variable that is accessible to your getData function.

• Use a state management solution like useState to store the dbFilterModel
• Modify your getData function to accept the dbFilterModel as a parameter

Here's an example of how you can implement this:

import React, { useState } from 'react';

const CustomNumberFilter = (props) => {
  const [filterValue, setFilterValue] = useState('');
  const [filterType, setFilterType] = useState('lessThan');

  const onFilterChanged = () => {
    const filterModel = {
      filterType: 'number',
      type: filterType,
      filter: filterValue,
    };
    props.filterChangedCallback(filterModel);
  };

  return (
    <div>
      <input
        type="number"
        value={filterValue}
        onChange={(e) => setFilterValue(e.target.value)}
      />
      <select
        value={filterType}
        onChange={(e) => setFilterType(e.target.value)}
      >
        <option value="lessThan">Less Than</option>
        <option value="greaterThan">Greater Than</option>
        <option value="equal">Equal To</option>
      </select>
      <button onClick={onFilterChanged}>Apply Filter</button>
    </div>
  );
};

const columnDefs = [
  {
    headerName: 'Total Unique Patients',
    field: 'fct_rx.total_unique_patients',
    filter: 'customNumberFilter',
    filterParams: {
      filterChangedCallback: (model) => {
        const newFilterModel = {
          [model.colId]: model,
        };
        gridApi.setFilterModel(newFilterModel);
        gridApi.onFilterChanged();

        // Format the filter model for your database query
        const dbFilterModel = {};
        Object.keys(newFilterModel).forEach((key) => {
          const filter = newFilterModel[key];
          if (filter.type === 'lessThan') {
            dbFilterModel[key] = `<${filter.filter}`;
          } else if (filter.type === 'greaterThan') {
            dbFilterModel[key] = `>${filter.filter}`;
          } else if (filter.type === 'equal') {
            dbFilterModel[key] = `${filter.filter}`;
          }
        });

        // Store the dbFilterModel in a state or variable
        setDbFilterModel(dbFilterModel);
      },
    },
  },
  // other column definitions
];

const gridOptions = {
  components: {
    customNumberFilter: CustomNumberFilter,
  },
  // other grid options
};

const [dbFilterModel, setDbFilterModel] = useState({});

const getData = async (dbFilterModel) => {
  // Use dbFilterModel to query your database
  console.log(dbFilterModel);
  // Fetch data from the server using dbFilterModel
};

// Call getData with the dbFilterModel when needed
getData(dbFilterModel);

Like suggested the dbFilterModel is stored in a state variable using useState. The getData function is then called with the dbFilterModel as a parameter. This ensures that the dbFilterModel is accessible within the getData function.

本文标签： ag gridAggrid setFilterModel syntax issueStack Overflow