Hi Team,
Need your help on the below scenario.
I have handsontable Grid in the parent page having 15-20 columns and first column being checkbox and second column being an ID with the icon next to it.
Onclick of the icon in the second column I am passing the ID to the API to get the data. If the users checks multiple checkbox then I am passing multiple IDs to get the data for the selected IDs.
The I am opening a Modal Popup to bind the Data to a handsontable having different DIV id as in the parent page. Now the data binds correctly (for example have got 4 records from API) as per the data retrieved from the API.
I have a close button to the popup and the user closes the Pop up. next time when i select more check boxes and got the data from API (for example now i got 6 records from API). Now the the data is still binding 4 records to the Grid and the latest data is not getting updated to the handsontable.
while checking in the console for ht.getdata it has the old 4 records but not the latest data. is there a way to refresh the data properly.
My bind code looks like below
$(myCldGridId).handsontable({
data: data,
columns: myCol,
colHeaders: getHeaders(),
filters: true,
dropdownMenu: [‘filter_by_condition’, ‘filter_action_bar’], // define filter menu
afterFilter: validAfterFilter,
renderAllRows: true,
hiddenColumns: { columns: [0] }
});
I tried creating new handsontable everytime while loading modal pup-up but that created new duplicate div in DOM everytime. hence I tried to destroy on close but the the previews classes to the DIV are getting cleared.
Need your help if there any suggestion on this scenario
Thanks,
Chandrakanth