Getting response from API. API response
API response : 0: Camera_Number: "Camera_1" Company_Name: "Fraction Analytics Limited" Floor Number: "Ground_Floor" Group_Name: "Group_1" Video_Name: "http://localhost:4000/video/0"
After populating data to table create one button then ag-grid look like this
I am currently mapping through all the videos to button and I click button it opens multiple video but I want only one video at a time.
app.js
const initialValue = { Name: "", Floor: "", Group: "", Camera: "", Videos: "" }; export default function App(data, handleFormSubmit) { const { id } = data; const actionButton = (params) => { setResponse(params.response); setOpen(true); }; const [response, setResponse] = useState(0); const [open, setOpen] = React.useState(false); const [formData, setFormData] = useState(initialValue); const handleClose = () => { setOpen(false); setFormData(initialValue); }; const onChange = (e) => { const { value, id } = e.target; // console.log(value,id) setFormData({ ...formData, [id]: value }); }; const columnDefs = [ { headerName: "Name", field: "Company_Name", filter: "agSetColumnFilter" }, { headerName: "Floor", field: "Floor Number" }, { headerName: "Group", field: "Group_Name" }, { headerName: "Camera", field: "Camera_Number" }, { headerName: "Videos", field: "Video_Name" }, { headerName: "Actions", field: "Video_Name", cellRendererFramework: (params) => ( <div> <Button variant="contained" size="medium" color="primary" onClick={() => actionButton(params)} > Play </Button> </div> ), }, ]; const onGridReady = (params) => { console.log("grid is ready"); fetch("http://localhost:8000/get_all") .then((resp) => resp.json()) .then((resp) => { console.log(resp.results); setResponse(resp.results); params.api.applyTransaction({ add: resp.results }); }); }; return ( <div className="App"> <h1 align="center"> React FastAPI Integration</h1> <h3> API Data </h3> <div className="ag-theme-alpine" style={{ height: "400px" }}> </div> <div> <DialogContent> <iframe width="420" height="315" title="videos" src={id} /> </DialogContent> ; <DialogActions> <Button onClick={handleClose} color="secondary" variant="outlined"> Cancel </Button> <Button color="primary" onClick={() => handleFormSubmit()} variant="contained" > {id ? "Update" : "Download"} </Button> </DialogActions> </Dialog> </div> </div> ); }
Multiple video open at same time,I don’t know how to properly play one at a time. I appreciate any help. I’ve been stuck on this for a few days.
Multiple video open at a time. but i want one video at a time
Advertisement
Answer
No need to use the click handler of the button. You cannot get row data with that.
Add a colId
to column definition for actions. Then handle the onCellClicked
action of the grid. You can get the row data using params.node.data
.
const [videoName, setVideoName] = useState(""); function onCellClicked(params) { // maps to colId: "action" in columnDefs, if (params.column.colId === "action") { // set videoName for the row setVideoName(params.node.data.Video_Name); setOpen(true); } } // grid config <AgGridReact ... rowData={response} onCellClicked={onCellClicked}> </AgGridReact> // access videoName in dialog content <DialogContent> {/* <iframe width="420" height="315" title="videos" src={id} /> */} <div>{videoName}</div> </DialogContent>
Output – Click on any row’s play button. Result is that rows video url. You can now use this to play the actual video.