AgGrid - How can i have radio button filter instead of checkbox?

Question

I have a custom filter values such as:

filterParams: {
  values: ['Admin', 'Proje Yöneticisi', 'Muhasebe'],
  defaultToNothingSelected: true,
  suppressSelectAll: true
},

However, I can choose multiple values like this. But I don't want to do that, I want to choose only one value instead of multiple choices.

Is there a way to convert this checkbox filter into a radio filter?

Thanks.

Answer 1

You can make a custom filter and there is a video on it: https://www.youtube.com/watch?v=yO3_nTyDv6o

Create a component like this, i am dynamically looking up the options to be displayed based on the extra column parameters supplied in the column def (e.g. thats where props.meta comes in)

import { Button, Radio, RadioGroup, Stack } from "@chakra-ui/react";
import { IFilterParams } from "ag-grid-community";
import React from "react";
import { IRegistryDataColumn } from "../../../../models/RegistryDataColumn";

interface IProps extends IFilterParams {
  meta?: IRegistryDataColumn;
}

interface IOption {
  value: string;
  label: string;
}

export const FilterRadio = React.forwardRef((props: IProps, ref) => {
  const [radioOptions, setRadioOptions] = React.useState<IOption[]>([]);

  const [filterState, setFilterState] = React.useState<string>();

  const handleClear = () => {
    setFilterState(undefined);
  };

  // expose AG Grid Filter Lifecycle callbacks
  React.useImperativeHandle(ref, () => {
    return {
      isFilterActive() {
        return filterState !== undefined;
      },

      doesFilterPass(params) {
        const isPass =
          params.data[props.colDef.field as string] === filterState;

        return isPass;
      },

      getModel() {},
      setModel() {},
    };
  });

  React.useEffect(() => {
    props.filterChangedCallback();
  }, [filterState]);

  React.useEffect(() => {
    const radioOptionsUpdate: IOption[] = [];

    if (props.meta?.radio_options) {
      Object.entries(props.meta.radio_options).forEach(([key, value]) => {
        radioOptionsUpdate.push({ value: value.value, label: value.label });
      });
    }

    setRadioOptions(radioOptionsUpdate);
  }, [props.meta?.radio_options]);

  return (
    <Stack p={4} spacing={6} style={{ display: "inline-block" }}>
      <Button size="sm" onClick={handleClear}>
        Clear filter
      </Button>
      <RadioGroup onChange={setFilterState} value={filterState}>
        <Stack spacing={4}>
          {radioOptions.map((option) => (
            <Radio key={option.value} value={option.value}>
              {option.label}
            </Radio>
          ))}
        </Stack>
      </RadioGroup>
    </Stack>
  );
});

And then include it in the column definition:

newCol.filter = FilterRadio;