Clearing a filter in a grid

Suite and Optimus
#1

Hi, I wonder if there is a way to add a (button) icon side by side of a filter in the header of a column in a grid, like “X”, that fires the clearing of the filter using “grid.getHeaderFilter(colId).clear()”. The “content” property seems not to allow this feature.

#2

Hello,

Unfortunately, there is no built-in support for this. However, you can add it manually with JavaScript:

const targetSelector = ".dhx_grid-header"; // Selector for the grid header container

const createFilterTemplate = () => {
	// Find the header cell for the "project" column that contains the filter
	const projectFilterCell = document.querySelector(".dhx_grid-header-cell[data-dhx-id='project'][role='gridcell']");
	
	if (projectFilterCell && !projectFilterCell.querySelector(".custom-clear-btn")) {
		const clearBtn = document.createElement("button");
		clearBtn.innerHTML = "❌";
		clearBtn.className = "custom-clear-btn";
		clearBtn.style.cursor = "pointer";
		clearBtn.style.marginLeft = "5px";
		
		// Clear the filter when button is clicked
		clearBtn.onclick = () => {
			grid.getHeaderFilter("project").clear();
		};

		// Find the wrapper element containing the filter UI
		const filterWrapper = projectFilterCell.querySelector(".dhx_string-cell");
		if (filterWrapper) {
			filterWrapper.appendChild(clearBtn); // Append the clear button next to the filter
		}
	}
};

const observeHeaderChanges = () => {
	// Find the grid header container
	const headerContainer = document.querySelector(targetSelector);
	if (!headerContainer) return;

	// Create a MutationObserver to watch for changes in the header
	const observer = new MutationObserver((mutationsList) => {
		for (const mutation of mutationsList) {
			// If nodes are added or subtree changes, recreate the clear button if needed
			if (mutation.type === "childList" || mutation.type === "subtree") {
				createFilterTemplate();
			}
		}
	});

	// Start observing the header container for changes
	observer.observe(headerContainer, {
		childList: true,
		subtree: true,
	});
};

// Start observing and add button initially
document.addEventListener("DOMContentLoaded", () => {
	observeHeaderChanges();
	createFilterTemplate();
});

Here is an example: DHTMLX Snippet Tool

#3

Thank you, now I’ll study it and try to fit to my project.

1 Like