We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

the data selected with getSelectedRecord is not updated

Hi,


I have used presistSelection to keep selected row at grid componenet, and then I used getSelectedRecord to handle the draft data in a different function.

When the data is changed and rendering is in progress, the data selected with getSelectedRecord is not updated.


How to get data of selected row other than getSelectedRecords or

Is there a way to force the data of the getSelectedRecord target to be replaced with the latest data?


this is code.


import React, {useState, useEffect, useRef} from 'react'
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Toolbar, Inject, Sort, ExcelExport, ColumnChooser, Resize, updateData, updatecloneRow, getDatePredicate } from '@syncfusion/ej2-react-grids';
import Axios from "axios"
const Test = () => {
const [data, setData] = useState<any>([]);
const gridRef = useRef() as React.MutableRefObject<GridComponent>

useEffect(() => {
let mounted = true;

if(mounted) getData();

return () => {mounted=false}
})

const getData = () => {
Axios.get('/api/data').then((res)=>{
setData(res.data.data);
}).catch((error:any) => {

})
}
const updateState = (action:string) => {
const rows = gridRef.current.getSelectedRecords(); // this data is not updated
const arr = rows.filter((row:any)=>row.state===action);
if(arr.length > 0 ) return false
Axios.post(`/api/update/${action}`).then((res)=>{
getData()
}).catch((error:any)=>{
alert(error)
})
}

return (
<div>
<GridComponent
ref={gridRef}
dataSource={data}
allowExcelExport={true}
allowResizing={true}
allowPaging={true}
allowSorting={true}
showColumnChooser={true}
enablePersistence={true}
pageSettings={{ pageCount: 5, pageSizes: true, pageSize: 10 }}
toolbar={['Search', 'ColumnChooser', 'ExcelExport']}
selectionSettings={{
persistSelection: true,
checkboxMode: 'ResetOnRowClick',
type: 'Single',
enableToggle: false
}}
>
<ColumnsDirective>
<ColumnDirective type='checkbox' width='60' textAlign='Center' />
<ColumnDirective field='id' visible={false} isPrimaryKey={true}></ColumnDirective>
<ColumnDirective field='name' headerText="name" width='130' textAlign='Center'></ColumnDirective>
<ColumnDirective field='resourceId' headerText="resourceId" width='120' textAlign='Center' ></ColumnDirective>
<ColumnDirective field='productGroupName' headerText="productGroupName" width='110' textAlign='Center'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Page, Resize, Toolbar, ColumnChooser, ExcelExport, Sort]} />
</GridComponent>
<div>
<button onClick={()=> updateState('on')}>state on</button>
<button onClick={()=> updateState('off')}>state off</button>
</div>
</div>
)
}

export default Test




5 Replies

JC Joseph Christ Nithin Issack Syncfusion Team October 14, 2022 12:49 PM UTC

Hi Sohyeonbak,


  Greetings from Syncfusion support.


   Before proceeding to the solution, we would like you to share the following information so that we will be able to proceed further.


  • In your update you have mentioned that you are trying to get the selected records when the grid is rendering itself, kindly share the details are you trying to refresh the grid after selecting the record and you want to persist the selected record after refreshing?
  • Please share a simple sample to reproduce the issue.
  • Please share the replication procedure to reproduce the issue.
  • Please share the video demo of the issue you are facing.


Regards,

Joseph I.



SO sohyeonbak replied to Joseph Christ Nithin Issack October 18, 2022 09:53 AM UTC

Hi,


A problem of our project is this.

first we select to row and then push 'on' button.

in the console, the status value is off. 

this value was got using the getSelectedRecords function.

It call the api that changes the state through the 'on' button and refreshes the screen when it change.
the problem is that the screen has changed, but the state in the console has the old value.

we need not getselectedRecord but another method .



PS Pavithra Subramaniyam Syncfusion Team October 19, 2022 10:03 AM UTC

Hi sohyeonbak,


Thanks for sharing the details.


From the shared screenshot it seems that the Grid is updated with the new value. But the value you are showing in the console is not updated as per the button click. Since this reported scenario occurs only in your application, we need the below details from your end to validate it further.


  1. Share the code where you are printing the state values in the console
  2. Try to run the below code in your console to check whether the getSelectedRecords returns an updated value


var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]

grid.getSelectedRecords()[0];

 


  1. Share an issue-replicable sample which will be easier to validate the issue


Regards,

Pavithra S



SO sohyeonbak replied to Pavithra Subramaniyam October 19, 2022 10:25 AM UTC

Thank you for answering


There is a correction in your answer.

A new row is not clicked after the state has changed

Even if the state changes with persistSelection, the row maintains the selected state.

There is no way to select a row and select a row again with persistSelection.

When the state is changed through an action, it is refreshed and the data on the screen changes, but only the data set by getSelectedRecord does not change.


I'm sorry, but I've already told you all the cases, so I can't provide more screens and codes.

I wonder if there is a way to get the selected row value other than getSelectedRecord.



PS Pavithra Subramaniyam Syncfusion Team October 20, 2022 12:20 PM UTC

Hi sohyeonbak,


From your query, we understood that you have stored the selected data using the “getSelectedRecords” method and after the page is refreshed, you are again showing the already stored data only which is the cause of the reported scenario. The changes in the Grid will not affect the already stored value. So You need to call the “getSelectedRecords” method to get the selected record with the new changes which is the only way to achieve your requirement.


Regards,

Pavithra S


Loader.
Live Chat Icon For mobile
Up arrow icon