Ag-grid filter Dropdown Options

Question

I have a grid with several columns and the column "Vehicle" of the columns has the options presented in a dropdown menu (html select element). I also have an input type text where the user can type a string.

I want to filter all the Dropdowns options in the Vehicle column according to the string the inserted by the user in the input field.

For example:

Dropdown has 4 options:

List item
Bike 1
Bike 2
Car 1
Car 2

If the user types "car" in the input the input, the Dropdown should show only the options with Car (Car 1, Car 2).

I do not want to affect rows. Just the dropdown options, of all the dropdowns, in the Vechicle column.

I am unable to provide the code due to restrictions.

How may I achieve this using vanilla JavaScript?

Thanks in advance.

stackoverflow.com/q/21332545/5187323 or more particularly stackoverflow.com/a/29076565/5187323 — Jarod Moser
Thanks for the comment @JarodMoser I'm sure some will find this useful but in my particular case I needed a pure javascript solution so no jQuery or any other frameworks are allowed. — Mario Andrade

Mario Andrade Mario Andrade · Accepted Answer · 2017-08-29T10:08:23

I know my question with no code was a bit abstract as I wanted some guidance rather than a straight answer.

Like I mentioned in the question I have a input field used to filter the options. If the user presses "Enter" an Ajax call is made to get filtered results from the database. The database returns a string containing a json object.

var httpRequest = new XMLHttpRequest();
var jsonData = null;
    httpRequest.onload = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                jsonData = json.parse(httpRequest.responseText);
            } else {
                jsonData = httpRequest.statusText;
            }
        }
    };

After this I use columnApi.getColumn("vehicles") to get the column I want to affect.

var col = gridOptions.columnApi.getColumn("vehicles");

With the the above code I can now use the cellEditorParams to change it's values:

col.colDef.cellEditorParams.values  = jsonData;

Hope this is useful to someone in the future.

Ag-grid filter Dropdown Options

1 Answers