Some main code related to datagrid
const apiRef = React.useRef(null);
const [gotApiRef, setGotApiRef] = useState(false);
const [gotApiRef2, setGotApiRef2] = useState(false);
console.log("apiRef.current: ", apiRef.current);
const ObjRef = React.useRef({
dataRe: {
columns: [],
rows: [],
},
tempRe: {
rows: [],
},
});
const columns = [
{ field: "lenderName", headerName: "Lender Name", width: 200 },
{ field: "endpoint", headerName: "Endpoint", width: 250 },
];
// filling row data with props
useEffect(() => {
if (props.data.docs) {
props.data.docs.map((row) => {
let temp = {
id: row._id,
lenderName: row.name,
endpoint: row.endpoint,
};
ObjRef.current.tempRe.rows.push(temp);
});
console.log("2. ObjRef.current.tempRe.rows:", ObjRef.current.tempRe.rows);
}
}, [props.data]);
// ====================== Checkbox Selection useEffect =========================
useEffect(() => {
if (gotApiRef) {
console.log("entry in useEffect");
//console.log("1. ObjRef.current.dataRe: ", ObjRef.current.dataRe);
console.log("In useEffect apiRef.current: ", apiRef.current);
const dataRe = {
columns,
rows: ObjRef.current.tempRe.rows,
};
counterRef.current.renderCount += 1;
// console.log(
// "3 counterRef.current.renderCount:",
// counterRef.current.renderCount
// );
ObjRef.current.dataRe = dataRe;
const rowModels = apiRef?.current?.getRowModels();
if (rowModels != undefined) {
console.log("5 ObjRef.current.dataRe:", ObjRef.current.dataRe);
console.log("in rowModel not undefined..");
console.log("5. rowModels*:", rowModels);
if (apiRef.current) {
console.log("in apiRef.current*", apiRef.current);
setGotApiRef2(true)
apiRef.current.setRowModels(
rowModels.map((r) => {
console.log("in rowModels.map");
r.selected = true;
return r;
})
);
}
}
}
}, [gotApiRef]);
//in return
<DataGrid
rows={ObjRef.current.dataRe.rows}
columns={ObjRef.current.dataRe.columns}
// {...ObjRef.current.dataRe}
checkboxSelection
onSelectionChange={(newSelection) => {
setSelection(newSelection.rows);
}}
components={{
noRowsOverlay: (params) => {
console.log(
"in noRowOverlay ObjRef.current.dataRe:",
ObjRef.current.dataRe
);
console.log("params in noRowsOverlay**:", params);
if (!apiRef.current) {
apiRef.current = params.api.current;
console.log(
"apiRef.current in noRowOverlay:",
apiRef.current
);
setGotApiRef(true);
}
return <div>No rows</div>;
},
}}
/>
I read somewhere that use Layout Effect is used with use Ref, even tried that but no help this question is work after this question with this name "Can I initialize the checkbox selection in a material-ui DataGrid?"
Can I initialize the checkbox selection in a material-ui DataGrid?
I am getting data in apiRef.current
I am setting data in ObjRef.current.dataRe
after setting I should get data in rowModels ,but I am getting rowModels as null
