0

I have a really nasty issue with hiding and showing some rows in handsontable. So very simplified scenario that I need to hide and show rows based on some business conditions.

I'm using trimRows and untrimRows for that, overall it works great, until column sorting is turned off. If it is tunred on, than after untrim / trim method calls and re-render of grid, empty rows appears in the grid.

Please see Fiddle: http://jsfiddle.net/n8ggsbob/13/

columnSorting: {
                    column: 0,
                    sortOrder: true
                }
    var fake = [1, 2, 3, 4, 5, 6, 7, 8, 10];
    hot.getPlugin('trimRows').untrimRows(fake);
    hot.getPlugin('trimRows').trimRows(fake);
    hot.render();

just hit submit button and notice that a lot of empty rows appeared (or just not removed)

But as mentioned before, if I remove sorting all works great: http://jsfiddle.net/n8ggsbob/14/

var fake = [1, 2, 3, 4, 5, 6, 7, 8, 10];
hot.getPlugin('trimRows').untrimRows(fake);
hot.getPlugin('trimRows').trimRows(fake);
hot.render();

The only thing that helps from those empty rows appearance, is calling updateSettings method, but then sorting is being reset : http://jsfiddle.net/n8ggsbob/16/ 

    var fake = [1, 2, 3, 4, 5, 6, 7, 8, 10];
    hot.getPlugin('trimRows').untrimRows(fake);
    hot.getPlugin('trimRows').trimRows(fake);

    hot.updateSettings({});
    hot.render();

Did someone faced similar issues or I just missing something?

Thanks a lot, Alex

user3046346
  • 51
  • 5

1 Answers1

0

I'm not sure why you try to untrim first and trim right after :

hot.getPlugin('trimRows').untrimRows(fake);
hot.getPlugin('trimRows').trimRows(fake);

But anyway, that's the cause of your issue. Delete the untrimRows function in your first example and you will see the problem will disappear.

Again, I'm not sure what you're trying to achieve but if, for example, you have two buttons, one for hidding and the other one for display again, there is no conflict with the sort function : your example updated.

Fab
  • 893
  • 1
  • 13
  • 22
  • Hey fap, thanks for quick answer. I'm trying to implement some kind of global search for grid. Lets say user types some keyword then clicks search button, and in that moment grid should untrim all previous rows and then trim all rows which not contains searched text. thats why I'm trying to trim and untrim in same function. – user3046346 Jan 25 '17 at 10:01
  • Well, in this case, FYI, I wanted to do pretty much the same thing but without using the PRO version : http://stackoverflow.com/questions/39769474/individual-column-filtering-with-handsontable/ – Fab Jan 25 '17 at 10:02
  • Yea, I saw that post recently, thanks for that. But I'm afraid to loadData on every filter. The things is that page I'm currently working on is pretty complicated (with edit, delete, add) and the is a risk that using loadData will lead to some "Unexpected" results. But using trimRows plugin it looks more safe. – user3046346 Jan 25 '17 at 10:07
  • Yeah of course, that was just in case you didn't see it :) And as I said, this is really a workaround to not use the PRO version, but yeah, I managed to arrive to a safe solution to edit / add / remove rows, so just be aware that's doable. (I even have pagination with 950 pages for 1 table and it's still editable, but as I said in my Q/A, that's almost a whole framework in itself now...). Anyway, is my answer solved your issue or do you still have issue(s) ? – Fab Jan 25 '17 at 10:20
  • Unfortunately I have to use that PRO version, sad. There is one ugly hack which solves issue with untrim/trim http://jsfiddle.net/n8ggsbob/18/ , but I hate timeouts. – user3046346 Jan 25 '17 at 10:22
  • Are you sure it's a good solution ? If I try to click on Submit multiple time, I see the glitch (empty rows) happen again. – Fab Jan 25 '17 at 12:44