How to add a custom button into Devextreme Header filter popup with clear all selection functionality?
Introduction
Devextreme is a very powerful component suite that provides the developers with many inbuilt functionalities with few lines of code. Among all these powerful features is the devextreme header filter functionality. This feature can be used in DataGrid by adding “headerFilter: { visible: true },” in the grid setting. After adding these lines there will be an icon appearing on the header of that column. By clicking on this icon, a popup window will appear where a list of all the unique values of that column is displayed. Each listed value has a dedicated checkbox. By selecting these checkboxes and then clicking the OK button will filter out that particular selected value in that column and hide the rest of the values. The OK and Cancel buttons are included in the popup window by default.
Below is a screenshot of the Header filter icon and Header filter Popup in a data grid header.
There are only two buttons provided by devextreme which are OK and Cancel by default at the bottom of the popup.
I have added a devextreme button at the bottom of the popup by using the jquery. Upon the click of the Clear button, all the checkboxes of the popup get cleared but the user has to press OK to save the changes. The sample code is attached at the bottom.
$(".dx-header-filter").click(function () {
var $customButton = $('<div class="testbt">').dxButton({
text: 'clear', //or your custom icon
onClick: function () {
// $(".dx-list-select-all-checkbox").click();
$(".dx-treeview").dxTreeView('unselectAll');
$(".dx-list").dxList('unselectAll');
//your on click behavior
}
});
setTimeout(function () {
if ($(".dx-header-filter-menu").find(".testbt").length < 1) {
$(".dx-dropdowneditor-overlay").find(".dx-toolbar-after").append($customButton);
} }, 200);
// $(".dx-header-filter-menu").append($customButton);
});
What is Devextreme?
Devextreme is a very powerful component suite that provides the developers with many inbuilt functionalities with few lines of code.
How can we use Devextreme header filter functionality?
It can be used in DataGrid by adding “headerFilter: { visible: true },” in the grid setting. After adding these lines there will be an icon appearing on the header of that column. By clicking on this icon, a popup window will appear where a list of all the unique values of that column is displayed.
How many buttons are provided by Devextreme in the header filter?
There are only two buttons provided by devextreme which are OK and Cancel by default at the bottom of the popup.
How can we filter out a particular selected value in a column and hide the rest of the values?
By selecting these checkboxes and then clicking the OK button will filter out that particular selected value in that column and hide the rest of the values. The OK and Cancel buttons are included in the popup window by default.