Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
19 days ago

What is the method to deactivate the header checkbox in AG-GRID (REACT) without utilizing a Custom Header Component?

The following React code employs the cellRenderer at clause 1 to enable/disable the checkbox based on props.refresh for data rows. However, the same feature is required for the header checkbox too. Although AG Grid provides a call for a custom Header Component, is there any other simpler approach to implement this feature? Any help would be appreciated. Thank you. Note: AG-Grid/AG-Grid-Community v29.3.4.
Answers(1)
avatar
Tolerim
19 days ago
Verified Answer
One way to achieve this behavior is by creating a custom header component for the AG Grid. You can use the headerCheckboxSelectionFilteredOnly property to disable the header checkbox based on some condition. Here's an example of how you can do it: 
const CustomHeader = (props) => {
  const [checked, setChecked] = useState(false);

  const onChange = (e) => {
    setChecked(e.target.checked);
    props.onChange(e.target.checked);
  };

  useEffect(() => {
    setChecked(props.checked);
  }, [props.checked]);

  return (
    <div>
      <input type="checkbox" checked={checked} onChange={onChange} />
      {props.displayName}
    </div>
  );
};

const MyGridComponent = () => {
  const [columnDefs, setColumnDefs] = useState([
    {
      headerCheckboxSelectionFilteredOnly: true,
      checkboxSelection: (params) => !params.node.group,
      headerComponentFramework: CustomHeader,
      headerComponentParams: {
        onChange: (checked) => {
          // do something here based on checked value
        },
        checked: false,
        displayName: "Select All",
      },
    },
    { headerName: "XXXXX", field: "YYYYY", sortable: true, filter: true },
  ]);

  return <AgGridReact columnDefs={columnDefs} />;
};
In this example, we have created a custom header component called CustomHeader which takes in an onChange function and a checked prop. We also pass in a displayName prop to display the text Select All next to the checkbox. We then use the headerCheckboxSelectionFilteredOnly property to only show the header checkbox for filtered rows. We also use the checkboxSelection property to show checkboxes next to every row except the group rows. Finally, we set the headerComponentFramework property to CustomHeader and pass in the onChange, checked, and displayName props to the headerComponentParams. By doing this, we have achieved the desired behavior of enabling/disabling the header checkbox based on some condition without having to create a custom header component.
;