Filtering with inputs on header

Tags: #<Tag:0x00007efc64af5458>
#1

I followed the tutorial on documentations " Custom implementations", to include inputs on the header to filter. What worked fine initially.

Problem started when user open in a smaller screen, laptop for example, where is necessary to scroll horizontally to check some columns.

I type some value and try to scroll horizontally, some times this jumps to another input, some times another column is sorted. I try to include inputs in half of columns, but after scrolling horizontally 1 extra input appeared where there wasn’t.

I may try to exprain here how to test on my own web site, but it’s in pt-BR.

#2

Hi Eduardo,
Our example in filters for “Custom implementation” is just a simple implementation and does not support virtual rendering.
You have to add a sort-of cache to track values in those custom headers, e.g., on the input event. Then you can put the current value from the input element for a particular column during the afterGetColHeader listener.

#3

I think I found a solution (at least seems to, I’ll check with more use)

VueJS and following your documentation.

data() {
return {
…,
divsFilterSource: [],
}
}

getInitializedElements(colIndex) {
let div = this.divsFilterSource[colIndex];
if (!div) {
// documentation code
this.divsFilterSource[colIndex] = div;
}
return div;
}

image

debounceFn:
// last line inside this function
event.target.focus();

I could even include inside beforeKeyDown:
this.divsFilterSource[this.source.getSelectedLast()[1]].childNodes[0].focus();
so that when user press “*”, it goes to the input.

I can share the code with you, so that you can implement in your documentation, if you want.

[GH #6791] afterDropdownMenuExecute
#4

I’m glad you found a solution. Remember to transform indexes between all layers: renderable <-> visual <-> physical.
These layers might contain different indexes after transformations such as moving or hiding.

Thank you for your offer! Your involvement means a lot to us!
In case we work on change the filtering guide, we will consider your example.