CODEWITHSUNDEEP
ag-grid-react
Tom Wild
Tom Wild

Reputation: 21

Conditional row format not updating

I am building an app in Ag-grid React

I would like the grid to highlight a row if the user has tagged it by clicking on a checkbox. I am using rowClassRules, and it works fine: if the user edits the value of the tag field for a row from false to true, the row becomes highlighted

When I add in a cell renderer to make the tag field a checkbox it stops working, see code below

Any advice on what I am doing wrong would be appreciated

index.js

import React, { useState } from "react";
import { render } from "react-dom";
import { AgGridReact } from "ag-grid-react";

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import "./index.css"

const App = () => {
    const AgGridCheckbox = (props) => {
        const boolValue = props.value && props.value.toString() === "true";
        const [isChecked, setIsChecked] = useState(boolValue);
        const onChanged = () => {
            props.setValue(!isChecked);
            setIsChecked(!isChecked);
        };
        return (
            <div>
                <input
                    type="checkbox"
                    checked={isChecked}
                    onChange={onChanged}
                />
            </div>
        );
    };

    const [rowData] = useState([
        { tag: true, make: "Toyota", model: "Celica", price: 35000 },
        { tag: false, make: "Ford", model: "Mondeo", price: 32000 },
        { tag: false, make: "Porsche", model: "Boxter", price: 72000 },
    ]);

    const [columnDefs] = useState([
        { field: "tag", cellRenderer: AgGridCheckbox },
        // { field: "tag", editable: true },
        { field: "make" },
        { field: "model" },
        { field: "price" },
    ]);

    const gridOptions = {
        rowClassRules: {
            "row-tagged": (params) => params.api.getValue("tag", params.node),
        },
    };

    return (
        <div className="ag-theme-alpine" style={{ height: 400, width: 800 }}>
            <AgGridReact
                gridOptions={gridOptions}
                rowData={rowData}
                columnDefs={columnDefs}
            ></AgGridReact>
        </div>
    );
};

render(<App />, document.getElementById("root"));

index.css

.row-tagged {
    background-color: #91bd80 !important;
}

Upvotes: 1

Views: 689

Answers (1)

Tom Wild
Tom Wild

Reputation: 21

I've done some more research and if I add redrawRows() to the onChanged() handler in the cell renderer thus:

        const onChanged = () => {
            props.setValue(!isChecked);
            setIsChecked(!isChecked);
            setRowData(rowData);
            console.log(props);
            props.api.redrawRows({ rowNodes: [props.node] });
        };

It now works. Note that passing { rowNodes: [props.node] } means (I assume) that it only redraws a single row.

Supplementary Question: Is this the right way to go? Is there a more efficient way?

Upvotes: 1

Related Questions