Keep filter conditions after handsonatable load

Tags: #<Tag:0x00007efc61c6cd98> #<Tag:0x00007efc61c6cb90>
#1

Hi,
I have a handsontable with filter functionality, if user apply some filters in
afterFilter(conditionsStack) {
HotelFilter = conditionsStack;
},
function I keep filer array in global js varriable HotelFilter.
So my question is how applay this HotelFilter after reload and recreation of handsontable to have same filters selected in same handsontable after reload.

#2

Hi @anishahbazyan131313

Thank you for contacting us. You can use the Filters plugin methods to reapply the conditions. It would look like this:

const filtersPlugin = instance.getPlugin('filters'); 
filtersPlugin.addCondition(conditions); 
filtersPlugin.filter();

Where the conditions are the parameters of the previously applied filters. You can read more about this method here: https://handsontable.com/docs/javascript-data-grid/api/filters/#addcondition

#3

Hi @adrian.szymanski thank you for reply. In my code :
afterFilter(conditionsStack) {
OperHotelFilter = conditionsStack;
},
on next handsontable init
afterInit: function () {
const filtersPlugin = this.getPlugin(‘filters’);
if (OperHotelFilter != undefined) {
filtersPlugin.addCondition(OperHotelFilter);
filtersPlugin.filter();
}
},
As you suggested. But seems filtersPlugin.addCondition(OperHotelFilter) not working.

#4

Hi @anishahbazyan131313

It would be best if you could share a code demo where we can check the problem. In the meantime I can see that you put that logic into the afterInit hook, which might be too early to apply the conditions. I would rather suggest to use afterLoadData hook instead.

#5

Hello @adrian.szymanski
As suggested, I updated my code to use the afterLoadData hook instead of the afterInit hook to apply the filter conditions. However, I am still encountering issues, and the filtering does not seem to work as expected.

Here is a summary of my approach:

  • I moved the logic to the afterLoadData hook, where I retrieve the filtersPlugin and apply the OperHotelFilter condition using addCondition() , followed by calling filter() .
  • Despite this change, the filtering does not take effect as anticipated.

Below is a snippet of the updated code I am using:
afterLoadData: function (initialLoad) {
const filtersPlugin = this.getPlugin(‘filters’);
if (OperHotelFilter != undefined) {
filtersPlugin.addCondition(OperHotelFilter);
filtersPlugin.filter();
}
},
Could you kindly advise if there’s anything further I should modify? I would appreciate your insights into why the filters might not be working properly even after the data is loaded.
And share the code
filters: true,
afterFilter(conditionsStack) {
OperHotelFilter = conditionsStack;
},
dropdownMenu: [‘filter_by_value’, ‘filter_action_bar’],
hiddenColumns: {
columns: HotelcolumnShowIndexOrder,
indicators: true
},
manualColumnResize: true,
manualColumnMove: true,
manualRowResize: true,
wordWrap: false,
fixedColumnsLeft: HotelModel.PermFixColCount.OperationHotelFixedColumnCount,
columns: columns,
afterInit: function () {
const filtersPlugin = this.getPlugin(‘filters’);
if (OperHotelFilter != undefined) {
filtersPlugin.addCondition(OperHotelFilter);
filtersPlugin.filter();
}
},
afterSelectionEnd: function (row1, column1, row2, column2) {
SelectedGridData.length = 0;
SelectedGridData.push(row1);
SelectedGridData.push(row2);
SelectedGridData.push(column1);
SelectedGridData.push(column2);
},

#6

Hi @anishahbazyan131313

Please share your implementation in a code demo, for example in jsFiddle or Stackblitz. There are some missing variables and I can’t reproduce it on my side.

#7

Hey @anishahbazyan131313

It’s been a couple of weeks since we last heard from you regarding this ticket, so we’re assuming that the issue has been resolved. We’re always here to help if you need further assistance or have any other questions.

Feel free to reopen another thread or start a new one if needed.

#8