hiddenRows plugin not working in Angular App

Tags: #<Tag:0x00007fce87d44358> #<Tag:0x00007fce87d4ed08>
#1

Hi Team,

I am using input field for global search on handsontable for which I have used hiddenRows plugin.

It seems to be working in below jsfiddle but when I copied exact same code in my Angular app it is not hidingRows at all.
https://jsfiddle.net/4cxjgtu8/1/

Also when tried to log hiddenRowArray and showRowArray it did return expected result so the logic seems to be correct.

Can anyone please help with this ?

#2

Hi @sam

Looking at your code it seems that importing and registering all modules part is missing, and it’s responsible for registering all the plugins.

Here you can see how to do it with Angular: https://handsontable.com/docs/javascript-data-grid/angular-installation/#basic-usage

Let me know if that helped.

#3

Hi @adrian.szymanski,

Thanks for the quick reply.

I have the importing and registering all modules part in my app.module.ts file already.

I also have implemented hideColumns feature in same handsontable and it is working fine.

Here the only issue that I am facing is that either hiddenRows seems to be not working or the handsontable is not rendering properly after hiderows.

Will share exact code below if it helps.

globalSearch() {
console.log(’-- 1.1 --’)
this.rowPlugin = this.hotInstance.getPlugin(‘hiddenRows’);
this.searchPlugin = this.hotInstance.getPlugin(‘search’);
this.hotInstance.render();
let queryResult = this.searchPlugin.query(this.searchValue);
console.log(’-- 1.1.1 --’)
this.rows = Array.from(new Set(queryResult.map((o:any)=> o.row)))
console.log(’-- 1.2 --’)
console.log(queryResult.length)
if(this.searchValue.length>0)
{
console.log(’-- 1.3 --’)
for(let i=1;i<=this.hotInstance.countRows();i++){

      if(!this.rows.includes(i))
      {
        this.hiddenRowArray.push(i);
      }else{
      	this.showRowArray.push(i);
      }
}
console.log('-- 1.4 --')
this.rowPlugin.hideRows(this.hiddenRowArray);
this.rowPlugin.showRows(this.showRowArray);

}else{
console.log(’-- 1.5 --’)
for(let i=0;i<this.hotInstance.countRows();i++){
this.rowPlugin.showRow(i);
}
}
console.log(’-- 1.6 --’)
console.log(this.hiddenRowArray)
console.log(this.showRowArray)
console.log(’-- 1.7 --’)

this.hotInstance.render();
this.hiddenRowArray = [];
this.showRowArray = [];
console.log(’-- 1.8 --’)
}

And the console log:

image
image.png860×469 21.3 KB

#4

Hi @sam

Thank you for the code. I’m currently checking it, but I have one question. The overall implementation does work, and the only thing that doesn’t is the hiddenRows plugin, right? The search plugin works also correctly and don’t throw any errors?

#5

Hi @adrian.szymanski,

Yes, that’s correct.

The search plugin seems to be working fine as I’m getting correct queryResult from search plugin.

The only problem I am facing here is that after using hiddenRows plugin’s hideRows(hiddenRowArray) and showRows(showRowArray) function the rows are not hiding in table.

#6

Hi @sam

I managed to find the problem. It wasn’t the hiddenRows plugin itself, but the difference in logic of this loop:

for(let i=1;i<=this.hotInstance.countRows();i++)

In your initial example it was like this:

for (let i = 0; i < hot.countRows(); i++)

When I changed that everything works fine now. Here you can find working example in Angular: https://jsfiddle.net/aszymanski/r2k83gc1/

#7

Hi @adrian.szymanski,

Thanks for the solution. It worked for me.
I just have one problem now which is the css is not getting applied to matched keywords…
Can you please let me know if I missed anything?

#8

Hi @sam

It seems to be working correctly in my previous example. I did not change anything in that matter. Can you compare my example to your code to see if there are any changes?

#9

Hey @adrian.szymanski,

Yes, it was working in your given example…
Also I checked in my code… it is exact replica of your Angular example and the logic working fine, it’s just the CSS is not being applied to the searched keywords.

So is there anything that I could have missed ?

#10

Hi @sam

I can’t tell for sure without seeing your code. However, do you have this option setup in your config?

    search: {
       searchResultClass: 'my-custom-search-result-class'
    }
#11

Hi @adrian.szymanski,

Yes I have added this option in the config also added the same classname in css file for that component.

#12

Can you please share your code again?

#13

I think I found the issue.

I am using custom renderer for each column in which I am setting styles to the columns due to which this css is not getting added.
(I just tried removing the renderer for one columns and tried searching and the CSS highlight worked).

Is there any way I can use both CSS ?

#14

Hi @sam

I’m afraid it’s not possible, as setting the custom CSS for search result overrides other custom styling so it will cancel out each other.

#15