Question 74486 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Show filter value in AgGrid – Reactjs

I’m using a custom CategoryFilter for my categories AgGrid:

const columnDefs = [
    {
        field: 'categoryId',
        headerName: t('category', { ns: 'common' }),
        cellRendererSelector: (params: ICellRendererParams<IProduct>) => ({
            component: CategoryColumn,
            params: {
                ...params,
                defaultLanguage
            }
        }),
        filter: CategoryFilter,
        floatingFilterComponentParams: {
            suppressFilterButton: false,
        },
    }
]

When I filter by category, I can enter the value in the input field, but it’s still not showing up under the column’s name:

enter image description here

How do I display the selected category under the "Category" column title?

Tags:

2

Answers


  1. 0

    You can pass the <CategoryColumn/> reference to the parent component via forwardRef and access the parent model’s value via function params of useImperativeHandle inside the <CategoryColumn/>.

    Example

    CategoryColumn

    import React, {
  Fragment,
  forwardRef,
  useImperativeHandle,
  useRef,
} from 'react';
import { IFloatingFilterParams } from 'ag-grid-community';

export default forwardRef((props: IFloatingFilterParams<any>, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);

  // expose AG Grid Filter Lifecycle callbacks
  useImperativeHandle(ref, () => {
    return {
      onParentModelChanged(parentModel: number | null) {
        console.log(parentModel)
        // When the filter is empty we will receive a null value here
        if (parentModel == null) {
          inputRef.current!.value = '';
        } else {
          inputRef.current!.value = parentModel + '';
        }
      },
    };
  });


  return (
    <Fragment>
      &gt;{' '}
      <input
        ref={inputRef}
        style={{ width: '30px' }}
        type="number"
        min="0"
      />
    </Fragment>
  );
});

    index.tsx

    ... 

  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: 'athlete', filter: 'agTextColumnFilter' },
    {
      field: 'gold',
      floatingFilterComponent: NumberFloatingFilterComponent,
      floatingFilterComponentParams: {
        suppressFilterButton: true,
      },
      filter: NumberFilterComponent,
    },
  ]);

  const defaultColDef = useMemo<ColDef>(() => {
    return {
      filter: true,
      floatingFilter: true,
    };
  }, []);
...

    Have read of Ag-grid Floating Filter!

    Login or Signup to reply.
  2. 0 
    getModelAsString(){
   return "appliedFilters";
}

    In column category component, getModelAsString method should return applied filters as mentioned. if no filter is applied then return null.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search