简体   繁体   中英

Ag-Grid External Filter not working with props

I am trying to set an external filter from outside my grid-component but the isExternalFilterPresent-method is missing the passed on property value and is still undefined. I created an example with plunkr: https://plnkr.co/edit/PkksNSLPlianNXsz

Where is my mistake?

  useEffect(()=> {
    if (gridApi)  {
      gridApi.onFilterChanged();
    }
 }, [props.filter])

...
  const isExternalFilterPresent = () => {
    return props.filter != 'everyone';
  };

  const doesExternalFilterPass = node => {
    switch (props.filter) {
      case 'below25':
        return node.data.age < 25;
      case 'between25and50':
        return node.data.age >= 25 && node.data.age <= 50;
      case 'above50':
        return node.data.age > 50;
      case 'dateAfter2008':
        return asDate(node.data.date) > new Date(2008, 1, 1);
      default:
        return true;
    }
  };

...
return <AgGridReact
          modules={modules}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          animateRows={true}
          isExternalFilterPresent={isExternalFilterPresent}
          doesExternalFilterPass={doesExternalFilterPass}
          onGridReady={onGridReady}
          rowData={rowData} />

Using Ref solved the issue. AgGrid seems to keep the initial value of isExternalFilterPresent.

const [gridApi, setGridApi] = useState();
const [gridColumnApi, setGridColumnApi] = useState();
const [rowData, setRowData] = useState([]);
const ref = useRef(props.filter);

useEffect(()=> {
  if (gridApi)  {
    ref.current = props.filter;
    gridApi.onFilterChanged();
  }
}, [props.filter])
const isExternalFilterPresent = () => {
  return ref.current != 'everyone';
};

const doesExternalFilterPass = node => {
  switch (ref.current) {
    case 'below25':
      return node.data.age < 25;
    case 'between25and50':
      return node.data.age >= 25 && node.data.age <= 50;
    case 'above50':
      return node.data.age > 50;
    case 'dateAfter2008':
      return asDate(node.data.date) > new Date(2008, 1, 1);
    default:
      return true;
  }
};

https://plnkr.co/edit/gptzZ3ggeLiuT6ov

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM