Alter remove_row issue on a filtered column

Tags: #<Tag:0x00007efc6229c3f8>
#1

Hi all,

I have a redux store and that is the data source for my handsontable in my react component.
I’m facing an issue that is when I filter a column and try to remove all the rows with a custom button (which is using alter function to remove the data). So when the remove button is pressed on all of the selected rows in a filtered column will indeed remove the data. But when all the data is removed and if any extra filters are there to that column it will add the other filter value’s data to the deleted row and doesn’t make it empty. Is this a known issue?

Here is the sample gif which I’m facing.

remove%20rows%20issue

My assumption is here that when we filter and if I remove a few row(s) from the filtered data, the removed previous row(s) will still be there (without data). So to fill it, the non filtred row(s) will be populated/occupied in place of those deleted rows, If any rows are present in the table. If not it will be empty. I could be wrong also.

Can anyone please help me with this.

#2

Hey @aashayamballi

the video is too small to see the steps. Please create a demo where the issue can be replicable.

#4

@aleksandra_budnik Here is the codesandbox link.

To see the issue, filter the device with 2-3 values which should display 2-3 rows. And then select all the rows and press “Remove Selected Rows” button. When button is pressed it will ask for confirmation. When you press ok it removes the data but add’s the other data as well.

The code is little complex.

Actually I found what is causing the issue but don’t know how to fix. I would need your suggestion on this. I’ll explain the code flow.

  1. We need to select which are rows he wants to remove and then he will press the “Remove Selected Rows” which is in “HandsonTable” component.
  2. When the “Remove Selected Row” button is clicked “getSelectedDataToDeleteRows” function will be called. And from that function, I dispatch a Redux action to open the confirmation modal and also dispatch a Redux action to set which are the rows we need to remove from handsontable.
  3. And when the modal opens “ConfirmRemoveRowModal” component will be opened. To this component, I’m passing HandsonTable’s reference. And when the modal opens and the “ok” button is pressed “handleOk” will be called. Again in the “handleOk” function I’m dispatching an action to the action creator i.e. “removeDataFromHandsonTable”.
  4. In the “removeDataFromHandsonTable” action creator it’s causing the problem.

Because when initially the “Remove Selected Rows” button is pressed I don’t want the user to press that button again when the deletion is in progress. Delete in progress means the data will be passed to the back end server to delete those selected rows. So during that time I will disable the button by dispatching another action in “removeDataFromHandsonTable” action creator Which causes to re render the handsontable component. Which is causing the issue.

@aleksandra_budnik I would definitely need your help and suggestions on this. Please help me. :frowning:

#6

Actually the problem here is when the HandsonTable component re-renders it will mess it up. So I was able to make the “Remove Selected Rows” button to a separate component. I have a requirement is that when deletion or modification is done and sent to the backend server. the handsontable should show a loading indicator. I have a component and state for that in redux. So even if that loading indicator changes in the handsontable component will re-render mess it up. I don’t know why when handsontable component rerenders and things go wrong.

If you see the sample code in HandsonTable component. I have a state btnLoading if that changes the filter + alter_row will cause the issue. It should behave like that.

#7

Hey @aashayamballi

I’m glad that you have moved with the subject as the demo is missing some crucial elements. Once I load it it says that one module is missing.

What do we want to achieve now? Maybe it is possible to get what you want without sharing the whole application in the JavaScript playground.

#8

@aleksandra_budnik I have fixed the code in codesandbox. Please look into it once.

So actually I have few state in redux store and HandsonTable component has the react wrapper for handsontable. so if I filter and try to remove the row will cause the HandsonTable to re render the component. Which is causing the issue. If HandsonTabe component re renders while removing the rows using alter function, it actually messes up the filter + alter remove_row functionality.

Try to filter few of the values from the demo and try to remove all the from the filtered data. So when all the rows has been removed, it should be empty right? But it actually adds the non filtered data to the to the table. Please try the demo once.

Thank you.

#9

Thank you for doing the update.

I filtered out the last column and left only Laptop, Desktop and PC

22

And then selected all rows and clicked the button. In the result I get ‘XBOX’ which is not a desired result.

I have asked our developer to investigate the case.

#10

I have only one request. Can you please share your license ID or company name with me on support@handsontable.com?

Thank you in advance.

#11

@aleksandra_budnik Thank you :slight_smile:

#12

Hey @aashayamballi

I have an update from our developers


We added afterInit={function() { this.loadData(handsonData); }} and removed data: handsonData, from settings because it updates the state of the entire application. It also updates hot, which calls loadData with initialized settings (minus deleted rows).

#13

Thanks it worked :slight_smile:

#14