How to clear all filters when single click button in slick grid

Question

I used the code below to load the slick grid inside the div tag, it's working fine,but i want to play more functionalities in slick grid. How can remove all filters in single button click?

---

function LoadSlickGrid(txtHRMFilter) {
        $(function () {
            //debugger;
            var data = [];


$.ajax({
                        url: '/Home/GetDetails/?strHRMFilter=' + txtHRMFilter,
                        dataType: "json",
                        type: "POST",
                        async: false,
                        contentType: "application/json",
                        success: function (result) {
                            data = result.desc;

                        }
                    });



            var dataView = new Slick.Data.DataView();

            grid = new Slick.Grid("#grid", dataView, columns, options);

            grid.setSelectionModel(new Slick.CellSelectionModel());

            dataView.onRowCountChanged.subscribe(function (e, args) {
                grid.updateRowCount();
                grid.render();
            });

            dataView.onRowsChanged.subscribe(function (e, args) {
                grid.invalidateRows(args.rows);
                grid.render();
            });

            dataView.beginUpdate();
            dataView.setItems(data);
            dataView.setFilter(filter);
            dataView.endUpdate();
            dataView.refresh();
            var filterPlugin = new Ext.Plugins.HeaderFilter({});

            filterPlugin.onFilterApplied.subscribe(function () {
                dataView.refresh();
                grid.resetActiveCell();

                var status;

                if (dataView.getLength() === dataView.getItems().length) {
                    status = "";
                } else {
                    status = dataView.getLength() + ' OF ' + dataView.getItems().length + ' RECORDS FOUND';
                }
                $('#status-label').text(status);

            });
            var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
            filterPlugin.onCommand.subscribe(function (e, args) {
                dataView.fastSort(args.column.field, args.command === "sort-asc");
            });

            grid.registerPlugin(filterPlugin);

            var overlayPlugin = new Ext.Plugins.Overlays({});

            // Event fires when a range is selected
            overlayPlugin.onFillUpDown.subscribe(function (e, args) {
                var column = grid.getColumns()[args.range.fromCell];

                // Ensure the column is editable
                if (!column.editor) {
                    return;
                }

                var value = dataView.getItem(args.range.fromRow)[column.field];

                dataView.beginUpdate();

                for (var i = args.range.fromRow + 1; i <= args.range.toRow; i++) {
                    dataView.getItem(i)[column.field] = value;
                    grid.invalidateRow(i);
                }

                dataView.endUpdate();
                grid.render();
            });

            grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: false }));
            grid.registerPlugin(checkboxSelector);

            grid.registerPlugin(overlayPlugin);

            grid.init();

            function filter(item) {
                var columns = grid.getColumns();
                var value = true;

                for (var i = 0; i < columns.length`enter code here`; i++) {
                    var col = columns[i];
                    var filterValues = col.filterValues;

                    if (filterValues && filterValues.length > 0) {
                        value = value & _.contains(filterValues, item[col.field]);
                    }
                }
                return value;
            }
        });
    }

--------------------------------

Now i want to clear all filters with single click button in slickgrid.

$("#btnclear").click(function () {
            ClearSlickGrid();
});

How can I achieve this? Thanks in Advance.

Answer 1

You could simply set a blank filter:

$("#btnclear").click(function () {
    dataView.setFilter(function(item){
        return true;
    }
});

When you want to reapply your old filter just call:

dataView.setFilter(filter);