CODEWITHSUNDEEP
javascriptag-grid
Igino Boffa
Igino Boffa

Reputation: 451

Ag-grid: modify filter window without overwriting filter logic

My client wants some functions (hide/show certain columns) to be in the filter window of every column in the table (not only the ones that actually can be hidden or shown).

I know I can define a custom filter, but I don't need to modify filter logic, I only need to add some buttons in its window (with related actions). Is it possible to do that without re-define the whole logic?

Thank you

Upvotes: 0

Views: 500

Answers (1)

Jarod Moser
Jarod Moser

Reputation: 7338

First you may want to look into the Enterprise features. It offers the Column Menu that has another tab for showing/hiding columns as you want it to do with no extra effort on your end.

Having said that, what you want done is possible with the free version using the custom filter option that you mentioned but not without redefining the logic.

Good news is that here is a template for you, provided by ag-grid themselves and modified by me only slightly:

function PersonFilter() {
}

PersonFilter.prototype.init = function (params) {
    this.valueGetter = params.valueGetter;
    this.filterText = null;
    this.setupGui(params);
};

// not called by ag-Grid, just for us to help setup
PersonFilter.prototype.setupGui = function (params) {
    this.gui = document.createElement('div');
    this.gui.innerHTML =
        '<div style="padding: 4px; width: 200px;">' +
        '<div style="font-weight: bold;">Custom Athlete Filter</div>' +
        '<div><input style="margin: 4px 0px 4px 0px;" type="text" id="filterText" placeholder="Full name search..."/></div>' +
        '<button onClick="toggleAge()">toggle age column</button>' +
        '</div>';

    this.eFilterText = this.gui.querySelector('#filterText');
    this.eFilterText.addEventListener("changed", listener);
    this.eFilterText.addEventListener("paste", listener);
    this.eFilterText.addEventListener("input", listener);
    // IE doesn't fire changed for special keys (eg delete, backspace), so need to
    // listen for this further ones
    this.eFilterText.addEventListener("keydown", listener);
    this.eFilterText.addEventListener("keyup", listener);

    var that = this;
    function listener(event) {
        that.filterText = event.target.value;
        params.filterChangedCallback();
    }
};

PersonFilter.prototype.getGui = function () {
    return this.gui;
};

PersonFilter.prototype.doesFilterPass = function (params) {
    // make sure each word passes separately, ie search for firstname, lastname
    var passed = true;
    var valueGetter = this.valueGetter;
    var filterWord = this.filterText
    var value = valueGetter(params);
    if (value.toString().toLowerCase().indexOf(filterWord)<0) {
      passed = false;
    }

    return passed;
};

PersonFilter.prototype.isFilterActive = function () {
    return this.filterText !== null && this.filterText !== undefined && this.filterText !== '';
};

PersonFilter.prototype.getModel = function() {
    var model = {value: this.filterText.value};
    return model;
};

PersonFilter.prototype.setModel = function(model) {
    this.eFilterText.value = model.value;
};

Here is a JSFiddle demonstrating how this works in the full context of a grid

Upvotes: 2

Related Questions