Horizontal scroll with customer input filter

Tags: #<Tag:0x00007f8b2b0c1468>
#1

I have an example with customer input filter at https://jsfiddle.net/f5ky648h/

  1. scroll horizontal
  2. type search input at P, Q, R, colum
    Result: search input disappear
    Expect: search work well as A, B, C column
#2

Hi @nhannt97hy

I see that you run the run on the https://handsontable.com/docs/8.3.2/demo-filtering.html#custom-implementations example.

As mentioned here https://github.com/handsontable/handsontable/issues/6986#issuecomment-711157823

The demo in our documentation is a very simple one. Custom code should be adjusted if you want more columns.
With multiple columns and virtual rendering circumstances change. Inputs here, are reused, events are binded to wrong columns. When I try to filter last column, conditions are attached to column with an index 6, no results are shown. Focus is lost or scroll occurs because rerender reuses the input in totaly different column.

1 Like
#3

Thanks @aleksandra_budnik
how I should adjust with many columns?

#4

Hey @nhannt97hy

I will consult my colleague on how to set up that correctly and come back to you after the weekend.

#5

Do you have any update?

#6

Sorry for keeping you waiting @nhannt97hy
I have asked my colleague to share some tips on the demo. But as we are preparing to release, the Handsontable v9.0.0 demo goes a bit slower than planned.

#7

Hi @nhannt97hy,

We work on improving our documentation. One of the upcoming updates is a new example for custom filters in column headers. You can find it here: https://jsfiddle.net/handsoncode/jkuoyb5d/.

#8

thanks, @piotr.laszczkowski
here is a small issue.
when opening the example, I scroll to AD column and typing “a” character then focusing on input is disappeared

#9

Hi @nhannt97hy

It seems that there were some issues with the filter. Have you managed to make it work?

#10