Filter Editor clear filter button

[Dark Beccio]

just used filter editor property for a custom combobox column filter, work just fine but i would like a button to reset filter input how can i add it?
filterEditor: {
template: ‘<smart-input drop-down-button-position=”right” placeholder=”Azienda” style=”border-radius: 0px; border: none; width: 100%; height:100%”></smart-input’,
onInit(column, editor) {
const input = editor.querySelector(‘smart-input’);
const productNames = comboAziendeJson;
let result = [];
for (let d = 0; d < productNames.length; d++) {
result.push((productNames[d].Dex));
}
input.dataSource = result;
input.style.setProperty(‘–smart-background’, ‘transparent’);
input.onkeyup = (event) => {
if (event.key === ‘a’ && event.ctrlKey) {
input.select();
}
};
input.addEventListener(‘change’, () => {
if (input.value === ”) {
column.filter = ”;
} else {
column.filter = ‘equal “‘ + input.value.trim() + ‘”‘;
}
});
}
}},

[yavordashew]

Hi Dark Beccio,
Yes you can add a button to clear the grid filters. For your case I can suggest three options and you can choose which one you will fit your needs the best.All of the solutions use the clearFilter() methods which clears all all filtering on the grid.
Option 1 which in my opinion is the most clean solution is to clear the filter when the ‘smart-input’ value is empty string.
Example:

 input.addEventListener('change', () => {
                        if (input.value === '') {
                            grid.clearFilter();
                        } else {
                        column.filter = 'equal "' + input.value.trim() + '"';
                        }
                        });

Option 2 is to add the button in the filterEditor template after the smart-input component in the filter row, but I don’t recommend this option because UI point of view.
Example:
//In the filterEditor template:

filterEditor: {
                        template: '<smart-input drop-down-button-position="right" placeholder="Azienda" style="border-radius: 0px; border: none; width: 50%; height:100%"></smart-input><smart-button >Clear</smart-button>',
                        onInit(column, editor) {
                        const input = editor.querySelector('smart-input');
                        const productNames = comboAziendeJson;
                        let result = [];
                        for (let d = 0; d < productNames.length; d++) {
                        result.push((productNames[d].Dex));
                        }
                        const btn= editor.querySelector('smart-button')
                        btn.addEventListener('click', ()=>{
                            grid.clearFilter();
                        })

Option 3- to add a button outside the grid component to clear the filters.
Example:
//In your HTNML file

 <smart-grid id="grid"></smart-grid>
        <smart-button id='clearFilterButton'>Clear Filter</smart-button>

//In your Js file

window.onload = function () {
    const grid = document.getElementById('grid');
    const clearFilterButton = document.getElementById('clearFilterButton');
    clearFilterButton.addEventListener('click', ()=>{
        grid.clearFilter();
    })
};

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts