Is there a way to obtain a global reference to the xgrid component in order to interact with it from other parts of the page? The current code snippet only returns a reference tied to the html div tag it is used in, and does not allow access to the component's state or functions. Can someone help me figure out what I am doing wrong?
import React, { useState } from "react";
import ReactDOM from 'react-dom';
//import { DataGrid } from '@material-ui/data-grid';
import { XGrid } from '@material-ui/x-grid';
import "regenerator-runtime/runtime";
function filterModelChanged()
{
console.log(this.getSortModel());
console.log(this.state.filter.items);
}
function ReaderWorklist({ initialRows, columns }) {
const [rows, setRows] = useState(initialRows);
return (
<div style={{ height: 600, width: '100%' }}>
<XGrid rows={rows} columns={columns} onFilterModelChange={filterModelChanged} ref={(xgridComponent) => {window.xgridComponent = xgridComponent}} />
</div>
);
}
//
async function getData() {
let response = await fetch("/services/reader_worklist_services/getList",
{credentials:"same-origin"});
return await response.text();
}
//Ensure all elements are present before attaching to them with the react component
document.addEventListener("DOMContentLoaded", function(event) {
getData().then(function(data) {
const rootElement = document.getElementById('reader_worklist_container');
const jsData = JSON.parse(data);
ReactDOM.render(<ReaderWorklist initialRows={jsData.rows} columns={jsData.columns} />, rootElement);
});
});