Not able to reset/clear grid wide filter in Datagrid 2

0
Gridwide filter is added using TextFilter widget in datagrid 2. Added 2 column values for filtering. Added clear button to clear the filter value. On click of the button calling nanoflow with 1 javascript action and change object to change the saved attribute value for the filter. Issue: On click of clear button it is clearing the filter text field value but the actual filter on the grid still remains. It is not resetting the grid filter value.   Text filter   Nanoflow:   Javascript code: Option1: Text field value reset but the grid filter was not reset export async function EmptyTextContent(className) { // BEGIN USER CODE let div = document.getElementsByClassName('mx-name-textFilter1')[0]; if(div) { let filter = div.querySelector('input'); if(filter) { filter.value=''; filter.defaultValue = ""; } } // END USER CODE } Option 2: Text field value reset but the grid filter was not reset export async function EmptyTextContent(className) { // BEGIN USER CODE let div = document.getElementsByClassName('mx-name-textFilter1')[0]; if(div) { let filter = div.querySelector('input'); if(filter) { let outer = filter.outerHTML; filter.removeAttribute('value'); filter.outerHTML= '<input aria-label="" class="form-control" placeholder="Search" type="text" value="">'; filter.value=''; } } mx.data.action({ params: { // applyto: "selection", actionname: "CaseData.DS_GetCaseData_PerUser", // Replace with your microflow name // guids: [], }, callback: function() { console.log("Data Grid Refreshed Successfully"); }, error: function(error) { console.error("Error refreshing Data Grid: ", error); } }); // END USER CODE }   HTML with the value cleared   Here value is empty but the filter value still exists. That is the issue. So the grid filter is not reset with this empty value.   Same code works fine in Mendix 9.24.1 but it is not working in Mendix 10.6.2   How to reset data grid2 filter?
asked
2 answers
0

You can have a look at my reset all filters action in the marketplace:

https://marketplace.mendix.com/link/component/213250

 

It also broke when upgrading to mendix 10 but I've done some fixes. You can take a look at the javascript itself inside the action if you want to only reset 1 filter with your button. You will then have to adjust the code a little bit so that it only targets the input that you want to reset instead of all inputs.

 

Also your javascript's biggest flaw why resetting this way doesnt work properly is because you are only changing the DOM but you are not using any of the react props that the widget uses and thats why its not reflecting any changes correctly.

answered
0
export async function EmptyTextContent(className) {

// BEGIN USER CODE
//className  -> class name of Datagrid
// First we find all the datagrid 2 filters.
const filters = document.querySelectorAll('.' + className + ' .filter-container .form-control');
if (filters.length == 0) {
return Promise.resolve();
}
// Then we define the function that will reset a filter
async function resetFilter(filter) {
return new Promise(async (resolve) => {
const props = Object.keys(filter);
let react = null;

// Reset value
filter.value = '';

// Find the __reactProps property of the current filter
for (let i = 0; i < props.length; i++) {
if (props[i].includes('__reactProps')) {
react = props[i];
break;
}
}

// Trigger the react onchange event
if (react && filter[react].onChange) {
filter[react].onChange({ target: filter });
}
resolve(); // Resolve the promise to indicate completion
});
}

// Convert NodeList to an array using Array.from()
const filterArray = Array.from(filters);
const resetPromises = filterArray.map(async (filter) => {
await resetFilter(filter);
});

// Wait for all promises to complete before returning
await Promise.all(resetPromises);
return Promise.resolve();
// END USER CODE
}

Working solution from @Hunter Koppen post

 

answered