JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Filter Editor clear filter button
- This topic has 1 reply, 2 voices, and was last updated 3 years, 5 months ago by
yavordashew.
-
AuthorPosts
-
March 17, 2021 at 8:39 am #101629
Dark Beccio
Memberjust 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() + ‘”‘;
}
});
}
}},March 17, 2021 at 1:27 pm #101632yavordashew
MemberHi 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 theclearFilter()
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 thesmart-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/ -
AuthorPosts
- You must be logged in to reply to this topic.